Grouping Content

항상 섹션별로 나누고, 박스로 묶어주는 연습을 하자!

이렇게 해야 하는 이유?

• CSS styling시 가장 효율적인 방식으로 묶는 작업
• 각 태그가 가진 의미들로 Semantic HTML 작성가능

Grounping tags

• header

  보통 해당 페이지에서 가장 중요한 h1태그를 포함한다.

<header>
  <h1>Hello world</h1>
</header>

• article

  <article></article>

하나의 아티클은 독립적이며, 다른 서비스에 가져다놔도 이상하지 않을만큼 독자적으로 의미를 가지고 있다. 하나의 아티클 안에 다시 머리글인 header와 다른 content를 담은 태그들로 이루어져 있는 이유인 듯.

<article>
  <header>
    <h2></h2>
    <p></p>
    <p></p>
    <p></p>
    <footer></footer>
  </header>
</article>

• nav

  ul태그를 사용하여 nav안을 채울 수 있다.

  보통 '메뉴', '카테고리' 를 만들 때 사용한다.

<nav>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</nav>

실무에서 가장 남발하게 되는 태크인 div태그는 문단을 나누는 것 이외에는 아무 의미도 부여하지 않는 태그이니 사용을 지양한다.