블록요소(Block Elements)
태그들을 담을 수 있고 높이, 너비, 여백 등의 지정이 가능합니다. 블록태그 다음에 오는 요소는 자동으로 줄바꿈이 적용됩니다.
h1 h2 h3 h4 h5 h6 div ol ul li dl dt dd p form fieldset table address blockquote hr pre header footer section article canvas video audio
Heading
|
Heading 태그는 문서, 쳅터의 "제목" 영역에 사용합니다. h1 ~ h6까지 태그가 있고 중요도가 높은 주제는 h1, 가장 중요도가 낮은 주제는 h6으로 표시합니다. |
- Heading Tag를 잘 사용하면 검색엔진 최적화에 유리합니다.
- Heading 태그는 하나의 문서에 중복 사용이 가능합니다. h2 태그를 하나의 문서에서 10번 20번 사용해도 상관없으나 "제목"에 해당하는 곳에서만 사용하는 것이 좋습니다. Heading 태그의 무분별한 사용은 검색엔진 최적화에 악영향을 주게 됩니다.
- h1 태그는 페이지에서 가장 중요한 "제목"을 나타내는 태그입니다. 하나의 문서에 한번만 사용하는 것이 좋습니다.
<h1>문서 내 가장 중요한 주제를 나타냅니다.</h1> <h2>문서 내 2번째로 중요한 주제를 나타냅니다.</h2> <h3>문서 내 3번째로 중요한 주제를 나타냅니다.</h3> <h4>문서 내 4번째로 중요한 주제를 나타냅니다.</h4> <h5>문서 내 5번째로 중요한 주제를 나타냅니다.</h5> <h6>문서 내 6번째로 중요한 주제를 나타냅니다.</h6> |
Divide
|
Divide 태그는 영역(섹션)을 나눌때 사용합니다. |
사용 예)
<div>첫번째 섹션입니다.</div> <div>두번째 섹션입니다.</div> |
List
|
ol, ul, dl 총 3가지로 분류하며 원하는 기능에따라 다르게 사용합니다. |
- ol : 순서가 필요한 리스트에서 사용하며 li 태그로 리스트를 구분합니다. (계약서, 약관, 법조문 등)
- ul : 순서가 필요없는 리스트에서 사용하며 li 태그로 리스트를 구분합니다. (메뉴판, 사이트 메뉴등)
- dl : 단어 또는 사물등을 설명하는 리스트에서 사용하며 dt, dl 태그로 리스트를 구분합니다. (사전 등)
dt : 단어 및 사물의 이름을 정의
dd : 단어 및 사물의 설명
사용 예)
<ol> <li>제 1장 ...</li> <li>제 2장 ...</li> </ol> <ul> <li>삼겹살</li> <li>목살</li> </ul> <dl> <dt>사과</dt> <dd>과일의 일종으로...</dd> </dl> |
Paragraph
|
paragraph는 문단(문장)을 나눌때 사용합니다. |
사용 예)
<p>p 태그는 문장을 나눌때 사용합니다.</p> <p>이렇게 문장을 구분할때 사용합니다.</p> |
Form
|
Form 태그는 사용자가 입력한 데이터를 서버로 전송하기 위해 사용합니다. |
- 데이터를 전송 할 위치를 지정하는 action 속성을 같이 사용해야합니다.
- 데이터 전송 방법을 정하는 method속성도 같이 사용해야 합니다.
- 전송방법에는 get 또는 post 방법이 있습니다.
|
get |
post |
|
|
데이터를 URL에 추가하여 전송 |
|
|
|
URL의 길이는 300자 제한이 있음 |
크기 제한이 없음 |
|
|
|
북마크 지정 불가 |
|
|
URL에 데이터가 그대로 표시됨(보안X) |
데이터를 암호화 하여 전송 |
- Form 태그 안에서 사용되는 태그로는 fieldset(block), legend(inline) 태그가 있습니다.
- fieldset 태그는 입력 양식 공간을 나눌때 사용합니다.
- legend 태그는 fieldset 태그 안에 내용을 설명할때 사용합니다.
사용 예)
<form action="index.php" method="get"> <fieldset> <legend>필수 입력 항목</legend> </fieldset> <fieldset> <legend>선택 입력 항목</legend> </fieldset> </form> |
Table
|
Table 태그는 표를 그리기 위한 태그로 thead, tbody, tfoot으로 구분하여 표현합니다. 크게 위의 3개로 구분을 한뒤 tr로 줄을 구분하고, th, td로 셀을 나누어 사용합니다. |
- thead : table의 제목역할을 하는 컬럼들의 집합입니다.
- tbody : table의 내용역할을 하는 컬럼들의 집합입니다.
- tfoot : table의 내용을 정리하는 컬럼들의 집합입니다.
- tr : table의 줄을 나눌때 사용합니다.
- th : 셀의 주제를 나타낼때 사용합니다.
- td : 셀의 내용을 나타낼때 사용합니다.
사용 예)
<table> <thead> <tr> <th>주제1</th> <th>주제2</th> </tr> </thead> <tbody> <tr> <td>내용1</td> <td>내용2</td> </tr> </tbody> <tfoot> <tr> <td>결과1</td> <td>결과2</td> </tr> </tfoot> <table>
Adress
|
Adress 태그는 주소를 입력하기 위한 태그입니다. |
사용 예)
<adress>서울 특별시 영등포구 여의도...</adress> |
Blockqoute
|
인용구로 사용합니다. |
사용 예)
<blockqoute>악법도 법이다. - 소크라테스 -</blockqoute> |