상대경로와 절대경로 차이: 링크가 안 열릴 때
메인 화면에서는 열리는 이미지가 글 상세 화면에서는 안 보일 때가 있습니다. 파일이 없어졌다기보다 링크의 기준 경로가 바뀐 것일 수 있습니다. 주소 맨 앞의 슬래시 하나가 어떤 차이를 만드는지 가상 주소로 살펴봅니다.
기준 페이지를 먼저 적습니다
현재 페이지를 https://example.com/notes/page.html이라고 가정합니다. 여기에서 images/chart.png는 현재 폴더인 /notes/ 아래를 가리킵니다. /images/chart.png처럼 슬래시로 시작하면 같은 출처의 루트 아래를 가리킵니다. 두 주소가 같은 파일을 뜻하지는 않습니다.
| 링크에 적은 값 | 위 기준 페이지에서의 결과 |
|---|---|
| images/chart.png | https://example.com/notes/images/chart.png |
| /images/chart.png | https://example.com/images/chart.png |
| ../images/chart.png | https://example.com/images/chart.png |
| https://example.net/chart.png | https://example.net/chart.png |
기준 주소 끝의 슬래시도 확인합니다
기준이 /notes/page.html이면 마지막 부분은 파일처럼 취급되고 그 앞의 /notes/가 기준 폴더가 됩니다. 기준이 /notes/page.html/처럼 끝나면 page.html도 경로의 한 단계가 됩니다. 주소 두 문자열을 그냥 이어 붙이면 이런 규칙을 놓칩니다. 프로그램에서 다룰 때는 URL의 상대 참조를 해석하는 기능을 사용합니다.
기준: https://example.com/notes/page.html
상대값: images/chart.png
결과: https://example.com/notes/images/chart.png
기준: https://example.com/notes/page.html/
같은 상대값의 결과:
https://example.com/notes/page.html/images/chart.png글 본문과 스타일 파일은 기준이 다를 수 있습니다
HTML 본문의 일반적인 상대 링크는 문서의 기준 URL을 사용합니다. 외부 CSS 파일의 url() 경로는 보통 그 CSS 파일의 위치를 기준으로 해석됩니다. HTML에 base 요소가 있으면 문서 링크의 기준도 달라질 수 있습니다. 문제가 난 경로가 본문 링크인지, 이미지인지, 스타일 파일 안의 경로인지 먼저 구분해야 합니다.
루트 경로가 늘 정답인 것은 아닙니다
사이트를 /blog/ 같은 하위 경로에 배포한다면 /assets/logo.svg는 도메인 루트의 assets를 가리킵니다. 실제 파일이 /blog/assets 아래라면 맞지 않습니다. 옮길 수 있는 사이트를 만들 때는 배포 기준 경로를 정하고 일관되게 적용합니다. 링크를 모두 외부 절대 주소로 바꾸면 개발 환경이나 도메인이 바뀔 때 관리 부담이 생길 수도 있습니다.
고칠 때 확인할 위치 세 곳
홈, 폴더 안의 목록, 더 깊은 상세 화면에서 같은 링크를 눌러 봅니다. 눈에 보이는 글자보다 실제 이동한 전체 URL을 비교하세요. 대소문자를 구분하는 서버에서는 파일 이름도 정확해야 합니다. 주소에 한글이나 공백이 있으면 인코딩 문제도 따로 확인합니다. URL 문자 표기 글은 그 경우에 참고할 수 있습니다.
참고 자료와 확인 범위
아래 자료는 형식·기능의 정의를 확인하는 데 사용했습니다. 본문의 예제와 설명은 이 사이트의 작업 상황에 맞춰 구성했습니다. 제품 메뉴는 버전과 언어에 따라 다를 수 있습니다.
확인일: 2026-10-16 · 오류를 발견하면 이 글의 오류 신고로 알려주세요.