진짜 한 페이지 완성하기: 재미있는 미니 프로젝트

이제 드디어 HTML 부품들을 한자리에 모아 볼 시간입니다. 지금까지는 제목, 링크, 이미지, 목록, 표, 폼을 하나씩 따로 배웠습니다. 하지만 실제 웹페이지는 늘 한 장의 문서로 완성됩니다. 이번 장에서는 그 조각들을 연결해 내 손으로 첫 페이지를 완성하는 경험을 해보겠습니다.

이번 프로젝트의 목표는 간단합니다. 자기소개 페이지 또는 취미 소개 페이지를 하나 만드는 것입니다. 개인 페이지는 초보자가 HTML 기본 구조와 핵심 태그를 한 번에 복습하기에 아주 좋은 연습 문제입니다.¹²

중요한 점은 완벽하게 예쁘게 만드는 것이 아닙니다. 스스로 구조를 짜 보고, 직접 입력하고, 브라우저에서 확인하는 경험이 더 중요합니다. 바로 그 순간, HTML 지식이 암기에서 기술로 바뀝니다.

이번 프로젝트에서 만들 것

이번 페이지는 화려하지 않아도 괜찮습니다. 대신 구조가 또렷해야 합니다. 아래 흐름을 목표로 만들어 보겠습니다.

• 맨 위에 제목과 짧은 소개를 둡니다.

• 메뉴를 눌러 같은 페이지 안에서 이동할 수 있게 합니다.

• 자기소개나 취미 내용을 문단과 목록으로 정리합니다.

• 표로 핵심 정보를 한눈에 보여 줍니다.

• 폼으로 간단한 메시지를 받는 구역을 만듭니다.

• 마지막은 푸터로 마무리합니다.

이 정도만 완성해도 이미 꽤 그럴듯한 웹페이지가 됩니다.

코드를 치기 전에 먼저 구조를 생각하기

바로 입력창에 달려들기 전에, 페이지를 구역으로 나눠 생각해 보겠습니다.

• header는 첫인상을 담당합니다.

• nav는 길을 안내합니다.

• main은 페이지의 중심 내용입니다.

• section은 주제를 나눕니다.

• footer는 마지막 정리와 마무리를 맡습니다.

이렇게 먼저 구조를 잡으면 코드는 훨씬 덜 복잡해집니다. 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>
    <p>HTML을 배우며 웹페이지를 하나씩 만들어 가는 중입니다.</p>
  </header>

  <nav aria-label="주요 메뉴">
    <a href="#about">소개</a>
    <a href="#profile">한눈에 보기

## 참고

[^1]: HTML은 웹페이지의 구조를 만드는 언어이며, 제목, 문단, 목록, 표, 링크, 폼 등을 조합해 문서를 구성한다.

[^2]: 첫 프로젝트로 개인 소개 페이지를 만드는 방식은 초보 학습자가 기본 태그와 문서 구조를 한 번에 익히기에 적합하다.