링크로 페이지 연결하기

소개 페이지에서 참고 문서와 페이지 안의 소개 영역을 연결해 보겠습니다. 링크를 만들 때는 사용자가 누를 텍스트와 이동할 목적지를 함께 정합니다.

링크와 속성

<a> 요소는 href 속성으로 지정한 목적지에 연결합니다. 속성은 시작 태그 안에 이름="값" 형태로 적으며, 요소에 추가 정보를 제공합니다. 예를 들어 href의 값은 링크가 가리키는 주소입니다.

같은 문서 안의 위치로 연결할 때는 목적지 요소에 id 속성을 붙이고, 링크의 href에 #과 그 id 값을 차례로 적습니다. id는 문서 안에서 요소를 구별하는 이름입니다.

예제: 참고 문서와 소개 영역 연결하기

환경은 Chromium입니다. 아래 HTML을 입력으로 사용합니다. 별도의 CSS나 JavaScript는 필요하지 않습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>나의 학습 페이지</title>
</head>
<body>
  <h1>나의 학습 페이지</h1>
  <p><a href="#about">소개 영역으로 이동</a></p>
  <p><a href="https://developer.mozilla.org/ko/docs/Web/HTML">MDN HTML 참고 문서</a></p>

  <h2 id="about">소개</h2>
  <p>저는 HTML로 웹 페이지를 배우고 있습니다.</p>
</body>
</html>

예상 화면에는 제목, 두 링크, 소개 제목과 문단이 표시됩니다. 소개 영역으로 이동을 누르면 브라우저가 id가 about인 제목을 대상으로 삼습니다. 화면이 짧아 이미 제목이 보인다면 스크롤 이동은 눈에 띄지 않을 수 있습니다. MDN HTML 참고 문서는 다른 웹 페이지를 가리키며, 이를 열려면 네트워크 연결이 필요합니다.

코드가 연결되는 방식

첫 번째 링크의 href="#about"에서 #은 같은 문서의 위치를 가리킨다는 표시이고, about은 목적지의 이름입니다. 아래 제목의 id="about"과 이름이 일치하므로 브라우저가 해당 제목을 찾습니다. id 값 자체에는 #을 넣지 않습니다.

두 번째 링크의 href에는 https://로 시작하는 전체 웹 주소를 넣었습니다. 시작 태그와 종료 태그 사이의 MDN HTML 참고 문서는 화면에 표시되는 링크 텍스트입니다. 텍스트만 읽어도 어디로 가는지 알 수 있어 여기 같은 표현보다 목적지가 분명합니다.

흔한 실수와 경계 조건

• href="#intro"와 id="about"처럼 이름이 다르면 의도한 요소를 찾을 수 없습니다. 철자와 대소문자를 맞추세요.
• 같은 문서에서 같은 id를 여러 요소에 사용하지 마세요. 각 목적지에 고유한 이름을 붙여야 연결할 위치가 분명합니다.
• href를 빠뜨린 <a>는 목적지가 지정된 링크가 아닙니다. 주소를 속성값에 넣었는지 확인하세요.
• 외부 주소에서 https://를 빠뜨리면 의도한 외부 주소가 아니라 현재 문서를 기준으로 한 경로로 해석될 수 있습니다.

연습과 풀이

소개 문단 뒤에 학습 계획 제목을 추가하고, 페이지 위쪽에서 그 제목으로 이동하는 링크를 만들어 보세요. 링크 텍스트에는 목적지를 적습니다.

풀이: 위쪽에 <a href="#plan">학습 계획으로 이동</a>를 넣고, 새 제목을 <h2 id="plan">학습 계획</h2>로 작성합니다. href의 # 뒤에 있는 plan과 제목의 id 값이 같아서 해당 제목을 목적지로 지정합니다.