절대경로와 상대경로 파헤치기

 

▒ 절대경로와 상대경로 파헤치기

 

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

절대경로는 거의 헷갈리지 않지만 상대경로를 어려워 하는 사람들이 꽤 있어서 포스팅해 본다. ㅎㅎ

 

 

 

| 아래 그림처럼 이런 폴더와 파일이 있다고 가정하자 (임의)

 

◎ 절대경로

 

절대경로ex1

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

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

이 때 절대경로는 ?

<img src="http://www.haru.net/img/logo.jpg"> 

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

 

 

절대경로ex2

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

<img src="http://www.haru.net/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">

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

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

이처럼 상대경로는 현재 내가 작성중인 파일의 위치가에 따라 주소가 상대적으로 달라진다.

 

 

상대경로ex3

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

그런데 같은 단계에 있는 img 폴더 내 logo.jpg를 불러와야 한다.

이 때 상대경로는?

<img src="img/logo.jpg"> | <img src="./img/logo.jpg"> 둘 다 맞다.

 

 

결론

../ 한 단계 위
./ 현재 (생략해도 무방)

 

 

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

그 이유는 서버나 도메인 주소가 바뀌어도 이미지나 파일 경로에 영향이 없으며, 내가 로컬에서 작업을 해서 서버에 업로드 할 때도 편하기 때문이다.

---

예제만 <img src=" ">로 했을 뿐이지 <a href=" "> 도 위와 동일하다.

 

아래 파일은 위 이미지를 토대로 만든 상대경로 연습 파일이다.

 

상대경로예제.zip

0.02MB