HTML&CSS

컨텐츠 그룹 태그

Michelle Hwang 2021. 4. 7. 16:29 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>컨텐츠 그룹 태그</title>
        <style>
            #html_box{ margin: 20px; padding: 20px; border: 1px solid green;}
            #css_box{ margin: 20px; padding: 20px; border: 1px solid blue;}
        </style>
    </head>
    <body>
        <div id="html_box">
            <dl>
                <dt> HTML </dt>
                <dd> 정의 </dd>
            </dl>
            <ol>
                <li> 1번 장점 </li>
                <li> 2번 장점 </li>
                <ul>
                    <li> 1번 장점에 세부사항_1 </li>
                    <li> 1번 장점에 세부사항_2 </li>
                </ul>
                <li> 3번 장점 </li>
            </ol>
        </div>
        <div id="css_box">
            <dt>CSS</dt>
            <dd>정의</dd>
        <ol>
            <li> 1번 장점 </li>
            <ul>
                <li> 1번 장점에 세부사항_1 </li>
                <li> 1번 장점에 세부사항_2 </li>
            </ul>
            <li> 2번 장점 </li>
            <li> 3번 장점 </li>
        </ol>
        </div>
    </body>
</html>

<ol> ordered list 순서가 있는 목록 <ol type="1 || A || a || I  || i ">
<ul> unordered list 순서가 없는 목록
<li> list 순서가 있는 목록과 순서가 없는 목록에서 item 역할을 하는 태그
<dl> definition list 정의 목록
<dt> definition term 정의할 용어
<dd> definition description 용어 설명
<div>   레이아웃 나눌 때 쓰는 태그

# <div>

<article>, <section>, <header>, <nav> 는 기본적으로 <div>와 같은 역할을 합니다. 차이점이 있다면 <div>태그에 의미를 부여한 것.

예를 들어 내용이 하나의 독립된 컨텐츠라면 <div>대신 <article>을 사용합니다. 

<article>, <section>, <header>, <nav> 모두 <div>로 대신 사용 할 수 있으나 보다 적합한 요소를 찾은 후 대응할 태그가 없는 경우 사용하길 바랍니다.