[HTML 완성 프로젝트] 나를 소개하는 웹페이지 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>홍길동의 소개 페이지</title>
  <meta name="description" content="중학교 2학년 홍길동입니다. 코딩과 게임을 좋아합니다." />
  <meta property="og:title" content="홍길동의 소개 페이지" />
  <meta property="og:description" content="코딩을 배우는 중학생 홍길동의 자기소개 페이지입니다." />
</head>
<body>

  <!-- ===== 헤더 + 네비게이션 ===== -->
  <header>
    <h1>🦊 홍길동의 공간</h1>
    <nav>
      <ul>
        <li><a href="#about">자기소개</a></li>
        <li><a href="#hobbies">좋아하는 것</a></li>
        <li><a href="#school">학교 생활</a></li>
        <li><a href="#dream">꿈과 목표</a></li>
        <li><a href="#contact">연락처</a></li>
      </ul>
    </nav>
  </header>

  <!-- ===== 메인 콘텐츠 ===== -->
  <main>

    <!-- 자기소개 섹션 -->
    <section id="about">
      <h2>자기소개</h2>
      <img
        src="https://picsum.photos/150/150?random=1"
        alt="홍길동 프로필 사진"
        width="150"
        height="150"
      />
      <h3>홍길동</h3>
      <p>
        안녕하세요! 저는 <strong>○○중학교 2학년 홍길동</strong>입니다.
        코딩을 배우기 시작한 지 얼마 안 됐지만 정말 재미있어요!
      </p>
      <p>
        이 페이지는 HTML만으로 만든 첫 번째 웹페이지입니다.
        CSS를 배우면 더 예쁘게 꾸밀 예정이에요 😊
      </p>
    </section>

    <!-- 좋아하는 것들 -->
    <section id="hobbies">
      <h2>좋아하는 것들</h2>

      <h3>취미</h3>
      <ul>
        <li>🎮 롤플레잉 게임</li>
        <li>🎵 K-POP 듣기</li>
        <li>💻 코딩 (HTML 배우는 중!)</li>
        <li>📚 판타지 소설 읽기</li>
      </ul>

      <h3>좋아하는 유튜버</h3>
      <ul>
        <li>
          <a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">
            채널 이름 1
          </a>
        </li>
        <li>
          <a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">
            채널 이름 2
          </a>
        </li>
      </ul>
    </section>

    <!-- 학교 생활 -->
    <section id="school">
      <h2>학교 생활</h2>

      <article>
        <h3>좋아하는 과목</h3>
        <p>
          <strong>수학</strong>과 <strong>정보</strong> 과목을 가장 좋아합니다.
          수학은 논리적으로 생각하는 힘을 길러주고,
          정보 시간에 처음으로 코딩을 접하게 됐어요.
        </p>
      </article>

      <article>
        <h3>동아리 활동</h3>
        <p>코딩 동아리에서 활동하고 있습니다. 매주 목요일에 모여 같이 공부해요.</p>
      </article>

      <article>
        <h3>이번 학기 성적 목표</h3>
        <ol>
          <li>수학 90점 이상</li>
          <li>영어 듣기 만점</li>
          <li>과학 실험 보고서 성실히 작성</li>
        </ol>
      </article>
    </section>

    <!-- 꿈과 목표 -->
    <section id="dream">
      <h2>꿈과 목표</h2>

      <article>
        <h3>장래 희망</h3>
        <p>
          웹 개발자가 되고 싶습니다. 직접 게임이나 앱을 만들어 많은 사람들이
          쓰는 서비스를 개발하는 게 꿈이에요.
        </p>
      </article>

      <article>
        <h3>올해 코딩 목표</h3>
        <ol>
          <li>HTML 완전 정복 ✅ (달성!)</li>
          <li>CSS 배우기</li>
          <li>JavaScript로 간단한 게임 만들기</li>
        </ol>
      </article>
    </section>

  </main>

  <!-- ===== 푸터 ===== -->
  <footer id="contact">
    <h2>연락처</h2>
    <p>
      이메일:
      <a href="mailto:honggildong@example.com">honggildong@example.com</a>
    </p>
    <p>
      GitHub:
      <a href="https://github.com" target="_blank" rel="noopener noreferrer">github.com/honggildong</a>
    </p>
    <p>
      <small>© 2026 홍길동. HTML만으로 만든 첫 번째 웹페이지.</small>
    </p>
  </footer>

</body>
</html>