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

콘텐츠를 위한 컨테이너

Frontend SELF KO

레벨 10 , 레슨 3

사용 가능

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>

주요 특징:

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

적용:

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

이점:

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

특징:

주요 콘텐츠와 관련 있지만 그 일부는 아닌 콘텐츠를 포함해.
사이드바, 광고 블록, 구독 및 기타 추가 자료에 사용될 수 있어.

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION