홈페이지 제작에 있어서 경로는 꽤 중요합니다.
경로의 종류는 두가지가 있습니다. 바로 '절대 경로'와 '상대 경로' 인데요.
 
절대 경로는 말 그대로 절대적으로 지정되어 있는 경로입니다. 네이버를 예로 들어 설명해 보도록 하겠습니다. 내 홈페이지에 네이버를 링크시키려고 합니다.
이 때 적어야 하는 주소는 http://www.naver.com 이 되겠지요. 바로 이 사이트 주소를 절대 경로라고 보시면 됩니다. 네이버 홈페이지 주소는 항상 변하지 않는 주소이죠.

컴퓨터를 이용해서 한번 더 설명해 드리겠습니다. 탐색기를 켜서, 내 그림 폴더에 들어가 보겠습니다. 상단의 주소표시줄에는 이런 주소가 보입니다.
C:Documents and SettingsOwnerMy DocumentsMy Pictures
이 주소 역시 절대 경로입니다. 내 그림 폴더는 항상 저 위치에 있기 때문이죠.
 
그런데 절대 경로를 보니 주소가 너무 깁니다. 홈페이지 제작에 사용하기에는 비효율적訣?
아까 설명드린 네이버 링크 같은 경우는 내 홈페이지와 네이버가 같은 사이트가 아니라,
'네이버' 라는 별개의 사이트 였기 때문에 어쩔 수 없이 절대 경로를 사용해야 합니다.

그러나 내 계정, 내 홈페이지 안에서는 상대적인 주소.
즉 '상대 경로'를 이용할 수 있습니다.
이 상대 경로를 이용하면 더 효율적으로 홈페이지를 제작 하실 수 있습니다.
그럼 상대 경로에 대해 좀 더 알아보도록 합시다.
 
 

 
 
 
위 그림을 예로 들어 설명하도록 하겠습니다.
루트에 있는 index.html 에서 images 폴더 안에 있는 banner.gif 파일을 불러 오려고 합니다.
그럼 <img src="images/banner.gif"> 라고 하면 되겠죠.
banner.gif 파일은 images 폴더 안에 있으니까요.

여기서 슬래시(/)는 폴더임을 나타내는 일종의 표시수단이라고 생각 하시면 됩니다.
그럼 bullet.gif 파일을 불러오기 위해서는 <img src="images/icon/bullet.gif"> 이라고 하면 되겠네요. 간단하죠?

자, 지금까지 알려드린 것은 상위 폴더에서 하위 폴더에 있는 파일을 불러오는 경우 였습니다.
그럼 상위 폴더에 있는 파일은 어떻게 불러와야 할까요?

files 폴더 안의 sub.html 에서 루트 폴더 안에 있는 logo.gif 그림 파일을 불러 온다고 합시다.
이렇게 하위 경로에서 상위 경로 파일을 불러올 때는 상대 경로에서 상위 폴더로 한 계단 올라가는 '../'을 사용하시면 됩니다.
그럼 이 경우에는 <img src="../logo.gif"> 이렇게 나타내면 되겠네요.
그렇다면 sub.html 에서 icon 폴더 안에 있는 bullet.gif 파일을 불러 온다고 한다면
<img src="../images/icon/bullet.gif"> 이렇게 나타낼 수 있습니다.
 
* 정리 *
절대경로 : 루트 (최상위 폴더) 를 기준으로 하는 경로.
상대경로 : 해당 파일을 기준으로 하는 경로.
 
여기서 가장 중요한 것은 '/'와 '../'의 차이 입니다.
폴더 안으로 계속 해서 들어 가면 '/'를 계속 붙여 주면 되고,
지금 있는 폴더에서 상위 폴더로 계속해서 올라 가면 '../'를 계속해서 붙여 주는 것이지요.