같은 페이지 안에서 옮겨 가기

같은 페이지 안에서 옮겨 가는 링크는 href에 # 기호와 목적지 요소의 id를 적습니다. 누르면 브라우저가 그 요소가 창 맨 위에 오도록 페이지를 굴리고, 주소 끝에 #steps처럼 그 이름을 붙입니다.

긴 레시피 페이지에서 조리 순서까지 손으로 굴려 내려가기는 번거롭습니다. 페이지 위에 '조리 순서로 가기' 같은 링크를 두면 한 번에 옮겨 갑니다. 이 레슨에서는 목적지에 이름을 붙이는 법과, 누르면 화면과 주소가 어떻게 바뀌는지 봅니다.

1목적지에는 id, 링크에는 #

id는 요소 하나에 붙이는 이름입니다. 한 페이지 안에서 같은 id를 두 번 쓰지 않습니다(5단원에서 자세히 봅니다).

<p>
  <a href="#steps">
    조리 순서로 가기
  </a>
</p>
<h2>재료</h2>
<p>밥 2공기, 김치 1컵</p>
<h2 id="steps">조리 순서</h2>
<p>김치를 볶습니다.</p>

목적지인 '조리 순서' 제목에 id="steps"를 붙이고, 링크의 href에는 그 이름 앞에 # 기호를 붙여 #steps라고 적습니다. # 기호는 '이 페이지 안의 이름'이라는 표시라서 id에는 적지 않습니다. 결과 화면은 높이를 내용만큼 그려 굴릴 곳이 없고 링크도 막아 두어, 눌러도 움직이지 않습니다. 누른 뒤의 일은 위 흐름 그림이 보여 줍니다.

2목적지가 창 맨 위에 오고 주소 끝에 #steps가 붙는다

# 기호로 시작하는 주소는 지금 페이지 안의 자리를 가리킵니다. 그래서 브라우저는 다른 파일을 받지 않습니다(브라우저 규칙 1).

• 누르면 id="steps"인 요소가 창 맨 위에 오도록 페이지를 굴립니다. 목적지 아래 내용이 창보다 짧으면 페이지 끝까지만 굴러, 목적지는 맨 위보다 아래에 멈춥니다.
• 주소 끝에 #steps가 붙습니다. kimchi.html이 kimchi.html#steps가 됩니다.
• 뒤로 가기를 누르면 누르기 전 자리로 굴러 돌아오고, 주소 끝의 #steps도 사라집니다.

주소 끝에 #steps를 붙인 kimchi.html#steps로 페이지를 열면 처음부터 조리 순서 자리가 보입니다. 다른 페이지에서 href="kimchi.html#steps"⁠로 링크하면, 김치볶음밥 페이지를 열면서 바로 그 자리로 갑니다.

3이름은 대문자 · 소문자까지 같아야 한다

브라우저는 주소의 # 뒤 글자와 똑같은 id를 가진 요소를 찾습니다. S와 s는 다른 글자라서, href="#Steps"는 id="steps"인 제목을 찾지 못합니다. 찾지 못하면 주소 끝만 #Steps로 바뀌고 페이지는 움직이지 않습니다. 오류 메시지는 없습니다.

예제

조리 순서와 보관 요령으로 가는 링크 두 개를 페이지 위에 둡니다.

<p>
  <a href="#steps">조리 순서</a>
  ·
  <a href="#tips">보관 요령</a>
</p>
<h2 id="steps">조리 순서</h2>
<p>김치를 볶습니다.</p>
<h2 id="tips">보관 요령</h2>
<p>하루 안에 먹습니다.</p>

이 페이지(kimchi.html)에서 '보관 요령'을 누르면 주소는 어떻게 바뀔까요? 이어서 '조리 순서'를 누른 뒤 뒤로 가기를 한 번 누르면 어느 자리로 돌아갈까요?

자주 틀리는 곳

틀린 생각: 링크에 #steps라고 적으니 id에도 #steps라고 적는다.

<p>
  <a href="#steps">
    조리 순서로 가기
  </a>
</p>
<h2 id="#steps">조리 순서</h2>

id="#steps"인 제목의 이름은 # 기호까지 든 '#steps'입니다. 링크의 #steps는 이름이 'steps'인 요소를 찾으므로, 눌러도 주소만 바뀌고 페이지는 움직이지 않습니다.

맞는 규칙: # 기호는 링크 쪽에만 적는 표시입니다. 목적지에는 id="steps", 링크에는 href="#steps"라고 적습니다.

틀린 생각: 비슷한 제목에는 같은 id를 붙여도 된다.

<h1>김치볶음밥</h1>
<p>
  <a href="#steps">
    보관 요령으로 가기
  </a>
</p>
<h2 id="steps">조리 순서</h2>
<p>김치를 볶습니다.</p>
<h2 id="steps">보관 요령</h2>
<p>하루 안에 먹습니다.</p>

'보관 요령으로 가기'를 눌러도 브라우저는 id="steps"인 요소 가운데 앞에 있는 '조리 순서'로 갑니다. 화면에는 오류가 없지만, 검사기는 같은 id가 두 번 쓰였다고 9번 줄에 Error를 냅니다.

맞는 규칙: id는 한 페이지에 하나뿐인 이름입니다. 목적지마다 다른 id를 붙입니다(보관 요령에는 id="tips").

틀린 생각: 목적지는 언제나 창 맨 위에 보인다.

화면 위에 늘 붙어 있는 머리글이 있는 페이지(14단원에서 만듭니다)에서는, 창 맨 위로 온 목적지 제목이 그 머리글 밑에 가려집니다. 브라우저는 목적지를 창 맨 위에 맞출 뿐, 그 위를 덮은 머리글은 셈하지 않습니다.

맞는 규칙: 목적지는 창 맨 위에 맞춰집니다. 머리글이 창 위를 덮고 있으면 목적지가 그 밑에 가려지므로, 그런 페이지에서는 머리글 높이만큼 띄우는 CSS를 함께 씁니다(14단원).

확인 문제

1. 예제의 '보관 요령' 제목에서 id="tips"를 지웠습니다. 창 맨 위에서 '보관 요령' 링크를 누르면 주소와 화면은 어떻게 될까요?

• ① 주소 끝에 #tips가 붙고, 화면은 그대로다
• ② 주소도 화면도 그대로다
• ③ 주소 끝에 #tips가 붙고, 페이지 맨 위로 굴러간다

2. '영양 정보로 가기' 링크가 영양 정보 제목으로 가게 ____ 자리에 들어갈 것을 쓰세요.

<p>
  <a href="#nutrition">
    영양 정보로 가기
  </a>
</p>
<h2 ____>
  영양 정보
</h2>

<p>
  <a href="#nutrition">
    영양 정보로 가기
  </a>
</p>
<h2 id="nutrition">
  영양 정보
</h2>

3. 여행 일정 페이지입니다. '둘째 날로 가기'를 눌러도 화면이 움직이지 않고 주소 끝만 #day2가 됩니다. 검사기에 넣었더니 아래 메시지가 나왔습니다. 몇 번 줄을 어떻게 고쳐야 할까요? 고친 줄을 쓰세요.

<h1>제주 여행</h1>
<p>
  <a href="#day2">
    둘째 날로 가기
  </a>
</p>
<h2 id="day1">첫째 날</h2>
<p>공항에서 숙소로</p>
<h2 id="day1">둘째 날</h2>
<p>오름에 오르기</p>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제를 저장하고, 제목 사이와 마지막 제목 아래에 문단을 여러 개 넣어 페이지를 창보다 길게 만듭니다. 링크를 눌러 주소 끝과 화면을 본 뒤, '조리 순서' 링크를 #Steps로 바꾸면 어떻게 될지 먼저 적고 눌러서 맞춰 봅니다.