섹션과 아티클
Coddy HTML 여정의 Fundamentals 섹션에 포함된 레슨 — 60개 중 28번째.
HTML에서 <section> 및 <article> 태그는 콘텐츠를 논리적인 부분으로 구성하는 데 사용됩니다.
<section> 태그는 문서 내에서 장(chapter), 헤더, 푸터 또는 문서의 다른 섹션과 같은 섹션을 정의합니다. 이는 관련된 콘텐츠를 함께 그룹화하는 방법입니다. 예를 들어, <section>을 사용하여 페이지를 소개, 본문 및 연락처 정보로 나눌 수 있습니다.
<section> 태그를 사용하는 방법은 다음과 같습니다:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section><article> 태그는 독립적이고 자기 완비적인(self-contained) 콘텐츠를 지정합니다. 그 자체로 의미가 있어야 하며, 웹 사이트의 나머지 부분과 독립적으로 읽을 수 있어야 합니다. <article> 요소가 사용될 수 있는 예로는 포럼 게시물, 블로그 항목, 뉴스 기사 또는 댓글 등이 있습니다.
다음은 <article> 태그를 사용하는 방법입니다:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
챌린지
쉬움<section> 및 <article> 태그를 사용하여 웹 페이지 구조를 잡는 HTML 문서를 만드세요. 다음 섹션들을 포함하세요:
- 페이지의 주요 콘텐츠를 담는
<main>섹션. <main>내부에 "Upcoming Events"라고 적힌 제목(<h2>)이 있는<section>을 만드세요.<section>내부에 두 개의<article>요소를 만드세요.- 각
<article>에는 제목(<h3>)과 더미 텍스트가 포함된 단락(<p>)이 있어야 합니다. 제목에는 "Event 1"과 "Event 2"를 사용하고, 단락에는 "Event 1 details..."와 "Event 2 details..."를 사용하세요.
치트 시트
<section> 태그는 관련 있는 콘텐츠를 함께 그룹화하기 위해 문서 내의 섹션을 정의합니다:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section><article> 태그는 그 자체로 의미가 통하는 독립적이고 자기 완비적인 콘텐츠를 지정합니다:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>직접 해보기
<!DOCTYPE html>
<html>
<body>
<!-- 여기에 코드를 작성하세요 -->
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
