블로그 상대 링크가 다른 곳으로 열릴 때: ./·../·/와 기준 URL 끝의 슬래시
상대 링크의 목적지는 href 값만 읽어서는 결정할 수 없습니다. 어느 주소를 기준으로 해석하는지 함께 보아야 합니다. 같은 ../guide가 미리보기와 공개 글에서 다르게 열렸다면 기준 URL부터 대조하세요.
1. 세 가지 시작 문자를 구분하기
MDN은 현재 디렉터리 기준, 상위 디렉터리 기준, 사이트 루트 기준으로 상대 참조를 설명합니다. ./ 또는 접두사 없는 경로는 현재 디렉터리, ../는 상위 디렉터리, /는 사이트 루트에서 해석합니다. 경로를 단순 문자열로 이어 붙인 것과 결과가 같다고 가정하지 마세요.
| href 예시 | 기준: https://example.com/a/b/ | 읽는 방식 |
|---|---|---|
| ./guide | https://example.com/a/b/guide | 현재 디렉터리 |
| ../guide | https://example.com/a/guide | 상위 디렉터리 |
| /guide | https://example.com/guide | 사이트 루트 |
example.com은 설명용 가상 주소입니다. 위 링크를 실제 자료나 운영 중인 글로 제공하는 것이 아니라 경로 계산을 보여주는 예시로 사용했습니다.
2. 끝 슬래시 하나가 바꾸는 현재 디렉터리
기준 주소가 https://example.com/a/b/라면 현재 디렉터리는 /a/b/입니다. 끝에 슬래시가 없는 https://example.com/a/b에서는 마지막 슬래시까지인 /a/가 현재 디렉터리입니다. 그래서 같은 guide를 해석해도 목적지가 다릅니다.
| 기준 주소 | 상대 값 | 해석된 목적지 |
|---|---|---|
| https://example.com/a/b/ | guide | https://example.com/a/b/guide |
| https://example.com/a/b | guide | https://example.com/a/guide |
화면에 보이는 링크 문구와 실제 href, 해석된 전체 URL을 따로 남기세요. “안내 읽기”라는 문구가 같다고 두 버튼의 목적지도 같다는 뜻은 아닙니다.
3. 공개 글에서 점검할 네 칸
링크 목록을 정리할 때는 공개 글 URL, 저장된 href, 실제 클릭 후 주소, 목적지 제목을 한 줄에 적습니다. 편집기 미리보기만 확인했다면 공개 클릭 완료로 표시하지 않습니다. 사이트가 리디렉션하면 요청 주소와 최종 주소를 함께 보존합니다.
브라우저에서 다음과 같은 계산으로 예시를 확인할 수 있습니다: new URL("../guide", "https://example.com/a/b/").href. 이것은 주소 해석을 보여주는 계산이며 해당 목적지의 존재나 권한을 확인하는 요청은 아닙니다.
다른 블로그나 외부 공식 자료를 연결하는 버튼이라면 전체 URL을 명시하는 편이 목적지를 비교하기 쉽습니다. 사이트 내부 상대 링크를 유지할 때는 문서 이동이나 폴더 변경 뒤 기준 주소가 달라졌는지 다시 확인하세요.
4. 자주 묻는 질문과 기술 문서
../를 많이 붙이면 다른 사이트로 나가나요?
상위 디렉터리 참조는 기준 URL의 경로를 다룹니다. 다른 사이트 주소를 뜻하는 것으로 해석하지 않습니다.
/guide는 언제나 같은 전체 주소인가요?
기준 사이트의 루트를 사용하므로 호스트가 달라지면 전체 목적지도 달라집니다.
주소 계산이 맞으면 클릭 검증도 끝났나요?
목적지 존재, 공개 여부, 리디렉션과 실제 내용은 별도 확인입니다. 계산 결과만으로 공개 링크 완료를 표시하지 마세요.
MDN 상대 URL 해석 예시 확인하기근거: MDN Web Docs 「Resolving relative references to a URL」. 가상 경로와 점검표는 설명을 위해 직접 구성했습니다.
확인 기준일: 2026년 10월 2일.
본문 도표는 설명을 위해 직접 구성했습니다.
