[HTML] 5강 문단 및 형식 관련 태그

문단 태그란?

 일반적으로 텍스트를 작성할 때 블록형태로 묶어 처리를 하는경우가 필요합니다. 이럴 때, 필요한게 문단(블록) 태그입니다.

 블록형태로 묶어 처리하는 태그를 사용하는 경우, 해당 블록 전체에 태그 명령이 처리가 되는 특징이 있습니다.

---

단락 태그

 텍스트를 작성할 때 가장 많이 사용되는 태그로 앞뒤에 줄바꿈을 만들어 주는 특징이 있습니다.

 일반적으로, <p>태그를 사용하며, <p> 태그의 경우 </p> 를 만날 때까지 줄바꿈 없이 텍스트를 한줄로 표시하며, 브라우저의 창보다 너비가 길어지는 경우에는 자동으로 줄바꿈을 해주는 기능이 있습니다.

ex) p태그 예제

입니다.

<p>p태그 예제</p>입니다.

---

줄바꿈 태그

 텍스트를 작성할 때, 엔터키를 이용하여 줄바꿈을 한다하더라도 웹브라우저 창에서는 줄바꿈 없이 한 줄로 표시됩니다.

 이 때, 줄바꿈을 위해 사용되는 태그가 <br>태그 입니다. <br>태그는 닫는 태그인 </br>태그가 필요 없습니다.

ex) br태그
예제입니다

br태그 예제<br>입니다

---

인용 태그

보통 타사이트에 있는 출처가 필요한 텍스트를 인용 할 때, <blockquote>태그와 <q>태그를 사용합니다.

 <blockquote>태그는 들여쓰기가 자동으로 되어 인용한 문장을 표현하므로 다른 텍스트와 구별하기 좋지만, <q>태그의 경우 들여쓰기 없이 인라인태그로 취급되기 때문에 한줄로 표현됩니다.

 두 태그다 cite 속성을 이용하여 인용된 주소를 표시할 수도 있습니다.

ex) 

blockquote태그 예제

입니다

<blockquote>blockquote태그 예제</blockquote>입니다

ex) q태그 예제입니다

<q cite="http://itguidesoul.tistory.com/105?category=645762">q태그 예제</q>입니다

---

입력한 그대로 화면에 표시하는 태그

 텍스트를 편집하다 보면 공백, 개행 등을 있는 그대로 표현하고 싶을 때가 있습니다.

 이때 <pre>태그를 사용합니다.

 <pre>태그는  "preformatted text"의 약자로 태그를 제외한 텍스트를 입력한 그대로 화면에 표시해주며, 블록 형태로 사용됩니다.

ex)

pre(태그) 예제
입니다

<pre>pre(태그) 예제<br>입니다</pre>

---

줄바꿈 없이 영역묶기 태그

 텍스트 단락 안에서 줄바꿈 없이 텍스트의 일부만 묶어서 글자색,폰트,배경색 등의 스타일을 적용하려고 할때는 <span>태그를 사용합니다.

ex) span태그 예제입니다

<span style="color: blue">span태그 예제</span>입니다

---

순서없는 목록 태그

 순서가 필요하지 않은 목록을 만들 때는 <ul>태그를 사용하고 그안에 <li> 태그를 사용하여 각 항목 표시합니다.

<ul>태그는 unordered list의 약자이며, <li>태그는 list item의 약자입니다.

ex)

• ul태그예제1
• ul태그예제2
• ul태그예제3

<ul>

<li>ul태그예제1</li>

<li>ul태그예제2</li>

<li>ul태그예제3</li>

</ul>

---

순서있는 목록 태그

 순서가 필요한 목록을 만들 때는 <ol>태그를 사용하고 그안에 <li> 태그를 사용하여 각 항목 표시합니다.

<ol>태그는 ordered list의 약자이며, <li>태그는 list item의 약자입니다.

ex)

1. ol태그예제1
2. ol태그예제2
3. ol태그예제3

<ol>

<li>ol태그예제1</li>

<li>ol태그예제2</li>

<li>ol태그예제3</li>

</ol>

 

 <ol>태그의 속성으로는 type, start, reversed 속성 등이 있습니다.

 type 속성은 다양한 속성 값을 갖는데, 기본값은 1로 숫자를 표현합니다.

 그밖에, a는 영문 소문자 A는 영문대문자 i는 로마숫자 소문자 I는 로마숫자 대문자를 표현합니다.

ex)

속성값=1	속성값=a	속성값=A	속성값=i	속성값=I
가 나 다 <ol type="1"> <li>가</li> <li>나</li> <li>다</li> </ol>	가 나 다 <ol type="a"> <li>가</li> <li>나</li> <li>다</li> </ol>	가 나 다 <ol type="A"> <li>가</li> <li>나</li> <li>다</li> </ol>	가 나 다 <ol type="i"> <li>가</li> <li>나</li> <li>다</li> </ol>	가 나 다 <ol type="I"> <li>가</li> <li>나</li> <li>다</li> </ol>

start 속성은 시작하는 순번의 번호를 설정 할 수 있습니다.

ex)

3. ol태그예제1
4. ol태그예제2
5. ol태그예제3

<ol start="3">

<li>ol태그예제1</li>

<li>ol태그예제2</li>

<li>ol태그예제3</li>

</ol>

마지막으로 reversed 속성은 항목을 역순으로 표시할 수 있습니다.

ex)

3. ol태그예제1
4. ol태그예제2
5. ol태그예제3

<ol start="3" reversed="reversed">

<li>ol태그예제1</li>

<li>ol태그예제2</li>

<li>ol태그예제3</li>

</ol>

---

설명 목록 태그

 개념과 정의로 이루어진 설명 목록을 만들 때는 <dl>태그, <dt>태그, <dd>태그를 사용합니다. 

<dl>태그는 description list의 약자면서 <dt>태그와 <dd>태그의 집합입니다. 

<dt>태그는 용어(term), <dd>태그 설명(descripton)을 뜻합니다.

<dl>태그 안에는 다수의 <dt>와 <dd>태그 사용이 가능합니다.

ex)

독도

대한민국의 섬

일본 소유 아님

가을

겨울

계절의 일종

<dl>

<dt>독도</dt>

<dd>대한민국의 섬</dd>

<dd>일본 소유 아님</dd>

<dt>가을</dt>

<dt>겨울</dt>

<dd>계절의 일종</dd>

</dl>

---

 지금까지 문단 및 형식 관련 태그에 대해 알아봤습니다.

 다음 강의에서는 표 관련 태그에 대해 알아보겠습니다.