[HTML5] 그룹화 요소

log 2015. 5. 8. 15:22

그룹화 요소

• p : 문단
• hr : 주제변경
• ul : 목록
• ol : 순서가 있는 목록
• dl : 목록 관련 내용
• div : 블록 그룹핑
• figure : 이미지
• figcaption : 이미지캡션
• pre : 입력 그대로
• blockquote : 인용문 cite
• br : 강제 줄바꿈

p , hr

hr - 주제와 벗어나는 다른 내용이 있을 경우

<section>
  <h2>웹개발자</h2>
  <p>웹개발자에는 다양한 분야의 개발자 들이 있습니다.</p>
  <hr/>
  <p>웹디자이너</p>
</section>

br , pre

pre - 내용 그대로 표현 하고자 할때

<p>
	HTML
</p>
<pre>
  <h1>제목</h1>
  <p>문　단</p>
  <ul>목　록</ul>
</pre>

blockquote

다른 병보원으로 부터 인용

<p>html역사,<cite>위키피디아</cite>는 이렇게 서술하고 있습니다.</p>
<blockquote>
  <p>1980년 유럽 입자 물리연구소의 계약자였던 물리학자에 의하여 제안 되었다. 연구원이 문서를 공유하기 위해 작성된 것이 HTML</p>
</blockquote>

ol - reversed

reversed 새로 추가된 속성

<ol reversed="reversed">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

결과

1. Coffee
2. Tea
3. Milk

<ol reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

결과

3. Coffee
4. Tea
5. Milk

figure, figcaption

새로 새로 추가된 요소
figcaption, 이미지의 캡션

<figure>
  <img src="" alt="곰돌이 인형과 바나나이불"/>
  <figcaption>곰돌이 인형</figcaption>
</figure>