HTML 레이아웃 요소 구성하기

Heading은 문서에서 새로운 섹션(new section)이나 하위 섹션(sub-section)의 시작을 정의 할 때 완벽하게 효율적인 접근이지만, 더 명확하고 정확한 의미 구조(semantic structure)를 확립하기 위해 잘못 사용될 수 있는 여지가 있습니다.

div 엘리먼트는 주로 CSS를 걸 수 있는 스캐폴딩(scaffolding)으로 사용되는 섹션을 포함하는 데 사용할 수 있지만 큰 의미는 없습니다. 단면 처리(sectioning)에는 기사(articles), 머리글(headers), 바닥 글(footers) 및 내비게이션(navigation)과 같이 페이지의 특정 부분을 정의하는 데 사용할 수 있는 몇 개의 태그가 포함됩니다.

Articles과 Sections

article 요소는 독립형 콘텐츠 섹션을 마크업하는 데 사용할 수 있습니다. 예를 들어 블로그 게시물을 기사로 생각하거나 많은 기사가 담긴 전통적인 신문 페이지를 복제하는 경우 여러 번 생각하면 이 작업은 한 번만 사용할 수 있습니다.

섹션 요소는 보다 일반적인 섹션을 나타내며 예를 들어 기사를 분할하거나 챕터(chapters)를 나타내는 데 사용할 수 있습니다.

<article>
    <section id="intro">
        <p>[An introduction]</p>
    </section>
    <section id="main_content">
        <p>[Content]</p>
    </section>
    <section id="related">
        <ul>
            <li><a href="that.html">That related article</a></li>
            <li><a href="this.html">This related article</a></li>
        </ul>
    </section>
</article>

div가 이러한 분리를 만드는 데 사용될 수 있지만 ( 또는 스타일링을 위해 이러한 구분이 필요하지 않은 경우에도 ) 훨씬 풍부하고 의미 있는 문서를 제공합니다.

Headers와 Footers

머리글(Headers)과 바닥 글(Footers)은 보다 전문화되고 자체 설명이 가능한 섹션을 제공합니다.

<body>
    <article>
        <header>
            <h1>Alternatively…</h1>
            <p>[An introduction]</p>
        </header>
        <section id="main_content">
            <p>[Content]</p>
        </section>
        <footer>
            <p>[End notes]</p>
        </footer>
    </article>
    <footer>
        <p>[Copyright bumf]</p>
    </footer>
</body>

바닥 글(Footers)은 포함되어있는 섹션의 꼬리말입니다. 위의 예에서 첫 번째 바닥 글은 집필의 바닥 글이고 두 번째 바닥 글은 페이지의 바닥 글입니다.

Asides

Aside는 콘텐츠를 둘러싼 콘텐츠와 관련된 콘텐츠를 나타내는 데 사용할 수 있습니다.
Article에서 관련 정보의 인용 내용 또는 미리보기를 생각해보십시오.

<section id="main_content">
    <h1>Tixall</h1>
    <p>[All about Tixall]</p>
    <aside>
        <h2>Tixall Obelisk</h2>
        <p>[A short note about Tixall Obelisk]</p>
    </aside>
    <p>[Maybe a bit more about Tixall]</p>
</section>

Aside는 콘텐츠를 둘러싼 콘텐츠와 관련된 콘텐츠를 나타내는 데 사용할 수 있습니다.
Article에서 관련 정보의 인용 내용 또는 미리보기를 생각해보십시오.

우리가 이 구조에 집중하는 동안,
figures를 포함 시키려면, 그 일을하기위한 두 개의 태그가있을 수 있습니다.

<figure>
    <img src="pictures.jpg">
    <figcaption>My Birthday Party</figcaption>
</figure>

img 요소는 alt 속성이 필요 없다는 것을 명심하십시오. figcaption (맞춤법이 필요한 경우 “figure caption”)이 해당 작업을 수행하면됩니다.

Navigation

마지막으로 내비게이션 링크 그룹을 마크업하는 데 사용되는 nav가 있습니다.

<nav id="main_nav">
    <ul>
        <li><a href="/tutorials/">Tutorials</a></li>
        <li><a href="/techniques/">Techniques</a></li>
        <li><a href="/examples/">Examples</a></li>
        <li><a href="/references/">References</a></li>
    </ul>
</nav>

you're currently offline