Tag: article

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

Caution: HTML5 사양은 각 섹션의 시작 부분에 h1 요소를 사용할 수 있음을 제안합니다. 이 요소는 해당 섹션 앞의 모든 항목의 하위 제목이 됩니다. ( 위의 예에서 h1이 오프닝 article 태그 바로 다음에 오는 경우 html은 오프닝 섹션 태그 바로 다음에 해당 초기 h1의 하위 제목이됩니다.)
그러나 이 나사는 이전 버전과의 호환성을 보장하지 않으며 이를 이해하지 못하는 사용자 에이전트 (스크린 리더 포함)는 제대로 구조화된 제목 수준을 적용하지 않습니다. 섹션을 사용하지 않았다면 사용할 표제 수준을 고수하는 것이 좋습니다. (예 : 섹션 1과 관계없이 h2 등). 이것은 무엇인가를 망가뜨리거나 의미 나 의미를 손상시키지 않습니다.

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>
```
Note: 이는 또한 페이지 내 내비게이션 (<a href=”#overthere”> … 등)에도 사용될 수 있지만 모든 그룹 링크에 필요하지는 않으며 주요 그룹으로 설계되었습니다. 예를 들어, 저작권(copyright), 저자(author) 및 연락처 링크(contact link)는 바닥 글 요소(footer element)에 단독으로 배치할 수 있습니다.

Caution: 이러한 새로운 HTML 5 요소의 스타일을 지정하려면 (예 : <div id = “content”> … 등을 사용하는 것보다 훨씬 낫습니다) 이전 버전의 브라우저, 특히 Internet Explorer에서 문제가 발생할 것입니다 버전 8 이하는 이러한 태그를 이해하지 못합니다. 그러나 HTML5 Shiv가 문제를 해결할 수 있습니다. head 부분에 삽입 된 작은 Javascript로, 브라우저를 새로운 HTML 5 태그를 사용할 수 있도록 CSS의 다양한 속성까지 스타일을 지정할 수 있습니다.

DEMO →
2017년 03월 27일

HTML 레이아웃 구성 태그

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>

2017년 03월 27일

Tag: article

HTML 레이아웃 요소 구성하기

Articles과 Sections

Headers와 Footers

Asides

Navigation