figure – KNULAB

HTML Tag : article

독립적인 HTML 문서의 독립 섹션. 예를 들어 블로그 게시물을 기사로 생각하면 이 요소를 한 번만 사용할 수 있습니다. 많은 기사가 포함된 전통적인 신문 페이지를 복제한다고 생각하면 여러 번 사용할 수 있습니다.

<h1>The Daily News</h1>

<article>
    <h2>Man Eats House</h2>
    <!-- article content -->
</article>

<article>
    <h2>Martian Mice Invade Ecuador</h2>
    <!-- article content -->
</article>

<h1>The Daily News</h1>

<article>
    <h2>Man Eats House</h2>
    <!-- article content -->
</article>

<article>
    <h2>Martian Mice Invade Ecuador</h2>
    <!-- article content -->
</article>

HTML Tag : section

HTML 문서의 일반적인 섹션을 예를 들어, 기사(articles)를 분할하거나 챕터(chapters)를 나타내는 데 사용할 수 있습니다.

<article>
    <section id="intro">
        <!-- An introduction -->
    </section>
    <section id="main_content">
        <!-- Main content -->
    </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>

<article>
    <section id="intro">
        <!-- An introduction -->
    </section>
    <section id="main_content">
        <!-- Main content -->
    </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>

Note: 전역 속성(Global Attributes)

HTML Tag : header

소개 콘텐츠 또는 내비게이션 기능이 포함 된 페이지 또는 섹션의 머리글(headers)입니다.

<body>
    <header>
        <!-- A header for the page. -->
    </header>

    <section>
        <header>
            <!-- A header for the section. -->
        </header>
    </section>
</body>

<body>
    <header>
        <!-- A header for the page. -->
    </header>

    <section>
        <header>
            <!-- A header for the section. -->
        </header>
    </section>
</body>

HTML Tag : footer

페이지 또는 섹션의 바닥 글(footers). 여기에는 포스트 스크립트, 부록 또는 관련 페이지에 대한 링크와 같은 내용이 포함될 수 있습니다.

<body>
    <section>
        <!-- stuff -->
        <footer>
            <!-- A footer for the section. -->
        </footer>
    </section>

    <footer>
        <!-- A footer for the page. -->
    </footer>
</body>

<body>
    <section>
        <!-- stuff -->
        <footer>
            <!-- A footer for the section. -->
        </footer>
    </section>

    <footer>
        <!-- A footer for the page. -->
    </footer>
</body>

HTML Tag : aside

콘텐츠를 둘러싼 콘텐츠와 관련이 있지만, 콘텐츠와 별개입니다. 기사(articles)에서 관련 정보의 인용 글 또는 미리보기는 aside 태그로 마크업 할 수 있는 콘텐츠의 예입니다.

<section id="main_content">
    <h1>Tixall</h1>
    <!-- All about Tixall -->
    <aside>
        <h2>Tixall Obelisk</h2>
        <!-- A short note about Tixall Obelisk -->
    </aside>
    <!-- A bit more about Tixall -->
</section>

<section id="main_content">
    <h1>Tixall</h1>
    <!-- All about Tixall -->
    <aside>
        <h2>Tixall Obelisk</h2>
        <!-- A short note about Tixall Obelisk -->
    </aside>
    <!-- A bit more about Tixall -->
</section>

HTML Tag : 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>

<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>

HTML Tag : figure

그림(Figure). 일반적으로 페이지의 주 콘텐츠에서 참조되는 자체 포함 된 설명 콘텐츠. 관련 사진이나 차트를 원하는 곳에 사용됩니다.

<figure>
    <img src="obelisk.jpg">
    <figcaption>Tixall Obelisk</figcaption>
</figure>

<figure>
    <img src="obelisk.jpg">
    <figcaption>Tixall Obelisk</figcaption>
</figure>

Tag: figure

HTML 레이아웃 구성 태그