[HTML] 태그 정리

 

<br> : 줄 바꿈 (중복 사용 가능)

<p> : 줄 바꿈 두 번 (중복 사용 불가)

 

<hr> : 선 그리기

 

<pre> : 화면에 입력한 그대로 출력되도록 함

          -> 띄어쓰기 시 &nbsp;를 쓰거나 줄 바꿈 시 <br>을 사용하지 않아도 됨

 

<b> : 텍스트를 굵게 함

<i> : 텍스트를 기울임

<ins> : 텍스트에 밑줄

 

<div>~</div> : 블록 형식으로 공간 분할,  블록 전후 줄바꿈

<span>~</span> : 인라인 형식으로 공간 분할

 

<figure>~</figure> : 사진, 다이어그램, 텍스트와 같은 요소들을 묶어서 그룹 지을 때 사용

 

<ul>~</ul> : 순서 없는 목록을 만들 때 사용

<ol>~</ol> : 순서 있는 목록을 만들 때 사용,  

                   <ol type="A / 1"> 형식으로 선언하면 순번 타입 설정 가능

                   <ol start="10"> 형식으로 선언하면 순번이 10부터 시작함

                   순번을 역순으로 하려면 <ol start="~" reversed>로 써주기

-> 세부 항목은 <li>~</li>를 사용

 

<dl>~</dl> : 용어 설명 리스트

                   <dt>정의할 용어, <dd>용어 설명 작성

 

<a>~</a> : 하이퍼링크

                ex) <a href="http://www.naver.com" target="_blank">네이버로 이동</a>

                target에 "_top"를 쓰면 현재 창에서 열기(기본값), "_blank"를 쓰면 새창 또는 새탭에서 열기

 

<table>~</table> : 표 생성

                          <tr>~</tr>로 각 행을 구분하고, 그 내부에 <td>~</td>로 열을 구분

                          맨 첫 행의 항목명은 <th>~</th>로 작성 (<td>도 가능)

                          <td colspan="~">로 열 병합, <td rowspan="~">로 행 병합

 

<select>~</select> : 리스트 박스

                            'size'를 설정하지 않으면 기본값 1로 적용되어 ▼ 모양의 콤보 박스 생성 

                            'multiple' 써주면 다중 선택 가능

                            선택 옵션은 내부에 <option>~</option>으로 추가