CodeGym/행동/Frontend SELF KO/콘텐츠를 위한 컨테이너

콘텐츠를 위한 컨테이너

사용 가능

3.1 <main> 태그

HTML5는 개발자들이 더 구조적이고 이해하기 쉬운 웹 페이지를 만들 수 있도록 도와주는 많은 새로운 시맨틱 요소들을 도입했어. 그중에서도 <main><aside> 태그는 각각 주요 콘텐츠와 보조 콘텐츠를 위한 컨테이너를 생성하는 데 사용돼.

<main> 태그는 문서의 주요 콘텐츠를 나타내. 이 태그 안에는 현재 페이지의 독특하고 중요한 콘텐츠가 들어가야 해. <main> 태그 안의 콘텐츠는 페이지마다 고유해야 하고, 로고, 사이드바, 네비게이션 링크, 또는 푸터와 같이 모든 페이지에 반복되는 요소들을 포함해서는 안 돼.

문법:

HTML
<main>
  <!-- 페이지의 주요 내용 -->
</main>

사용 예:

HTML
<body>
  <header>
    <h1>Website Header</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>Article Title</h2>
      <p>This is the main content of the article.</p>
    </article>
  </main>
  <footer>
    <p>&copy; 2024 Example Website</p>
  </footer>
</body>

주요 특징:

  • 내용물: <main> 태그는 페이지의 고유한 주요 콘텐츠를 포함해야 해.
  • 위치: 페이지에는 <main> 태그가 하나만 있어야 해.
  • 접근성: <main> 태그는 페이지의 접근성을 향상시키고, 스크린 리더 같은 보조 기술이 주요 콘텐츠를 더 빠르게 찾을 수 있게 도와줘.

적용:

  • 페이지의 주요 콘텐츠
  • 현재 페이지와 관련된 독특한 내용

이점:

  • 시맨틱 마크업: 검색 엔진과 보조 기술이 페이지의 주요 콘텐츠를 더 쉽게 이해할 수 있게 해줘.
  • 페이지 구조 개선: 주요 콘텐츠를 페이지의 다른 부분, 예를 들어 헤더, 사이드바, 푸터와 명확히 구분해줘.

특징:

  • 페이지마다 독특한 콘텐츠를 포함해야 해.
  • 다른 페이지에서 반복되는 요소(예: 네비게이션 패널, 사이드바, 푸터 등)를 포함하면 안 돼.

3.2 <aside> 태그

<aside> 태그는 주요 콘텐츠와 관련 있지만 문서의 주요 흐름에 포함되지 않는 추가 콘텐츠를 나타내. 일반적으로 광고, 관련 기사 링크, 작가의 전기 등 보조 요소를 포함하는 사이드바에 사용돼.

문법:

HTML
<aside>
  <!-- 추가 콘텐츠 -->
</aside>

사용 예:

HTML
<main>
  <article>
    <h2>Article Title</h2>
    <p>This is the main content of the article.</p>
  </article>
  <aside>
    <h3>Related Articles</h3>
    <ul>
      <li><a href="#related1">Related Article 1</a></li>
      <li><a href="#related2">Related Article 2</a></li>
    </ul>
    <h3>About the Author</h3>
    <p>Short bio of the author.</p>
  </aside>
</main>

주요 특징:

  1. 내용물: <aside> 태그는 주요 콘텐츠와 관련된 추가 정보를 포함하지만, 문서의 주요 흐름의 일부는 아니야.
  2. 위치: <main> 태그 안팎에 위치할 수 있으며, 컨텍스트에 따라 달라져.
  3. 적용: 사이드바, 광고 블록, 관련 기사 링크 및 기타 보조 정보에 사용돼.

적용:

  • 추가 정보가 있는 사이드바
  • 광고 블록
  • 관련 리소스에 대한 링크
  • 주요 콘텐츠와 관련된 추가 자료

이점:

  • 시맨틱 마크업: 검색 엔진과 보조 기술이 주 콘텐츠에 대한 보조 콘텐츠임을 이해할 수 있게 도와줘.
  • 페이지 구조 개선: 추가 콘텐츠를 주요 콘텐츠와 명확하게 구분해서 페이지를 더 체계적이고 이해하기 쉽게 만들어.

특징:

  • 주요 콘텐츠와 관련 있지만 그 일부는 아닌 콘텐츠를 포함해.
  • 사이드바, 광고 블록, 구독 및 기타 추가 자료에 사용될 수 있어.
1
과제
Frontend SELF KO,  레벨 10레슨 3
잠금
기본 컨테이너
기본 컨테이너
1
과제
Frontend SELF KO,  레벨 10레슨 3
잠금
사이드바
사이드바
코멘트
  • 인기
  • 신규
  • 이전
코멘트를 남기려면 로그인 해야 합니다
이 페이지에는 아직 코멘트가 없습니다