6. Grouping content

`<ol>, <ul>, <li>`

<ol>은 ordered list의 약자로 순서가 있는 목록을 뜻하며 <ul>이란 unordered list의 약자로 순서가 없는 목록을 뜻합니다. <li>는 각 항목들을 나열하는 태그로 list item을 뜻합니다. 주의할 점은 <li> 요소는 <ol> 혹은 <ul> 요소 안에서만 사용되어야 하며, <ol>, <ul> 의 직계 자식 요소로는 <li> 요소만 사용되어야 합니다.

<h1>분야별 공부 분야 추천</h1>
<h2>Front-End</h2>
<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javacript</li>
    <li>Jquery</li>
    <li>Bootsrap</li>
</ol>
<h2>Back-End</h2>
<ul>
    <li>Python</li>
    <li>Django</li>
</ul>

`<dl>, <dt>, <dd>`

<ol>, <ul>, <li>가 목록을 정의할 때 쓰였듯이 <dl>, <dt>, <dd> 도 목록을 정의할 때 쓰입니다.

차이점이 있다면 <dl>, <dt>, <dd>는 사전처럼 어떠한 것을 정의할 때 쓰이는 목록입니다. <dl>은 정의 목록(definition list)이며 <dt>는 정의할 용어(definition term)을 뜻합니다. <dd>는 용 어를 설명(definition description)할 때 쓰입니다.

<dl>
    <dt>HTML</dt>
    <dd>마크업 언어입니다.</dd>
</dl>

`<div>`

<div>는 레이아웃을 나눌 때 사용하는 태그입니다. 이 태그는 컨텐츠의 형태를 변형시키지는 않지만 하위에 있는 여러 요소를 묶어 스타일을 변경시킬 수 있습니다.

<article>, <section>, <header>, <nav>는 기본적으로 <div>와 같은 역할을 합니다. 차이점이 있다면 태그에 의미를 부여한 것입니다. 예를 들어 내용이 하나의 독립된 컨텐츠라면 <div>대신 <article>을 사용합니다. 바꿔 말해 <article>, <section>, <header>, <nav> 모두 <div>로 대신 사용할 수 있으나 보다 적합한 요소를 찾은 후 대용할 태그가 없을 경우 사용하시기 바랍니다.

<div>hello</div>

소스코드

<!DOCTYPE html>
<html>
<head>
    <title> Document </title>
</head>
<body>
    <h1>분야별 공부 분야 추천</h1>
    <h2>Front-End</h2>
    <ol type="A">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javacript</li>
        <li>Jquery</li>
        <li>Bootsrap</li>
    </ol>
    <h2>Back-End</h2>
    <ul>
        <li>Python</li>
        <li>Django</li>
    </ul>
    <dl>
        <dt>HTML</dt>
        <dd>마크업 언어입니다.</dd>
    </dl>
    <hr>
    <!-- 둘 다 꾸며줄 다른 태그가 없을 경우 사용 -->
    <div>hello</div>
    <!-- lorem10 -->
    <p>Lorem <span>ipsum</span> dolor sit amet consectetur adipisicing elit. Fuga, consectetur.</p>
</body>
</html>

`<figure>, <figcaption>`

웹페이지를 탐색하다보면 가끔 캡션(자막, 설명)이 있는 이미지를 접할 때가 있습니다.