글 수 31
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의 속성값이 있음. 세로정렬이 자동. 게시판에 많이 이용
|
| 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요소
|
| 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 태그의 속성
|
| img | <img src="" alt="" /> | 이미지 가져오기, inline요소 이미지 속성
|
| form | <form>name="numberJoin" action="aa.html"method="post"</form> | 입력을 받음. 게시판, 설문조사, 회원등록 등 폼 속성
|
| 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
|
| 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초기화필요 |