시맨틱 태그
Coddy HTML 여정의 Fundamentals 섹션에 포함된 레슨 — 60개 중 27번째.
HTML의 시맨틱 태그는 콘텐츠의 의미를 정의하는 데 도움을 주며, 개발자와 브라우저 모두에게 코드를 더 명확하게 만들어 줍니다. <div> 및 <span>과 달리, 이 태그들은 포함된 콘텐츠에 문맥을 제공합니다.
일반적인 시맨틱 태그:
<header>– 소개 내용으로, 보통 상단에 위치합니다.<nav>– 탐색 링크를 포함합니다.
<main>– 페이지의 주요 콘텐츠입니다.<article>– 블로그 포스트와 같이 독립적인 콘텐츠입니다.
<section>– 관련된 콘텐츠를 그룹화하며, 종종 제목을 포함합니다.<footer>– 저작권 정보나 연락처 상세 정보와 같은 정보를 담는 하단 섹션입니다.
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</main>
<footer>
<p>Copyright 2023</p>
</footer>이 구조는 콘텐츠를 위한 명확하고 의미 있는 레이아웃을 제공합니다.
챌린지
쉬움시맨틱 HTML을 사용하여 영화 리뷰 페이지를 작성하세요. 다음 내용이 포함되어야 합니다:
1. <header> 구성 요소:
<h1>"Movie Reviews"<nav>링크 포함: "Home", "Reviews", “Top Picks”
2. <main> 구성 요소:
- 다음을 포함하는 리뷰용
<article>:- 영화 제목을 포함하는
<h2> - 짧은 리뷰를 포함하는
<p>
- 영화 제목을 포함하는
3. <footer> 구성 요소:
<p>"Copyright 2023 Movie Reviews"
치트 시트
HTML의 시맨틱 태그는 콘텐츠의 의미를 정의하는 데 도움을 주어, 개발자와 브라우저 모두에게 코드를 더 명확하게 만들어 줍니다. <div> 및 <span>과 달리, 시맨틱 태그는 포함된 콘텐츠에 문맥을 제공합니다.
주요 시맨틱 태그:
<header>– 소개 콘텐츠로, 보통 상단에 위치합니다.<nav>– 내비게이션 링크를 포함합니다.<main>– 페이지의 주요 콘텐츠입니다.<article>– 블로그 포스트와 같이 독립적인 콘텐츠 조각입니다.<section>– 관련 콘텐츠를 그룹화하며, 종종 제목을 포함합니다.<footer>– 저작권이나 연락처 정보와 같은 정보가 포함된 하단 섹션입니다.
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</main>
<footer>
<p>Copyright 2023</p>
</footer>직접 해보기
<!DOCTYPE html>
<html>
<body>
<!-- 여기에 코드를 작성하세요 -->
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
