[HTML] 절대 경로와 상대 경로

기본적인 개념이지만 헷갈릴 때가 있어서 한번 정리했다.

프로그래밍에서 파일의 위치를 파악할 때 절대경로와 상대경로라는 두가지 개념을 사용한다.

절대 경로란?

절대 경로는 최상위 디렉토리에서부터 시작하는 고유경로를 말한다.

최상위 디렉토리는 다른 말로 뿌리(root) 혹은 근원이라고 하며 어떠한 파일을 향하든 늘 시작점이 되는 위치다.

절대 경로에서는 파일들의 위치가 고정되어있기 때문에 작업 중인 파일의 위치가 변해도 다른 파일의 고유 경로에 영향을 주지 않는다.

위 그림을 예시로 우리는 현재 index.html 파일에서 작업하고 있고 heropy.png의 경로를 나타낸다면 어떻게 해야 할까?

localhost:5500 라는 로컬 영역 아래에 my-project가 있고, 그 아래에 images, 그 아래에 heropy.png 파일이 있다.

그러므로 heropy.png를 절대 경로로 표시하면

http://localhost:5500/my-project/images/heropy.png 가 된다.

절대경로를 쓸 때는 /(/) 혹은 http(s) 시작하여 디렉토리를 차례대로 내려간다.

 

상대 경로란?

상대 경로는 현재 작업하고 있는 파일의 위치를 중심으로 하는 경로를 말한다.

그렇기 때문에 절대 경로랑 반대로 작업하는 파일의 위치가 변하면 다른 파일들의 경로도 변한다.

절대 경로에서의 예시와 마찬가지로 똑같이 우리는 index.html 파일에서 작업을 하고 있다.

이 때 heropy.png 파일을 상대 경로로 작성한다면?

./images/heropy.png 혹은 images/heropy.png라고 쓴다.

상대 경로는 ./ 혹은 ../로 시작하는데, ./는 생략 가능하다.

./는 현재 작업 중인 파일과 동일한 층의 디렉토리를 경유할 때 사용하고,
../는 상위 폴더를 경유해야할 때 사용한다.

위 그림에서 index.html 파일은 heropy.png 파일에 도달하기 위해 상위 폴더를 거칠 필요가 없다.
왜냐하면 heropy.png 파일은 images 폴더 아래에 위치해있는데, images 파일은 index.html 파일과 동일하게 my-project 아래에 있기 때문이다.

위 그림을 다시 보고 글을 읽어 보자. 그럼 이해가 쉬울 것이다.

이번엔 main.css 파일에서 작업 중이라고 가정하고 heropy.png 파일의 위치를 상대 경로로 나타내보자.

main.css 파일은 css 폴더 안에 있는데, heropy.png는 images라는 다른 폴더 안에 위치해 있다. 이 때문에 main.css 파일은 css 폴더를 나가야만 images 폴더에 들어가 heropy.png를 마주할 수 있다.

그렇기 때문에 본 케이스에서 heropy.png의 상대 경로는 ../images/heropy.png가 되는 것이다.

../는 ./과 다르게 생략할 수 없다.

 

그렇다면 절대 경로와 상대 경로는 각각 언제 쓸까?

정답은 없다. 둘 다 아무 상황에서나 써도 된다.

내 나름대로 생각해보자면 외부의 프레임워크나 라이브러리 등 무거운 것들을 갖고 올 때는 절대 경로를, 특정 폴더 내에서 연관되어 있는 파일들끼리는 상대 경로를 쓰는 게 좋아 보인다.

프로그래밍할 때 흔히 html, css, js 파일들을 연관되어 있는 것끼리 폴더로 묶곤 하는데 이 때는 상대 경로를 쓰는 것이 개발자로서 읽고 관리하기 편하다.

반대로 외부에서 뭉텅이 채로 가져오는 프레임 워크라던가 기타 오픈 소스 등은 절대 경로로 쓰는 것이 코드를 읽었을 때 이해하기 더 쉬운 느낌이 있다.

사진출처: Fast campus_react&redux로 시작하는 웹 프로그래밍