<2> 태그 정리

 

텍스트를 다루는 태그

<h1~6> 태그 

제목을 표시할 때 사용  크고 굵은 글씨가 특징

 

<p> 태그 

입력한 내용 앞뒤로 빈 줄이 생기며 텍스트 단락 생성

주로 본문으로 사용

한 줄만 사용할 때 </p>를 안 써도 무방

 

<br> 태그

줄 바꿈 태그 

닫는 태그가 없음

 

<hr> 태그

수평 줄 생성 영역 분리

 

<blockquote> 태그

인용문으로 쓰이고 들여 쓰이는 특징

 

<pre> 태그

소스 그대로 표현이 가능해서 프로그램 소스를 표시할 때 사용 

 

---

 

텍스트 속성 - 텍스트 태그 안에서 자유롭게 사용 가능

<strong>, <b> - 각각 강조, 굵게

 

<em>, <i> - 기울이기

 

<q> - 인용 표시

 

<mark> - 형광펜 효과

 

<span> - 줄 안에서 묶기

 

<div> - 줄 바꿔 단락으로 묶기

 

---

목록 만들기 태그

<ul>, <li> - 순서 없는 목록

각 항목에 구분점 생성

css의 list-style-type 속성으로 제거하거나 다른 것으로 수정 가능

<ul>

   <li>

      <li></li> 

      <li></li> 구조

   

 

<ol>, <li> - 순서 목록

항목당 숫자 생성

<ol> 태그 속성 - <li> 태그 리스트가 시작되기 전에 사용

type : 구분점 앞의 숫자 조정

start : 중간 번호부터 수정 _type이 a일 때 start 값이 3이면 c부터

reserved : 역순으로

 

 

<dl> -> <dt> -> <dd> - 설명 목록 

 

<dl> 

   <dt>

          제목

      <dd>

             내용

      <dd>

             내용

 

---

표를 만드는 태그

<table> - 표를 생성하는 태그

<tr> 행 (가로)

<td> 한 개 셀 <th> 제목 셀

 

ex

<table> 

   <tr>

      <th> 제목 </th>

      <td> 열 </td>

      <td> 열 </td>

   </tr>

   <tr>...

</table> 

 

---

표 합치기

행 합치기 

<colspan="n"> 태그 사용 기준에서 오른쪽으로 합쳐짐

<rowspan="n"> 태그 사용 기준에서 아래로 합쳐짐

 

---

<caption> - 표 제목 표의 상단에 위치 (중앙 정렬)

<figure> - 표제목 표 상단, 하단에 위치 (왼쪽 정렬)

 

표의 양이 많을 때 

<thead>, <tbody>, <tfoot>으로 영역 구분

 

세로로 묶을때 

<colgrop> -> <col> 사용 

위치는 <table> 태그 바로 아래