[HTML] 12. HTML 한 페이지 완성 (종합 예제 )

이번 글에서는 지금까지 배운 내용을 합쳐서
HTML 한 페이지를 통째로 완성해봅니다.

포인트는 “예쁘게 꾸미기”가 아니라
구조가 명확한 문서를 만드는 것입니다.

1. 종합 예제 목표

시맨틱 구조(header/nav/main/section/article/aside/footer)
목록(ul/li)로 메뉴 만들기
링크(a), 이미지(img) 넣기
표(table)로 데이터 표현
폼(form)으로 입력 받기

2. 전체 코드 (복붙 실행용)

아래 코드를 그대로 새 파일로 저장해서 실행해보세요.
예: index.html로 저장 → 더블클릭하면 브라우저에서 열립니다.


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 종합 예제</title>
</head>

<body style="margin:0; font-family: Arial, sans-serif;">

  <!-- 1) header -->
  <header style="border-bottom:1px solid #ddd; padding:16px;">
    <h1 style="margin:0;">My Study Page</h1>
    <p style="margin:8px 0 0;">HTML 구조를 연습하는 종합 예제 페이지</p>
  </header>

  <!-- 2) nav (메뉴) -->
  <nav style="border-bottom:1px solid #ddd; padding:12px 16px;">
    <ul style="margin:0; padding:0; list-style:none; display:flex; gap:12px;">
      <li><a href="#notice">공지</a></li>
      <li><a href="#posts">게시글</a></li>
      <li><a href="#stats">통계</a></li>
      <li><a href="#contact">문의</a></li>
    </ul>
  </nav>

  <!-- 3) main -->
  <main style="display:flex; gap:16px; padding:16px;">

    <!-- 본문 영역 -->
    <div style="flex:3;">

      <!-- section: 공지 -->
      <section id="notice" style="border:1px solid #eee; padding:16px; margin-bottom:16px;">
        <h2 style="margin-top:0;">공지사항</h2>

        <article style="border:1px solid #ddd; padding:12px; margin-bottom:10px;">
          <h3 style="margin:0 0 8px;">학습 안내</h3>
          <p style="margin:0;">
            이 페이지는 <strong>HTML 구조</strong>를 연습하기 위한 예제입니다.<br>
            디자인은 나중에 CSS에서 예쁘게 만들 수 있습니다.
          </p>
        </article>

        <article style="border:1px solid #ddd; padding:12px;">
          <h3 style="margin:0 0 8px;">참고 링크</h3>
          <p style="margin:0;">
            <a href="https://developer.mozilla.org/ko/" target="_blank" rel="noopener noreferrer">MDN Web Docs</a>
            를 참고하면 HTML 표준을 확인할 수 있습니다.
          </p>
        </article>
      </section>

      <!-- section: 게시글 목록 -->
      <section id="posts" style="border:1px solid #eee; padding:16px; margin-bottom:16px;">
        <h2 style="margin-top:0;">최근 게시글</h2>

        <ul>
          <li>[HTML] 태그 구조 이해</li>
          <li>[HTML] 블록/인라인 차이</li>
          <li>[HTML] 폼(form) 기본</li>
        </ul>

        <p>
          <span style="background:yellow;">팁</span>
          목록은 메뉴/게시판 등 실무에서 정말 많이 씁니다.
        </p>
      </section>

      <!-- section: 표(table) -->
      <section id="stats" style="border:1px solid #eee; padding:16px; margin-bottom:16px;">
        <h2 style="margin-top:0;">학습 통계(표 예시)</h2>

        <table border="1" cellspacing="0" cellpadding="8" style="border-collapse:collapse; width:100%;">
          <thead>
            <tr>
              <th>항목</th>
              <th>진행률</th>
              <th>메모</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>HTML</td>
              <td>60%</td>
              <td>기본 구조/태그 문법 완료</td>
            </tr>
            <tr>
              <td>CSS</td>
              <td>0%</td>
              <td>다음 시리즈에서 시작</td>
            </tr>
            <tr>
              <td>JavaScript</td>
              <td>0%</td>
              <td>HTML/CSS 후 진행</td>
            </tr>
          </tbody>
        </table>

        <p style="margin-bottom:0;">
          표는 데이터가 “행/열” 구조일 때만 사용합니다. 레이아웃 용도로 쓰면 나중에 고치기 힘듭니다.
        </p>
      </section>

      <!-- section: 폼(form) -->
      <section id="contact" style="border:1px solid #eee; padding:16px;">
        <h2 style="margin-top:0;">문의하기(Form 예시)</h2>

        <form action="#" method="post">
          <p>
            <label for="name">이름</label><br>
            <input id="name" type="text" name="name" placeholder="이름 입력" required>
          </p>

          <p>
            <label for="email">이메일</label><br>
            <input id="email" type="email" name="email" placeholder="example@email.com" required>
          </p>

          <p>
            <label for="msg">메시지</label><br>
            <textarea id="msg" name="message" rows="4" placeholder="내용을 입력하세요"></textarea>
          </p>

          <p style="margin:0;">
            <input type="submit" value="보내기">
            <input type="reset" value="초기화">
          </p>
        </form>
      </section>

    </div>

    <!-- aside (사이드 정보) -->
    <aside style="flex:1; border:1px solid #eee; padding:16px; height:fit-content;">
      <h2 style="margin-top:0;">프로필</h2>

      <!-- 실제 이미지 파일이 없으면 깨지므로 예시로 alt를 강조 -->
      <img src="profile.png" alt="프로필 이미지(예시)" style="max-width:100%; border:1px solid #ddd;">

      <p>
        <strong>설명</strong><br>
        이 영역은 aside로, 본문과 직접 관계가 없는 부가 정보를 담습니다.
      </p>

      <ul>
        <li>오늘 할 일: HTML 복습</li>
        <li>다음: CSS 시작</li>
      </ul>
    </aside>

  </main>

  <!-- 4) footer -->
  <footer style="border-top:1px solid #ddd; padding:16px; text-align:center;">
    © 2026 My Study Page
  </footer>

</body>
</html>

3. Output (실행하면 이렇게 보입니다)

브라우저에서 실행하면 대략 이런 구성으로 보입니다. (디자인은 최소한으로만 들어가 있고, 구조를 확인하는 목적입니다.)

상단: My Study Page 제목 + 설명
메뉴: 공지 / 게시글 / 통계 / 문의
본문: 공지(카드 형태) + 게시글 목록 + 표 + 문의 폼
오른쪽: 프로필(이미지/설명/할 일)
하단: footer

메뉴를 누르면 해당 섹션(#notice, #posts, #stats, #contact)으로 이동하는 것도 확인할 수 있습니다.

4. 이 예제가 중요한 이유

시맨틱 구조로 “문서 역할”이 명확하다
ul/li로 메뉴와 리스트를 구성할 수 있다
table은 데이터 표현에만 사용했다
form은 입력 요소와 label을 연결했다

이제 HTML은 “태그 암기” 단계가 아니라
페이지 구조를 설계할 수 있는 단계에 도달한 것입니다.

'Computer Science > HTML' 카테고리의 다른 글

[HTML] 13. HTML 마무리 체크리스트 (접근성 + 시맨틱 + 폼) (0)	2026.02.16
[HTML] 11. div, span 그리고 시맨틱 태그 완전 이해 (0)	2026.02.07
[HTML] 10. input 타입 완전 정리 (0)	2026.02.07
[HTML] 09. form 태그 완전 정리 (사용자 입력의 시작) (0)	2026.02.07
[HTML] 08. 표(table) 완전 정리 (0)	2026.02.07

[HTML] 12. HTML 한 페이지 완성 (종합 예제 )

[HTML] 12. HTML 한 페이지 완성 (종합 예제 )

1. 종합 예제 목표

2. 전체 코드 (복붙 실행용)

3. Output (실행하면 이렇게 보입니다)

4. 이 예제가 중요한 이유

'Computer Science > HTML' 카테고리의 다른 글

티스토리툴바