<header>, <footer>, <article>, <section> 태그

약 6분

본문 듣기

HTML 시맨틱 태그

이 강의에서는 HTML의 시맨틱 태그인 , , , 에 대해 알아보겠습니다. 시맨틱 태그는 웹 페이지의 구조를 명확히 하고, 접근성을 향상시키는 중요한 역할을 합니다.

<header> 태그

코드 html

<header>
  <h1>나의 멋진 웹사이트</h1>
  <nav>
    <ul>
      <li><a href="#">홈</a></li>
      <li><a href="#">소개</a></li>
      <li><a href="#">연락처</a></li>
    </ul>
  </nav>
</header>

위 코드는 웹 사이트의 헤더 부분을 구성하는 예제입니다. 웹 페이지에 방문한 사용자가 가장 먼저 보는 부분이기 때문에 중요한 정보를 담아야 합니다.

<footer> 태그

코드 html

<footer>
  <p>© 2023 나의 웹사이트. 모든 권리 보유.</p>
  <p>연락처: contact@example.com</p>
</footer>

위 코드는 웹 페이지의 바닥글을 정의하는 예제입니다. 사용자가 웹 페이지의 끝에 도달했을 때 필요한 정보를 제공합니다.

<article> 태그

코드 html

<article>
  <h2>흥미로운 기술</h2>
  <p>최근의 기술 발전에 대해 알아보자...</p>
</article>

위 코드는 블로그 기사와 같은 독립적인 콘텐츠를 정의하는 예제입니다. 이를 통해 각 기사는 별도로 읽고 이해할 수 있습니다.

<section> 태그

코드 html

<section>
  <h2>인기있는 언어</h2>
  <p>Python, JavaScript, HTML...</p>
</section>

위 코드는 특정 주제에 대한 내용을 묶는 섹션을 정의하는 예제입니다. 여러 개의 섹션을 통해 웹 페이지의 구성을 더욱 명확하게 알릴 수 있습니다.

핵심 요약

이번 강의에서는 , , , 태그에 대해 살펴보았습니다. 이 태그들은 웹 페이지의 구조를 명확하게 만들고 접근성을 높이는 데 큰 역할을 합니다.

실습 문제

이제 위에서 배운 시맨틱 태그들을 활용하여 나만의 웹 페이지를 만들어보세요. , , , 태그를 사용하여 간단한 자기소개 페이지를 구현해 보세요.

개인 프로젝트: 자기소개 페이지 만들기

자기소개 페이지를 만들 때, 우리는 시맨틱 태그를 활용해 구조를 잡고 내용을 구성할 것입니다. 이 과정을 통해 HTML의 기초를 이해하고 실전에서 활용하는 방법을 익히게 됩니다. 아래와 같이 구조를 잡아보세요.

코드 html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>자기소개 페이지</title>
</head>
<body>
  <header>
    <h1>안녕하세요, 저는 [이름]입니다!</h1>
  </header>
  <section>
    <h2>내 소개</h2>
    <p>여기는 내 소개가 들어가는 곳입니다.</p>
  </section>
  <article>
    <h2>내가 좋아하는 것</h2>
    <p>여기는 내가 좋아하는 것들에 대한 글입니다.</p>
  </article>
  <footer>
    <p>연락처: [이메일]</p>
  </footer>
</body>
</html>

위 코드를 참고하여 내용을 수정하고 나만의 자기소개 페이지를 완성해보세요. 재미있고 창의적인 페이지를 만들어 보는 것을 잊지 마세요!

<header>, <footer>, <article>, <section> 태그

HTML 시맨틱 태그

<header> 태그

<footer> 태그

<article> 태그

<section> 태그

핵심 요약

실습 문제

개인 프로젝트: 자기소개 페이지 만들기

댓글 0