[web_tip] 절대경로와 상대경로 ?

 

 

 

 

♥ 절대경로와 상대경로 자세히 알기

우리가 코딩을 할 때 파일이나 이미지를 가져오는 경로로써 필수적으로 알아야 할 개념입니다.

절대경로는 거의 헷갈리지 않지만 상대경로를 헷갈려하는 사람들이 종종 있어 정리해봅니다. 

 

 

 

* 아래 그림처럼 이런 폴더와 파일이 있다고 가정해봅시다 (임의)

 

♥ 절대경로

 

ex1) 절대경로 첫번째 예시

현재 나는 sub.01.html 이라는 파일을 작성 중에 있을대 

상위에 있는 img 폴더 안 logo.jpg를 불러와야 된다고 가정했을 때 

 

이 때의 절대경로는?

 

<img src="http://www.santamonica.com/img/logo.jpg">

보는 바와 같이 나의 도메인 주소를 시작으로 최상위 폴더부터 거슬러 내려가면 됩니다.

 

 

ex2) 절대경로 두번째 예시

그럼 작성중인 파일만 left_menu.html 으로 바뀌면 logo.jpg 절대경로는 어떻게 될까요?

<img src="http://www.santamonica.com/img/logo.jpg">

위와 동일합니다. 

 

이처럼 절대경로는 내가 작성중인 파일이 어디에 있든지 주소가 절대 변하지 않는 경로 입니다.

 

 

 

 

---

 

 

 

 

 

 

♥ 상대경로

 

ex1) 상대경로 첫번째 예시

현재 나는 sub01.html 파일을 작성중에 있습니다.

그런데 상위에 있는 img 폴더 내 logo.jpg를 불러와야 합니다.

 

이 때의 상대경로는?

<img src="../img/logo.jpg">

내가 작성중인 파일의 위치로부터 한 단계 위로 올라가서 (<../>) img 폴더 내의 logo.jpg 파일을 불러오면 됩니다.

 

 

 

ex2) 상대경로 두번째 예시

그럼 작성중인 파일만 left_menu.html 으로 바뀌면 logo.jpg 상대경로는 어떻게 될까요?

<img src="../../img/logo.jpg">

위와는 다르게 내가 작성중인 파일의 위치로부터 두 단계 위로 올라가서 img 폴더 내의 logo.jpg 파일을 불러옵니다.

이처럼 상대경로는 내가 작성중인 파일일의 위치가 어디에 있는가에 따라 주고사 상대적으로 달라집니다.

 

tip : 최상위폴더로 바로 이동하는 주소 <img src="/img/logo.jpg">

 

 

 

ex3) 상대경로 세번째 예시

한번 더 예시를 들어 볼까요?

현재 나는 index.html 파일을 작성 중에 있습니다.

그런데 같은 단계에 있는 img 폴더 안 logo.jpg를 불러와야 한다고 했을 때 

 

이 때 상대경로는?

<img src="img/logo.jpg">

or

<img src="./img/logo.jpg">

둘 다 맞는 경로 입니다.

 

 

결론

../ 한 단계 위

./ 현재 (생략해도 무방)

 

 

 

 

---

 

 

 

 

우리가 웹작업을 할 때는 상대경로로 작성을 해야 합니다. 

그 이유는 서버나 도메인 주소가 바뀌어도 이미지나 파일 경로에 영향이 없으며,

내가 로컬에서 작업을 하고 서버에 업로드 할 때도 편하기 때문이에요!

 

 

 

 

절대경로와 상대경로,

헷갈리지 맙시다 :) 

 

 

 

 

 

 

 

tip .

예제만 <img src="">로 했을 뿐 

<a href="">도 위와 동일 합니다.