html/css - 텍스트 관련 태그들
업데이트:
텍스트를 덩어리로 묶어 주는 태그
<hn>태그
제목 텍스트로 일반 텍스트보다 굵고 진하게 표시된다. h1~h6까지 표시할수 있다.
<p>태그 - 단락 만들기
paragraph의 줄임말로 단락이란 텍스트 덩어리를 말한다. </p>태그를 만날 때 까지 줄바꿈 없이 텍스트를 한 줄로 표시하는데 텍스트 줄이 브라우저 창의 너비보다 길어질 경우 줄이 자동으로 바뀐다.
<br>태그
break의 줄임말로 줄바꿈기호이다.
<hr>태그
수평 줄을 삽입한다.
<blockquote>태그
인용문을 만든다. 다른 텍스트들 보다 안으로 들여써져서 구별하기 편하다.
<pre>태그
이 태그를 사용할 경우 소스의 형태를 그대로 브라우저 창에 보여준다. 주로 코드를 그대로 보여줄 때 사용한다.
텍스트를 한 줄로 표시하는 태그
<strong>태그, <b>태그 - 굵게 표시하기
경고나 주의 사항처럼 중요한 내용이여서 강조해야 할 때는 <strong>태그를 사용하고 문서의 키워드처럼 단순히 굵게 표시할 때는 <b> 태그를 사용한다. strong태그는 화면 낭독기에서 그 부분이 강조되었다고 알려주는 역할도 한다.
<em>태그, <i>태그 - 이탤릭체로 표시
strong, b 태그와 마찬가지로 em은 화면 낭독기에서 그 부분이 이탤릭체라고 알려주는 역할도 하고, i태그는 단순히 이탤릭체로 표시한다.
<q>태그 - 인용 내용 표시하기
<blockquote>와 다른 점은 <blockquote>태그는 블록 레벨 태그이기 때문에 이용 내용이 줄이 바뀌어 나타나고 다른 내용과 구별되도록 안으로 들여 써지지만 <q>태그는 인라인 레벨 태그이기 때문에 줄바꿈 없이 다른 내용과 함께 한 줄로 표시되고 인용 내용에 따옴표를 붙여 표시한다.
<mark>태그 - 형광펜 효과
HTML5부터 적용할 수 있는 태그로 형광펜 기능을 한다.
<span>태그 - 줄바꿈 없이 영역 묶기
이 태그는 자체로는 아무 의미가 없지만 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어서 스타일을 적용하려고 할 때 주로 사용한다.
텍스트 영역을 블록 단위, 즉 단락을 통째로 묶고 싶다면
<span>대신<div>태그를 사용한다.
목록을 만드는 태그
<ul>태그, <li>태그 - 순서 없는 목록 만들기
순서가 필요하지 않은 목록(unordered list)을 만들 때는 <ul>태그를 사용하고 이 태그 안에 <li>태그(list item)를 사용해 각 항목을 표시한다.
<ol>태그, <li>태그 - 순서 목록 만들기
항목을 만들되 순서가 필요한 목록(ordered list)을 만들 때는 <ol>태그를 사용하고 <li>태그(list item)를 사용해 각 항목을 표시한다.
태그 속성으로 순서 목록의 숫자와 순서 바꾸기
-
type속성 - 아래와 같이 속성 값을 줄 수 있다.
속성 값 설명 1 숫자(기본 값) a 영문 소문자 A 영문 대문자 i 로마숫자 소문자 I 로마숫자 대문자 -
start 속성 - 순서 목록은 기본적으로 1부터 시작이지만 start속성을 이용하여 중간부터 시작할 수 있다.
-
reversed속성 - 항목을 역순으로 표시한다.
</li>태그 생략 가능
다음 </li>태그를 생략해도 <li>을 만나면 그 전에 </li>태그가 있다고 인식한다.
<ol>
<li> 한라 수목원
<li> 화순 해수욕장
<li> 산방산
<li> 용머리해안
<li> 송악산
</li>
</ol>
<dl>, <dt>, <dd>태그 - 설명 목록 만들기
<dl>태그는 사전 구성처럼 ‘제목’과 ‘내용’이 한 쌍인 설명 목록(description list)를 만든다. 예를 들어 ‘단어/정의’ 목록이나 ‘질문/답’ 목록에서 사용할 수 있다.
<dl>
<dt>올레 1코스</dt>
<dd>코스 : 시흥 초등학교 옆 - 광치기 해변</dd>
<dd>거리 : 14.6km(4~5시간)</dd>
<dd>난이도 : 중</dd>
<dt>올레 2코스</dt>
<dd>코스 : 광치기 해변 - 온평 포구</dd>
<dd>거리 : 14.5km(4~5시간)</dd>
<dd>난이도 : 중</dd>
</dl>
표를 만드는 태그
<table>, <tr>, <td>, <th>태그 - 기본적인 표
기본적인 표 만들기
웹 문서에 표를 만들 때는 순서가 있다. 우선 <table>태그를 이용해 표 전체 윤곽을 잡은 후 행(row)을 먼저 만들고 행마다 몇개의 셀(cell)이 들어갈지 결정한다. 2행 2열의 표를 만든다면 다음과 같이 만든다.
-
<table>태그로 표 자리를 만든다.<table> </table> -
<tr>태그로 2개의 행을 만든다.<table> <tr> </tr> <tr> </tr> </table> -
<td>태그로 각 행마다 셀을 3개씩 만든다.<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
<th>태그 - 표에 제목 셀 만들기
제목의 경우, 보통 다른 글자보다 굵게 표시하고 셀의 중앙에 배치하는데 <td>대신 <th>태그를 사용하면 해당 셀에 들어가는 내용을 셀의 중앙에 배치하고 굵게 표시한다.
colspan, rowspan - 행 또는 열 합치기
셀 합치기는 <td>태그나 <th>태그 안에서 colspan/rowspan 속성을 사용해 몇 개의 셀을 합칠 지 결정한다.
<td colspan="합칠 셀 개수">내용</td>
<th colspan="합칠 셀 개수">내용</th>
<caption>태그, <figcaption>태그 - 표에 제목 붙이기
-
caption태그를 사용한 표 제목은 표의 위쪽 중앙에 표시된다. 이 태그는 table태그 바로 다음에 사용된다. caption태그 안에 다른 태그를 사용해 제목을 여러 줄로 표시하거나 텍스트를 꾸밀 수도 있다.
-
표에 제목을 붙이는 두 번째 방법으로
<figure>태그와<figcaption>태그가 있다.<figcaption>태그는 설명 글을 붙이고 싶은 대상을<figure>태그로 감싼 후<figcaption>태그를 이용해 제목이나 설명 글을 입력한다.<caption>태그와 달리 제목이 왼쪽 상단에 붙거나 태그를</table>아래에 추가한다면 표 아래에 제목이 표시된다.
<thread>, <tbody>, <tfoot> 태그 - 표 구조 정의
표의 각 셀은 제목 / 내용 / 본문 / 요약과 같이 구조를 나누어 놓는 것이 좋다.
<table>
<caption>제주특별자치도 학교현황(2015.4.1 기준)</caption>
<thead>
<tr>
<th>학생수</th>
<th>교원수</th>
</tr>
</thead>
<tbody>
<tr>
<td>5,547</td>
<td>474</td>
</tr>
<tr>
<td>37,686</td>
<td>2,632</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>86,954</td>
<td>6,111</td>
</tr>
</tfoot>
</table>
각 구조를 분리해 두면 css를 이용해 각 부분의 색이나 속성 값을 다르게 줄 수도 있기 때문에 편리하다.
<col>, <colgroup>태그 - 여러 열 묶어 스타일 지정하기
표에서 하나이 열에 스타일을 지정하거나 열(column)을 몇 개씩 묶어 스타일을 한꺼번에 지정할 수도 있다.
<col>태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 떄 쓰는 태그로 닫는 태그가 없다. <col>태그를 사용해 둘 이상의 열을 묶어 같은 스타일을 지정하려면 span속성을 이용해 몇 개를 함께 묶어줄지 지정할 수 있다.
<colgroup>태그를 사용해서 여러 열을 묶어 스타일을 지정할 수 있는데 <colgroup>태그 안에 묶는 열의 개수만큼 <col>태그를 넣으면 된다.
행을 묶는 태그는 없을까?
표를 만들 때
<tr>태그로 행을 만든 후 그 안에 필요한 개수만큼 셀을 만들기 때문에<tr>태그로 행을 조절하므로 따로 행을 묶는 태그는 없다. 반면 열을 만드는 태그는 없으므로 열을 조절할 때 col이나 colgroup태그를 사용하는 것이다.
<table>
<caption>colgroup 연습</caption>
<colgroup>
<col>
<col span="2" style="background-color:blue;">
<col style="background-color:yellow">
</colgroup>
예 >
댓글남기기