You cannot see this page without javascript.

coding

조회 수 448 추천 수 0 2015.06.30 14:51:19

APM이 구축된 서버에서 html과 PHP를 이용해서 마방진을 계산하는 과정을 코딩해보려고 한다.

먼저 html에 대해서 조금 알아야 할 것 같다.

html태그는 무수히 많지만 마방진을 계산하고 출력하기에 필요한 정도로만 아주 간단히 알아보자.

 

 

HTML 태그 정리

 
명칭 구성 내용
html <html>...</html>  
head <head>...</head> 머리말
meta <meta... /> 정보에 대한 정보를 알려줌. 빈태그, self close
title <title>...</title> 문서 제목
body <body>...</body> 본문
p <p>...</p> Paragraph의 P : 단락, 문단, 절
h1 ~ h6 <h1>...</h1> 제목, 글자 크기, 요즘은 중요도 우선순. h1은 화사 로고에 많이 표시
hr <hr> 단락 구분. 문서의 구분선
주석태그 <!-- --> 주석
br <br /> break, 줄바꿈을 해줄때
div <div>...</div> division의 약자. HTML 문서 영역이나 섹션의 분할을 정의한다.
span <span>...</span> inline요소, 줄바꿈이 안되고, 폭 , 높이 적용도 안됨. 인라인요소들을 그룹화 하는데 사용되며, 브라우저에 레이아웃 변경은 되지 않는다.
table <table>...</table> 표, border, cellpadding, cellspacing, width, summary의 속성값이 있음. 세로정렬이 자동. 게시판에 많이 이용
  • border - 테이블의 선 두께
  • cellpadding - 셀 안쪽 여백
  • cellspacing - 셀과 셀 사이 간격
  • width - 테이블의 넓이
  • summary - 요약, 잘 사용하지 않음
caption <caption>...</caption> summary 역할. css에서 안보이게 함. 스크린리더기에 활용
colgroup <colgroup>...</colgroup> 열 그룹. 구조적인 그룹화를 위해 사용됨
col <col...> 빈태그 이지만 유일하게 self colse가 없다. 열의속성값과 스타일을 지정
thead <thead>...</thead> 테이블 헤더 행 그룹
tbody <tbody>...</tbody> 테이블 내용 행 그룹
tfoot <tfoot>...</tfoot> 테이블 푸터행 그룹. 계산시 합계 부분에 많이 이용, tbody 위에 올 수 있다. 화면상에서는 아래에 위치
th <th>...</th> 셀 제목으로 지정하여 강조되게 표시하는 태그. table header, inline요소
tr <tr>...</tr> 테이블 내의 한 행을 정의하는 태그. tabel row
td <td>...</td> 각 행에 포함된 셀을 만들때 사용되는 태그. table data, td의 개수는 th의 개수와 일치 해야한다. inline요소
  • colspan - 가로 행을 합쳐준다.
  • rowspan - 세로 열을 합쳐준다.
  • * 합쳐준 개수만큼 td 항목을 없애줘야 한다.
ol <ol>...</ol> ordered list. 순서가 있다. 앞에 넘버링이 붙는다.
ul <ul>...</ul> unordered list. 순서가 없다. 앞에 기호가 붙는다.
li <li>...</li> list. ol과 ul의 세부 항목. ol과 ul의 자식으로 li만 올 수 있다.
dl <dl>...</dl> definition list(정의 목록)
dt <dt>...</dt> 항목 definition term
dd <dd>...</dd> 설명 definition description
a <a href="" target="">daum</a> anchor. 링크 연결. inline요소 
a 태그의 속성
  • href - 목적지, url
  • target - 보여질 위치
  • * target의 속성
    • _blank - 새창
    • _self - 이동
    • _parent - 먼저 띄워진 창
    • _top - 현재 띄워진 가장 최상단에 위치한 창
  • name - a태그의 이름 지정(북마크 역할)
  • title -링크에 대한 설명
  • href - 목적지, url

  • 링크 속성 ":"는 가상 클래스
    • a:link - 방문 안한 곳, 파란색
    • a:visit - 방문 한 곳, 보라색
    • a:hover - 마우스 올렸을 때
    • a:active - 활성화 된 링크, 빨간색
img <img src="" alt="" /> 이미지 가져오기, inline요소 
이미지 속성
  • src - 경로 지정, 필수 입력
  • alt - 이미지를 위한 대체텍스트를 정의
  • title - 거의 사용하지 않음.
form <form>name="numberJoin" action="aa.html"method="post"</form> 입력을 받음. 게시판, 설문조사, 회원등록 등 폼 속성 
  • name - 전송될 데이터의 이름. value는 text. 해당 입력양식이 어느 폼에서 만들어졌는지 식별
  • action - 입력된 데이터가 전송될 페이지를 지정. value는 url. 개발자가 주로 정함.
  • method - 입력데이터가 처리될 방식. value는 get(소량) / post(대량). get이 default. 사용은 post로
fieldset <fieldset>...</fieldset> form 안에 논리적으로 묶인 구성요소를 그룹으로 묶을 때. 사각형 모양으로 표시
fieldset 요소의 제목은 legend 태그를 사용
legend <legend>...</legend> fieldset에 대한 설명. 여기서의 legend는 설명(caption), 범례의 의미와 가깝다.
label <label>...</label> 리더기가 읽어주는 부분(웹접근성)에서 중요한 요소, 다양한 폼 서식의 설명. 
for 속성 - 라벨에 표시되는 양식폼 요소의 이름을 지정.
input <input.../input> 입력 상자. 속성에 type, name, value, checked, maxlength, readonly, disabled
  • name - 필수 입력. 이름지정
  • value - 입력 구성요소의 값을 지정
  • checked - 'checked', 'radio' 일 경우 체크된 상태로 표시하게 함. checked 사용시 name값이 동일해야 함
  • maxlength - 타입 속성이 text, password 일 경우 입력 가능한 최대 문자수를 지정
  • readonly - 타입 속성이 text, password 일 경우, 요소의 값을 수정할 수 없는 읽기 전용으로 지정, 데이터 전송이 가능
  • disabled - 페이지가 로드될 때 폼 구성요소를 선택할 수 없게 한다. 수정 불가능, 데이터 전송 불가능
  • type - 입력 구성 요소의 종류를 지정
  • * type 속성 종류
    • text - 텍스트
    • password - 비밀번호창
    • email - 이메일입력
    • radio - 하나만 선택
    • checkbox - 원하는 만큼 선택
    • file - 파일첨부
    • submit - 폼의 액션페이지로 전송
    • reset - 초기화
    • button - 이벤트 발생, 자바스크립트가 붙는다
    • hidden - 개발자가 이용
textarea <textarea="say" cols="50" rows="5">하고픈 말을 적으세요 </textarea> 긴 글 작성시 사용. 여러 줄의 텍스트를 입력할 수 있는 상자를 만듦.
select / option <select name="email"> <option value="1">naver </option>
<option value="2'">daum</option>
<option value="3'">google</option> </select>
선택메뉴(드롭다운 리스트), select 요소 내의 태그에 목록에 있는 사용 가능한 옵션을 정의한다.
button <button> </button> 버튼생성, submit, reset, button. 유일하게 css값을 가지고 있는 태그, css초기화필요

 

 

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 남을 비방하거나 상업적 용도의 글은 통보없이 삭제될 수 있습니다. LynX 2010-11-04 6089
32 이런 에러가 쳇팅 2 에서뜹니다 file [1] 구미호 2016-09-04 1236
31 본문 네 광고 file LynX 2016-05-17 614
30 fs LynX 2016-05-04 1107
29 cisco packet tracer LynX 2016-04-26 574
28 가입 하였습니다 구미호 2016-04-21 426
27 2015/10 기준 스카이레이크 30~210만원대 견적 hermit2873 2015-12-08 90
26 AutoDesk 제품 키 [2] LynX 2015-10-14 876
» coding [11] LynX 2015-06-30 448
24 건담 file [16] LynX 2015-06-21 683
23 새총 만들기 file LynX 2013-02-27 593
22 소중한 약속 하은아빠 2012-10-15 64
21 AXLE 550TI file 아침엔당근 2012-05-30 6166
20 유니텍 지포스 9800GT file 아침엔당근 2012-05-30 191
19 SoundBlaster LIVE5.1 file 아침엔당근 2012-05-30 53
18 AudioTrak MAYA MK2 file 아침엔당근 2012-05-30 25
17 링스컴 작업중... file 아침엔당근 2012-05-27 27
16 삼성 센스 NT-301 + M235 file 아침엔당근 2012-05-27 100
15 Soundadge Audio Card file [2] 아침엔당근 2012-05-27 32
14 로지텍 M235 무선마우스 file 아침엔당근 2012-05-26 31
13 신기한 LED file 아침엔당근 2012-05-26 39
XE Login