상대 주소(relative URL)는 images/kimchi.svg처럼 지금 파일의 자리에서 다른 파일까지 가는 길을 적은 주소입니다(자료에 따라 상대 경로). 상대 주소는 그 주소를 적은 파일이 있는 폴더에서 출발합니다.
사이트가 커지면 파일을 폴더에 나눠 담습니다. 그러면 같은 그림을 가리켜도 어느 파일에 적느냐에 따라 주소가 달라집니다. 출발점을 잘못 세면 그림 자리에는 깨진 표시가 보이고, 링크는 '파일에 액세스할 수 없음'으로 갑니다. 이 레슨에서는 폴더 나무를 보고 주소가 어느 파일에 닿는지 읽습니다.
1폴더 나무와 출발점
예제 사이트 recipe-note 폴더입니다. 폴더 이름 끝의 /는 폴더라는 표시이고, 한 칸 들여 쓴 것이 그 폴더 안에 든 것입니다.
recipe-note/
index.html
kimchi.html
images/
kimchi.svg
japchae.svg
recipes/
japchae.html
브라우저 규칙 1. 상대 주소는 그 주소를 적은 파일이 있는 폴더에서 출발합니다.
index.html과 kimchi.html에 적은 주소는 recipe-note/에서 출발하고, recipes/japchae.html에 적은 주소는 recipes/에서 출발합니다. 같은 사이트 안이라도 파일마다 출발점이 다릅니다.
2폴더/로 들어가고 ../로 올라간다
주소는 /로 나뉜 조각마다 한 칸씩 움직입니다.
| 조각 | 하는 일 |
|---|---|
kimchi.html | 지금 폴더에서 그 이름의 파일을 찾는다 |
images/ | 지금 폴더 안의 images 폴더로 들어간다 |
../ | 지금 폴더를 담은 한 칸 위 폴더로 올라간다 |
recipes/japchae.html에서 레시피 목록으로 돌아가는 링크와 잡채 그림입니다. 그림을 넣는 img 요소는 src에 적은 주소의 그림 파일을 받아 그 자리에 그립니다. 자세한 것은 그림 넣기 img에서 봅니다.
<!-- recipes/japchae.html -->
…
<a href="../index.html">
레시피 목록
</a>
<img
src="../images/japchae.svg"
alt="잡채"
width="280"
height="210"
/>…는 파일의 다른 줄을 줄인 자리입니다. 두 주소 모두 recipes/에서 출발합니다.
| 적은 주소 | 움직임 | 닿는 파일 |
|---|---|---|
../index.html | recipes/ → 한 칸 위 recipe-note/ | recipe-note/index.html |
../images/japchae.svg | recipes/ → 한 칸 위 recipe-note/ → images/ | recipe-note/images/japchae.svg |
../를 이어 쓰면 그만큼 올라갑니다. ../../는 두 칸 위 폴더입니다.
3링크도 그림도 같은 규칙으로 찾는다
링크의 href와 그림의 src는 같은 규칙으로 파일을 찾습니다. 4단원에서 CSS 파일을 잇는 link 요소의 href, 자바스크립트 과목에서 프로그램 파일을 잇는 script 요소의 src도 그렇습니다. 할 일 화면도 style.css 한 줄을 이 규칙으로 잇습니다.
이 과목의 결과 화면은 images 폴더 옆에 놓인 HTML 파일처럼 그립니다. 예제의 images/kimchi.svg가 결과 화면에 그림으로 나오는 까닭입니다.
예제
잡채 페이지에 김치볶음밥 페이지로 가는 링크를 넣습니다. 출발점부터 정합니다.
1. 폴더 나무에서 출발점 찾기 — 링크를 적을 파일은 recipes/japchae.html이므로 출발점은 recipes/입니다.
2. 경로 쓰기 — kimchi.html은 recipe-note/ 바로 안에 있습니다. recipes/에서 한 칸 올라가면 그 폴더이므로 ../kimchi.html입니다.
<!-- recipes/japchae.html -->
…
<a href="../kimchi.html">
김치볶음밥 레시피
</a>거꾸로 kimchi.html에서 잡채 페이지로 가는 링크의 href에는 무엇을 적어야 할까요? 출발점부터 정하고 써 보세요.
정답
href="recipes/japchae.html"입니다. kimchi.html의 출발점은 recipe-note/이고, 거기서 recipes/ 폴더로 들어가 japchae.html에 닿습니다.
<!-- kimchi.html -->
…
<a
href="recipes/japchae.html"
>
잡채 레시피
</a>흔한 오답은 japchae.html입니다. 출발점 recipe-note/에 잡채 페이지가 있다고 본 것입니다. 누르면 '파일에 액세스할 수 없음'이 뜹니다.
자주 틀리는 곳
틀린 생각: 상대 주소는 어느 파일에 적든 사이트 맨 위(index.html이 있는 폴더)에서 출발한다.
index.html에서 쓰던 주소를 다른 폴더의 파일에 그대로 옮겨 적다 보면 그렇게 여기게 됩니다.
<!-- recipes/japchae.html -->
…
<img
src="images/japchae.svg"
alt="잡채"
width="280"
height="210"
/>recipes/japchae.html에 적은 images/japchae.svg는 recipes/에서 출발해 recipes/images/japchae.svg를 찾습니다. recipes/ 안에는 images 폴더가 없어, 그림 자리에 깨진 표시와 alt 글 '잡채'만 보입니다(크롬 기준).
맞는 규칙: 상대 주소는 그 주소를 적은 파일이 있는 폴더에서 출발합니다(브라우저 규칙 1). recipes/ 안의 파일에서는 한 칸 올라가 ../images/japchae.svg로 적습니다.
틀린 생각: /images/japchae.svg처럼 /로 시작하면 내 사이트 폴더의 맨 위에서 찾는다.
<!-- recipes/japchae.html -->
…
<img
src="/images/japchae.svg"
alt="잡채"
width="280"
height="210"
/>내 컴퓨터의 파일을 두 번 눌러 열면, /로 시작하는 주소는 내 사이트 폴더가 아니라 디스크의 맨 위에서 출발합니다. 그래서 디스크 맨 위의 images/japchae.svg를 찾다가 그림이 깨집니다. 사이트를 웹 서버에 올리면 /는 그 사이트 주소의 맨 위를 뜻해, 내 컴퓨터에서 볼 때와 닿는 곳이 또 다릅니다.
맞는 규칙: /로 시작하는 주소는 지금 파일의 폴더에서 출발하지 않습니다. 이 과목은 내 컴퓨터에서 파일로 열어 보므로, / 없이 지금 파일의 폴더에서 출발하는 상대 주소를 씁니다.
틀린 생각: 폴더와 파일 이름의 대문자 · 소문자는 달라도 된다.
<!-- recipes/japchae.html -->
…
<img
src="../Images/Japchae.svg"
alt="잡채"
width="280"
height="210"
/>macOS와 Windows는 처음 설정에서 대문자와 소문자를 가리지 않아, 내 컴퓨터에서 파일로 열면 이 그림이 그려집니다. 그러나 웹 서버는 대부분 대문자와 소문자를 가립니다. 사이트를 올리고 나면 Images/Japchae.svg를 찾지 못해 그림이 깨집니다.
맞는 규칙: 주소에는 폴더와 파일 이름을 대문자 · 소문자까지 똑같이 적습니다. 처음부터 이름을 모두 소문자로 짓고 낱말 사이는 하이픈(-)으로 이으면 헷갈리지 않습니다.
확인 문제
1. 예제의 잡채 페이지를 recipes 안에 새로 만든 noodle 폴더로 옮겼습니다. 링크 href="../kimchi.html"은 고치지 않았습니다. 이 링크를 누르면 브라우저는 어느 자리의 파일을 찾을까요?
recipe-note/
kimchi.html
recipes/
noodle/
japchae.html
- ①
recipe-note/kimchi.html - ②
recipe-note/recipes/kimchi.html - ③ 찾지 않는다 — 주소가 틀려 링크가 듣지 않는다
힌트
폴더 나무 위에서 주소의 조각을 하나씩 따라가 보세요. 어디서 출발할지부터 정합니다.
힌트 둘
주소는 그 주소를 적은 파일이 있는 폴더에서 출발합니다. japchae.html이 지금 든 폴더를 찾습니다.
정답
② — recipes/ 폴더 안의 kimchi.html을 찾습니다.
주소를 적은 japchae.html이 이제 noodle/ 안에 있어 거기서 출발합니다. ../로 한 칸 올라가면 recipes/이고, 그 안에는 kimchi.html이 없으니 '파일에 액세스할 수 없음'이 뜹니다(브라우저 규칙 1). 파일을 다른 폴더로 옮기면 그 파일에 적은 상대 주소가 닿는 곳도 바뀝니다.
- ① 파일을 옮겨도 주소가 처음 닿던 파일에 그대로 닿는다고 본 것입니다(출발점이 늘 같다는 생각).
- ③ 틀린 주소면 링크가 멈춘다고 본 것입니다. 브라우저는 적힌 주소대로 찾아가 보고, 없으면 찾지 못했다는 페이지를 보입니다.
2. recipes/soup/miyeok-guk.html에서 레시피 목록 index.html로 가는 링크입니다. ____ 자리에 들어갈 주소를 쓰세요.
recipe-note/
index.html
recipes/
soup/
miyeok-guk.html
<a href="____">
레시피 목록
</a>힌트
출발점 soup/에서 recipe-note/까지 몇 칸 올라가야 하는지 셉니다.
정답
../../index.html입니다. soup/에서 ../로 recipes/에, 다시 ../로 recipe-note/에 올라가 index.html에 닿습니다.
<a href="../../index.html">
레시피 목록
</a>../index.html이면 한 칸만 올라가 recipes/index.html을 찾습니다.
3. 동아리 공지 사이트입니다. notices/march.html에 단체 사진을 넣었는데, 그림 자리에 깨진 표시와 '3월 모임 단체 사진' 글만 보입니다. 몇 번 줄을 어떻게 고쳐야 할까요? 고친 줄을 쓰세요.
club/
index.html
photos/
team.jpg
notices/
march.html
<!-- notices/march.html -->
…
<img
src="photos/team.jpg"
alt="3월 모임 단체 사진"
width="280"
height="210"
/>힌트
이 주소가 어느 폴더에서 출발하는지, 그 폴더 안에 photos가 있는지 봅니다.
정답
4번 줄을 src="../photos/team.jpg"로 고칩니다.
march.html은 notices/ 안에 있어 photos/team.jpg는 notices/photos/team.jpg를 찾았습니다. 한 칸 올라가(../) club/에서 photos/로 들어가야 사진에 닿습니다.
흔한 오답은 주소는 두고 notices/ 안에 photos 폴더를 만들어 사진을 복사하는 고침입니다. 그림은 나오지만 같은 사진이 두 곳에 생겨, 하나를 바꾸면 다른 하나는 그대로 남습니다.
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요.
html-css-study 폴더 안에 recipes 폴더를 만들고 그 안에 japchae.html을 저장해, 예제의 ../kimchi.html 링크를 넣습니다(kimchi.html은 앞 레슨에서 만든 파일). 그다음 ../를 지우면 무엇이 뜰지 먼저 적고, 저장해 눌러서 맞춰 봅니다.