트위터 마크업 챌린지 - (5) Main

5535 단어 htmlcsshtmlcss

전체 구조를 위해서는 여기를 참조

Main


main 말 그대로, 본문에 있어서 가장 핵심이 되는 내용들을 묶어주는 역할을 한다


유의할 점

main 태그는 한번만 사용!

하나의 HTML 문서에는 하나의 main 태그만 사용할 수 있다!


따라서 sectioning elements 안에 올 수 없다

핵심모아놓은 부분이므로,

  • section
  • article
  • aside

등의 태그 안에 들어올 수 없다!


가능하다면 3단 구성으로 짜보자!

가능하다면, header - main - footer서론 - 본론 - 결론 구성으로 해보도록 하자!


main은 sectioning element가 아니기 때문에, heading 태그를 작성할 필요가 없다!


코드 작성


main

<main>
  <header>
    <h1>Home</h1>
    <button type="button" aria-label="Timeline options">
      <!-- Icon -->
    </button>
    <div>
      <h2>Home shows you top Tweets first</h2>
      <button type="button">
        <strong>See latest Tweets instead</strong>
        <span>You'll be switched back Home after you've been away for a while.</span>
      </button>
      <a href="#">
        <!-- Icon -->
        View content preferences
      </a>
    </div>
  </header>
</main>

좋은 웹페이지 즐겨찾기