소개 페이지 완성하고 점검하기

앞에서 배운 요소를 한 페이지에 모으면 각 부분이 제대로 연결되어 있는지 함께 살펴볼 수 있습니다. 자기소개와 학습 계획, 참고 링크, 이미지, 연락 양식을 구성하고 제목 계층과 입력 동작을 점검해 봅시다.

페이지를 구성하는 기준

환경은 Chromium 브라우저입니다. 페이지 전체 제목 아래에 소개, 학습 계획, 연락이라는 하위 제목을 둡니다. 탐색 링크는 같은 문서의 해당 영역으로 이동하고, 학습 계획은 요일과 할 일이 짝을 이루므로 표로 표현합니다.

핵심 요약: href의 대상과 id를 맞추고, 이미지에 의미를 설명하는 alt를 넣으며, 각 입력의 id와 라벨의 for를 연결합니다. 연락 양식은 입력을 연습하기 위한 것으로, 실제 메시지를 보내지는 않습니다.

소개 페이지 작성하기

아래 HTML은 외부 파일 없이 동작합니다. 이미지의 src에 들어 있는 data: 주소는 이미지 데이터를 주소 안에 직접 담는 방식입니다. 여기서는 책을 나타내는 작은 SVG 그림을 사용합니다. %3C처럼 보이는 부분은 주소 안에서 특수 문자를 표현한 것입니다.

<!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>
    <h1>하늘의 소개 페이지</h1>
    <nav aria-label="페이지 탐색">
      <a href="#about">소개</a>
      <a href="#plan">학습 계획</a>
      <a href="#contact">연락</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>소개</h2>
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'%3E%3Crect width='120' height='80' fill='%23e8f3ff'/%3E%3Crect x='30' y='20' width='60' height='42' fill='%234b78a8'/%3E%3Cpath d='M60 20v42' stroke='white' stroke-width='3'/%3E%3C/svg%3E" alt="펼친 책을 표현한 그림" width="120" height="80">
      <p>안녕하세요. 웹 페이지 만들기를 배우는 하늘입니다.</p>
      <p>참고: <a href="#plan">나의 학습 계획 보기</a></p>
    </section>

    <section id="plan">
      <h2>학습 계획</h2>
      <table>
        <caption>요일별 학습 계획</caption>
        <thead>
          <tr><th scope="col">요일</th><th scope="col">할 일</th></tr>
        </thead>
        <tbody>
          <tr><td>월요일</td><td>HTML 구조 복습</td></tr>
          <tr><td>수요일</td><td>입력 양식 연습</td></tr>
        </tbody>
      </table>
    </section>

    <section id="contact">
      <h2>연락</h2>
      <p>입력 연습용 양식입니다. 내용은 전송되지 않습니다.</p>
      <form id="contact-form">
        <p><label for="name">이름</label> <input id="name" name="name" type="text" required></p>
        <p><label for="email">이메일</label> <input id="email" name="email" type="email" required></p>
        <p><label for="topic">관심 주제</label>
          <select id="topic" name="topic">
            <option>HTML</option>
            <option>CSS</option>
          </select>
        </p>
        <button type="submit">입력 확인</button>
      </form>
      <p id="result" aria-live="polite"></p>
    </section>
  </main>

  <footer><p>하늘의 학습 기록</p></footer>
</body>
</html>

다음 보조 JavaScript는 유효한 양식의 제출을 가로채 화면에 확인 문구를 표시합니다. preventDefault()는 제출 시 브라우저가 기본적으로 수행하는 이동을 막습니다. aria-live="polite"는 나중에 바뀌는 결과 문구를 보조 기술에 알리는 데 사용합니다.

const form = document.getElementById('contact-form');
const result = document.getElementById('result');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  result.textContent = '입력 내용을 확인했습니다. 실제로 전송되지는 않았습니다.';
});

입력 예: 이름에 하늘, 이메일에 sky@example.com을 입력하고 관심 주제로 HTML을 선택한 뒤 입력 확인을 누릅니다. 예상되는 화면 문구는 입력 내용을 확인했습니다. 실제로 전송되지는 않았습니다.입니다. 이는 예상 결과이며 아직 브라우저에서 확인하지 않았습니다.

연결과 동작 이해하기

header, nav, main, footer는 각각 머리글, 탐색, 주요 내용, 바닥글을 구분합니다. aria-label은 여러 탐색 영역이 있을 때도 이 영역의 목적을 구별할 수 있도록 이름을 붙입니다. h1은 페이지 제목이고 각 h2는 그 아래의 주요 영역을 나타냅니다.

href="#plan"의 plan은 학습 계획 영역의 id="plan"과 일치합니다. 따라서 링크를 선택하면 같은 문서의 해당 위치로 이동합니다. 이 예제의 참고 링크도 내부 링크이므로 외부 사이트에 접속하지 않습니다. 표의 caption은 표의 제목이고, scope="col"은 제목 셀이 해당 열을 설명한다는 뜻입니다.

예를 들어 이름 입력의 id="name"은 라벨의 for="name"과 연결됩니다. required가 있는 이름이나 이메일이 비어 있거나 이메일 형식이 맞지 않으면 브라우저의 기본 유효성 검사로 제출이 막힙니다. 유효성 검사를 통과하면 submit 이벤트가 발생하고 보조 JavaScript가 이동을 막은 뒤 확인 문구를 표시합니다.

흔한 실수와 점검할 경계 조건

• 내부 링크의 href와 대상 id가 다르면 원하는 위치로 이동하지 않습니다. id는 문서 안에서 중복하지 마세요.
• alt는 파일 이름 대신 그림이 전달하는 내용을 적습니다. 이미지 자체를 다른 파일로 교체할 때는 경로가 맞는지와 대체 텍스트가 여전히 적절한지 확인하세요. 이 예제는 데이터를 문서 안에 넣었으므로 별도의 이미지 파일 경로가 없습니다.
• 라벨의 for와 입력의 id가 다르면 둘이 연결되지 않습니다. 입력 칸에 예시 문구만 넣는 것으로 라벨을 대신하지 마세요.
• type="email"의 검사는 주소의 형식에 관한 기본 검사입니다. 실제로 존재하는 주소인지 확인하거나 메시지를 보내지는 않습니다.
• 이름과 이메일을 각각 비워 제출해 보고, 이메일에 sky를 입력해 보는 방식으로 기본 검사를 점검할 수 있습니다. 유효하지 않은 상태에서는 확인 문구가 새로 표시되지 않습니다. 이전에 표시된 문구는 그대로 남을 수 있습니다.

연습과 풀이

연습: 학습 계획 표에 금요일의 링크 점검을 추가하고, 탐색 메뉴에 있는 학습 계획 링크가 새 행이 포함된 표의 영역으로 이동하는지 확인해 보세요.

풀이: tbody 안의 마지막 행 뒤에 <tr><td>금요일</td><td>링크 점검</td></tr>을 추가합니다. 링크의 대상은 개별 행이 아니라 id="plan"인 영역이므로 링크 주소를 바꿀 필요는 없습니다. 브라우저에서 링크를 선택하고 표의 새 행을 확인해 보세요.

참고 문서: HTML 접근성 기초 — MDN, 폼의 라벨 — MDN, HTML 이미지 — MDN.