한국어

유럽

아시아

← 레벨 1 – 빌더

수업 5/12 ⏱ 25 분

머리글, 메뉴, 바닥글

상단에는 메뉴가 있고 하단에는 바닥글이 있는 헤더 등 실제 웹사이트와 같은 실제 구조를 페이지에 부여해.

보여줄게: 모든 웹사이트에는 동일한 부분이 있어

큰 웹사이트를 보세요. 상단에는 이름과 메뉴가 포함된 헤더가 있고, 중간에는 콘텐츠가 있고, 하단에는 작은 내용이 포함된 바닥글이 있어. HTML에는 다음 부분에 대한 전용 태그가 있어.

<body>
  <header>
    <h1>Website Name</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="second-page.html">Second Page</a>
    </nav>
  </header>

  <main>
    <h2>Here's the main content</h2>
    <p>Everything the page is about.</p>
  </main>

  <footer>
    <p>Made by Jake, 2026</p>
  </footer>
</body>
💡
시각적으로 지금은 크게 변경되지 않어. 이러한 태그는 자체적으로 표시되지 않어. 그렇다면 왜 굳이 글을 쓰나요? 코드에 **순서**를 가져오기 때문야. 브라우저, 검색 엔진, 스크린 리더는 모두 이를 사용하여 무엇이 메뉴이고 무엇이 콘텐츠인지 파악해. 그리고 무엇보다도, 다음 강의에서는 스타일을 지정하여 메뉴가 실제로 실제 메뉴처럼 보이도록 할 것야.

네 차례 💪

  1. ~에`index.html`, 다음 부분으로 기존 콘텐츠를 래핑해.`
    `상단에`

    `그리고`

  2. 두 번째 페이지에서도 동일한 작업을 수행해. **머리글과 바닥글은 두 페이지 모두에서 정확히 동일해야 해** – 그냥 복사해.
  3. 저장, 새로 고침, 클릭: 메뉴가 두 페이지 모두에서 작동합니까?
    4. 🏫 학교 웹사이트 – 솔루션(index.html) 
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <header>
      <h1>Riverside Elementary School</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="lunch-menu.html">Lunch Menu</a>
      </nav>
    </header>

    <main>
      <img src="images/school.jpg" alt="Our school building">
      <h2>About Our School</h2>
      <p>Our school has stood in Riverside for 120 years.</p>

      <h2>Clubs</h2>
      <ul>
        <li>floorball</li>
        <li>ceramics</li>
        <li>coding</li>
      </ul>
    </main>

    <footer>
      <p>Made by the 4th grade class, 2026</p>
    </footer>
  </body>
</html>
    🙋 개인 웹사이트 – 솔루션(index.html) 
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <header>
      <h1>Jake Miller</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="about-me.html">More About Me</a>
      </nav>
    </header>

    <main>
      <img src="images/me.jpg" alt="Me with a soccer ball">
      <h2>What I Like</h2>
      <p>Soccer, Minecraft, and building websites.</p>
    </main>

    <footer>
      <p>Made by Jake, 2026</p>
    </footer>
  </body>
</html>
    🌍 여행 일지 – 솔루션(index.html) 
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <header>
      <h1>Where We've Been 🌍</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="trips.html">All Trips</a>
      </nav>
    </header>

    <main>
      <h2>Last Trip: The Mountains</h2>
      <img src="images/mountains.jpg" alt="View from the summit">
      <p>Three days of walking, one wrong turn, and a hundred wild berries.</p>
    </main>

    <footer>
      <p>Journal kept by the Miller family, 2026</p>
    </footer>
  </body>
</html>
    ⚽ 클럽 웹사이트 – 솔루션(index.html) 
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <header>
      <h1>Riverside Eagles FC</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="roster.html">Roster</a>
      </nav>
    </header>

    <main>
      <img src="images/team.jpg" alt="Team photo">
      <h2>Recent Results</h2>
      <ol>
        <li>Eagles – Hawks 3 : 1</li>
        <li>Falcons – Eagles 2 : 2</li>
      </ol>
    </main>

    <footer>
      <p>Riverside Eagles FC · training Tue & Thu at 5:00 PM</p>
    </footer>
  </body>
</html>
    ✅
    **직접 확인해:** 두 페이지 모두 상단에 동일한 이름과 메뉴가 있고 하단에 바닥글이 있으며 메뉴를 통해 페이지 간에 전환돼. 구조가 완료되었어. 이제 구조가 어떻게 보이는지 알아볼 수 있어!

    이번 수업에서 배울 점

    © 2026 Ing. Martin Polak / AlgoRhino · 콘텐츠 이용 약관