본문 : 내용(Content) 요소 - P, BLOCKQUOTE, UL, OL, DL, HR, FIGURE, DIV, PRE

웹문서의 본문에 위치하는 내용 요소들에 대하여 알아봅니다. 콘텐츠를 구성하는 기본적인 요소들이며, HTML5에서 새로 추가된 속성이나 요소들도 있음에 유념합니다.

P 요소

p 요소는 문단(Paragraph)을 표시한다.

<p>도망쳐 도착한 곳에 낙원이란 없다.</p>

• 문단을 통해 같은 주제의 시작과 종료 지점을 알릴 수 있다.
• a, input 요소 등 다양한 요소를 포함할 수 있다.

BLOCKQUOTE 요소

blockquote 요소는 블록 형태의 인용문을 표시한다.

<blockquote cite="http://www.worldwildlife.org/who/index.html">
  For 50 years, WWF has been protecting the future of nature. The worlds leading conservation organization, WWF works...
</blockquote>

• 인용된 내용은 상대적으로 특별한 내용이므로 사용자가 신속하게 파악할 수 있어야 한다. 기본적으로 브라우저들은 양쪽 들여쓰기를 적용시킨다.
• 외부에 있는 내용(소스)을 인용할 때 사용하고 내부에 있는 내용을 인용할 때는 q 요소를 사용한다.

cite 속성

cite 속성은 인용된 내용의 출처를 지정한다.

이 속성은 blockquote 나 q 요소에서 사용하는 속성으로 정의되어 있지만 그 용도를 구체적으로 밝히지 않고 있으며 아직까지 브라우저도 이 속성을 제대로 지원하지 못하고 있다.

UL 요소

ul 요소는 순서 없는 리스트(Unordered List)를 표시한다.

<ul>
  <li>하나</li>
  <li>둘</li>
</ul>

• 리스트 타입을 지정하며 자식 요소인 li 요소와 함께 사용한다.
• 순서 없는 리스트는 순서를 매기지 않고 리스트 항목을 단순하게 나열하며 불릿(bullet)을 이용하여 각각의 리스트 항목을 표시한다.

OL 요소

ol 요소는 순서 있는 리스트(Ordered List)를 표시한다.

• 이 요소는 리스트 타입을 지정하며 자식 요소인 li 요소와 함께 사용한다.
• 순서 있는 리스트는 리스트 항목을 일정한 기준에 따라 순서대로 나열하는 방식으로 순서가 중요한 의미를 지닐 때 사용한다.

type 속성

type 속성은 순서 표시의 종류를 지정한다. 순서 표시는 숫자와 문자로 구분되며, 속성값은 다음과 같다.

속성값	설명	예
1	숫자에 의한 표시(기본값)	1,2,3,...
a	소문자 알파벳에 의한 표시	a,b,c,...
A	대문자 알파벳에 의한 표시	A,B,C,...
i	소문자 로마숫자에 의한 표시	i,ii,iii,...
I	대문자 로마숫자에 의한 표시	Ⅰ,Ⅱ,Ⅲ,...

<ol type="I">
  <li>HTML</li>
  <li>CSS</li>
</ol>

1. HTML
2. CSS

start 속성

start 속성은 리스트의 시작 숫자(start number)를 지정한다. 속성 값은 반드시 숫자(정수)만 올 수 있으며 첫 번째 리스트 항목에 표시된다. 시작 숫자를 지정하는 것은 li 요소의 value 속성을 이용할 수도 있다.

<ol start="10">
  <li>HTML</li>
  <li value="100">CSS</li>
  <li>Javascript</li>
</ol> 

10. HTML
100. CSS
101. Javascript

만약 ol 요소의 start 속성과 li 요소의 value 속성이 중복적으로 지정된 경우 value 속성이 우선한다.

reverse 속성

reverse 속성은 HTML5에 새로 추가된 속성으로 리스트를 역순서로 지정한다. 기본적으로 리스트 순서는 오름차순이지만 reverse 속성을 이용하면 리스트 순서를 내림차순으로 바꿀 수 있다.

<ol reversed="reversed" >
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
</ol>

1. HTML
2. CSS
3. Javascript

LI 요소

li 요소는 리스트 항목(List Item)을 표시한다.

• 항목(Item)은 리스트를 구성하는 요소이며, 이 항목을 어떤 기준에 따라 모아 둔 것이 리스트이다.
• 부모 요소인 ol, ul, menu 요소와 함께 사용해야 한다.

value 속성

value 속성은 리스트 항목의 서수 값(ordinal value)을 지정한다. 서수 값은 순서를 나타내는 수의 값을 의미한다. 이 속성은 리스트 항목의 순서를 표현하므로 ol 요소와 함께 사용할 때만 유효하다.

<ol>
  <li>포도</li>
  <li>수박</li>
  <li value="100">사과</li>
  <li>배</li>
  <li>딸기</li>
</ol>

ol 요소의 기본값은 1부터 시작이고 value 값을 이용해 시작값을 설정할 수도 있다.

1. 포도
2. 수박
100. 사과
101. 배
102. 딸기

DL 요소

dl 요소는 정의 리스트(Definition List)를 표시한다.

<h2>용어 해설</h2>
<dl>
  <dt>소녀시대</dt>
  <dd>소녀시대(少女時代, 영어: Girls' Generation)는 대한민국의 9인조 걸 그룹으로, 소속사는 SM 엔터테인먼트이다.
    소녀시대라는 이름은 소녀들이 평정할 시대가 왔다는 의미를 갖고 있다.
    대개 줄여서 소시라고도 하고, 한자권에서는 少女時代로, 영어권에서는 SNSD나 Girls' Generation이라 부른다.</dd>
</dl>

<h2>항목 정의</h2>
<dl>
  <dt>소녀시대 구성원</dt>
  <dd>태연</dd>
  <dd>제시카</dd>
  <dd>티파니</dd>
</dl>

<h2>주어부와 술어부의 관계로 이루어진 리스트</h2>
<dl>
  <dt>해외에서 가장 많이 사용하는 브라우저</dt>
  <dd>크롬</dd>
  <dt>국내에서 가장 많이 사용하는 브라우저</dt>
  <dd>인터넷 익스플로우</dd>
</dl>

<h2>사용법 절차 및 설명</h2>
<dl>
  <dt>적립 버튼을 누르면</dt>
  <dd>포인트가 현금으로 적립됩니다.</dd>
  <dt>차감 버튼을 누르면</dt>
  <dd>포인트가 차감됩니다.</dd>
</dl>

<h2>질문과 답변</h2>
<dl>
  <dt>제 홈페이지에 있는 글을 다른 사이트에서 허락도 없이 복사하여 올려놓았습니다. 상대방을 처벌할 수 있나요?</dt>
  <dd>당사자간에 원만한 해결이 이루어지지 않는 경우에는 한국저작권위원회 (http://www.copyright.or.kr, 전화 02-2660-0000)를 통해 홈페이지에 실린 글도 창작물로 볼 수 있는지 여부, 저작권의 권리 침해 및 구제 방안 등에 대해 자세한 상담을 받아 보시기 바랍니다. 상담결과 법적 보호가치가 있다고 판단이 되고 사법처벌을 원하는 경우에는 피해사실 및 저작권심의조정위원회 상담내용 등을 자세히 기재하여 신고해 주시기 바라며, 복사되어 올려진 게시글(물)의 화면갈무리 등 관련 증빙자료를 확보하여 사건담당자에게 제출하시기 바랍니다.</dd>
  <dt>광고라는 안내도 없고 수신거부가 되지 않는 스팸메일은 어떻게 신고하면 되나요?</dt>
  <dd>수신자의 의사에 반한 영리목적의 광고성 정보의 전송, 이른바 스팸메일 전송행위는 정보통신망이용촉진및정보보호등에관한법률위반 제74조, 같은 법 제50조의8에 의거 1년 이하의 징역 또는 1천만원 이하의 벌금에 처할 수 있습니다. 한국인터넷진흥원에서 운영하는 불법스팸대응센터(www.spamcop.or.kr)를 통해서도 스팸과 관련하여 차단을 도와드리고 있으니 신고하시면 됩니다</dd>
</dl>

• 리스트의 시작과 끝을 <dl&g;t로, 용어 부분은 <dt>로, 설명 부분은 <dd>로 표시한다.
• 순서 없는 리스트처럼 아이템을 표기한 순서대로 나열하지만, 리스트가 용어와 설명 2개의 부분으로 구성된다는 점이 다르다.
• 용어와 설명 부분이 항상 일대일 대응 관계를 이루는 것은 아니다. 한개의 용어에 여러 개의 설명이 붙을 수 있고 반대로 여러 개의 용어에 한 개의 설명이 붙을 수도 있다.
• HTML5 에서는 용어(term)-설명(description)이라는 표현 대신 개념을 확장해 관계형 리스트로 0개 이상의 명칭과 값의 집합으로 구성된다. 명칭과 값의 집합은 용어와 그에 대한 정의, 메타데이터 속성과 그 값, 또는 어떤 형태이든 명칭과 값으로 구성할 수 있는 내용이면 된다라고 정의돼 있다.

DT 요소

dt 요소는 정의 리스트에서 용어 부분(Definition Term)을 표시한다.

• dl 요소 내에서만 사용되며 반드시 dd 요소와 짝을 이루어 사용해야 한다.
• 정의 리스트는 아이템을 규정하고 설명하기 위한 목적으로 사용하므로 주어부와 서술부가 바뀌면 그 의미가 달라질 수 있다. 따라서 dt 요소는 반드시 dd 요소 앞에 있어야 한다.
• dt 요소는 텍스트만 포함할 수 있으며, p, h 요소와 같은 블록 레벨 요소를 포함할 수 없다.

DD 요소

dd 요소는 정의 리스트에서 설명 부분(Definition Description)을 표시한다.

• dl 요소 내에서만 사용되며 반드시 dt 요소와 짝을 이루어 사용해야 한다.
• 정의 리스트는 아이템을 규정하고 설명하기 위한 목적으로 사용하므로 주어부와 서술부가 바뀌면 그 의미가 달라질 수 있다.
• dd 요소는 텍스트만 포함할 수 있으며, p, h 요소와 같은 블록 레벨 요소를 포함할 수 없다.

HR 요소

hr 요소는 수평선이 나타나고, 이를 통해 시각적 변화를 표현한다.

<p> 옛날에는...</p>
<hr>
<p> 근래에는...</p>

• HTML5 에서는 문단 레벨의 주제 구분의 의미를 갖는다. 즉, 의미있는 마크업을 강화하기 위해 hr 요소를 주제와 주제 사이의 경계선으로 표시하는 용도로 사용하고 있다.

FIGURE 요소

figure 요소는 HTML5에 추가된 요소로서, 사진, 일러스트 이미지, 도표, 코드 블록, 시 구절 등과 다양한 형식의 도해(figure)를 하나로 묶어 블록을 형성하고 캡션을 포함시켜 서로의 관계를 명확히 구조화 시킨다.

• 자식 요소를 포함할 수 있으므로 img, canvas, video, code 요소 등 다양한 형식의 요소를 같은 주제로 묶어서 표시할 수 있다.

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE9	FF4	SF5, iOS4	CH7, An2.1	O11

FIGCAPTION 요소

figcaption 요소는 figure 요소에 대한 캡션을 표시한다.

• figure 요소는 하나의 figcaption 요소만 가질 수 있으며 부모-자식 관계에 의해 상호관계를 명시적으로 맺을 수 있다.

figcaption과 img 요소의 alt 속성 차이점

figcaption 요소는 도표 제목이고 alt 속성은 도표 설명이다. 즉 figure 요소는 도표와 함께 제공되는 상황에서 제목을 표시하기 위한 것이고 alt 속성은 도표가 없는 상황에서 도표를 표시하기 위한 것이다.

<h2>구버전의 HTML</h2>
<img src="book.jpg" alt="사용자 경험 과정을 순환적으로 표현한 그림">
<p>사용자 경험의 순환 구조</p>

<h2>HTML5</h2>
<figure>
  <img src="book.jpg" alt="사용자 경험 과정을 순환적으로 표현한 그림">
  <figcaption>사용자 경험의 순환 구조</figcaption>
</figure>

DIV 요소

div 요소는 문서 분할(document DIVision)을 표시한다.

<div id="wrap">
  <div class="section">
    <p>내용</p>
  </div>
</div>

• 특별한 의미를 부여하지 않고 내용을 묶을 수 있는 범용적 컨테이너이다.
• 단순히 스타일 시트나 스크립트 적용을 위해 영역을 나누어야 할때 유용하다.
• 인라인 요소나 텍스트도 포함 가능하다.

PRE 요소

pre 요소는 미리 만들어진 텍스트(PREformatted text)를 표시한다.

<pre>
  function sum(a, b) {
    return(a+b)
  }
</pre>

• 텍스트는 Courier와 같은 고정폭 글꼴로 표시되며, 공백을 유지하고 워드랩(word wrap)은 무시한다.
• 시나 컴퓨터 코드등을 표현하는데 사용된다.