HTML 강좌 / 여러 페이지로 된 작은 사이트 만들기

작은 다중 페이지 사이트를 만들면 지금까지 배운 문서 구조, 의미 요소, 링크, 이미지, 양식을 한 번에 연결할 수 있습니다. 이 실습에서는 홈·소개·문의 세 페이지를 같은 폴더에 만들고, 메뉴로 오가며 오류를 점검합니다. HTML 파일만으로는 문의 내용을 실제로 저장하거나 전송할 수 없으므로 마지막 페이지는 입력 화면까지 구현합니다.

파일 구성과 준비물

새 폴더를 하나 만들고 아래 세 파일을 같은 위치에 저장하세요. 파일명과 링크의 href가 정확히 일치해야 합니다.

small-site/
  index.html
  about.html
  contact.html

각 파일은 UTF-8 인코딩의 일반 텍스트로 저장합니다. 우선 이미지 없이 완성한 뒤, 사용할 권리가 있는 이미지를 준비해 img와 대체 텍스트를 추가해도 됩니다.

텍스트 편집기에서 파일을 저장할 때 index.html.txt처럼 확장자가 하나 더 붙지 않았는지 확인하세요. 같은 폴더에 세 파일을 두면 href="about.html" 같은 상대경로로 서로 연결할 수 있습니다. 다른 폴더로 옮긴다면 링크도 함께 수정해야 합니다.

홈 페이지 만들기

index.html에는 사이트의 주제와 각 페이지로 가는 메뉴를 넣습니다. 세 파일에서 메뉴의 링크 주소를 동일하게 유지합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>홈 | 작은 정원</title>
</head>
<body>
  <header>
    <nav aria-label="주요 메뉴">
      <a href="index.html">홈</a>
      <a href="about.html">소개</a>
      <a href="contact.html">문의</a>
    </nav>
  </header>
  <main>
    <h1>작은 정원</h1>
    <p>식물 가꾸기를 시작하는 사람을 위한 작은 안내입니다.</p>
  </main>
  <footer><p>작은 정원</p></footer>
</body>
</html>

브라우저에서 index.html을 열면 상단 메뉴와 ‘작은 정원’ 제목이 보입니다. 아직 나머지 파일을 만들지 않았다면 소개·문의 링크가 열리지 않는 것이 정상입니다. 홈 파일을 먼저 완성하고 같은 폴더에서 다음 두 파일을 만든 뒤 다시 확인하세요.

소개와 문의 페이지 만들기

about.html은 index.html을 복사해 만든 뒤 title을 ‘소개 | 작은 정원’으로 바꾸고, main을 다음 내용으로 교체합니다.

<main>
  <h1>소개</h1>
  <p>작은 정원은 처음 식물을 키우는 사람을 위한 안내 사이트입니다.</p>
</main>

contact.html도 index.html의 복사본에서 시작합니다. title을 ‘문의 | 작은 정원’으로 바꾸고, main을 다음 양식으로 교체하세요.

<main>
  <h1>문의</h1>
  <form action="" method="get">
    <p><label for="visitor-name">이름</label>
       <input id="visitor-name" name="name" required></p>
    <p><label for="message">메시지</label>
       <textarea id="message" name="message" required></textarea></p>
    <button type="submit">입력값 확인</button>
  </form>
</main>

두 복사본 모두 원래 main의 시작 태그부터 종료 태그까지 교체하고, header의 메뉴와 footer는 그대로 둡니다. GET 제출 후 주소에 입력값이 보일 수 있으므로 실제 개인 정보는 넣지 마세요. 문의를 실제로 수신하려면 별도의 서버 처리와 적절한 보안 구성이 필요합니다.

복사할 때 html, head, body는 파일마다 하나씩 유지합니다. main 안에 새 main을 덧붙이면 구조가 중첩되므로 기존 부분을 통째로 교체하세요. 각 파일의 title과 h1을 바꿔야 메뉴를 이동할 때 페이지가 구별됩니다. 메뉴 자체는 세 파일에서 동일한 주소를 사용합니다.

문의 양식의 ‘입력값 확인’은 실제 발송 버튼이 아닙니다. 브라우저가 필수 입력을 확인한 뒤 현재 문서 주소에 값을 붙이는 연습용입니다. 로컬 파일에서의 URL 표시는 브라우저마다 다를 수 있고, 주소창에 메시지가 보일 수 있으므로 테스트 문구만 입력하세요. 실제 문의를 받으려면 서버 처리, 개인정보 보호, 스팸 방지와 완료 안내까지 별도로 설계해야 합니다.

완성 결과 점검하기

1. index.html을 열고 메뉴 세 항목이 각각 맞는 페이지로 이동하는지 확인합니다.
2. 각 페이지의 탭 제목과 보이는 h1이 그 페이지를 설명하는지 확인합니다.
3. Tab 키만으로 메뉴와 문의 양식을 사용할 수 있는지 확인합니다.
4. 문의 페이지에서 빈 필드 제출과 값 입력 후 제출을 각각 시험합니다.
5. 파일을 Nu HTML Checker에 넣어 오류를 확인하고 고친 뒤 다시 검사합니다.

링크가 열리지 않으면 파일명과 상대경로부터 확인하세요. 한 페이지의 메뉴만 수정한 경우 다른 두 파일에도 같은 변경을 반영해야 합니다. 페이지 수가 늘어날수록 공통 부분을 일관되게 관리하는 방법이 중요해집니다.

검사를 마친 뒤에는 소개 페이지에서 홈과 문의로, 문의 페이지에서 홈과 소개로도 이동해 보세요. 홈에서만 링크를 확인하면 다른 페이지의 메뉴 오타를 놓칠 수 있습니다. 양식은 빈 값 제출이 막히는지, 테스트 값을 넣은 뒤 주소가 바뀌는지까지만 확인하면 됩니다. 실제 전송이 되지 않는 것은 이 실습의 의도된 범위입니다.