홈페이지의 파일(웹 문서,이미지, …)들의 절대경로와 상대경로
홈페이지에 필요한 웹문서의 작성시에 아래와 같이 이미지, 웹문서, 자바스크립트, css 등의 파일들을 불러와야 할 때가 있습니다. 절대경로와 상대경로(문서상대경로, 루트상대경로)가 있는데, 외부 파일의 경우 절대경로가 사용되고, 내부 파일들의 경우에는 상대경로가 많이 사용됩니다.
<img src="경로" alt="이미지제목" />
<a href="경로">앵커텍스트</a>
<link rel="stylesheet" href="경로" type="text/css"" />
<script src="경로" type="text/javascript" />문서의 절대경로와 상대경로
보통 주소라고 많이 불리는 절대경로는, 아래 예와 같이, “http://yoursite.com/dir/a.html”처럼 도메인을 포함한 경로인데, 인터넷의 어느 곳에서나 해당 파일을 찾을 수 있다는 장점이 있습니다. 하지만, 사이트의 도메인이 변경될 경우에 더 이상 해당 파일을 찾을 수 없게 되어서 웹문서의 경로를 다시 바뀐 도메인으로 변경해야 하는 불편이 있으며, 절대경로는 서버 내부에서 처리되는 것이 아니고 DNS 조회를 통해 해당 파일을 찾기 때문에 웹문서의 로딩시간이 아주 약간 느려집니다. 때문에, 홈페이지 내부의 파일을 불러 올 때는 상대경로를 사용하고, 외부 사이트의 파일을 불러 올 때는 절대경로를 사용합니다.
상대경로(relative path)
서버내의 특정 지점을 기준으로 해당 파일을 찾는 방법으로, 도메인이 사용되지 않아서, 도메인이 바뀌어도 제대로 파일을 찾을 수 있으며, 서버 내부적으로 처리하기 때문에 로딩속도도 빠릅니다.
문서상대경로(document relative path)
현재 문서(소스 파일)가 있는 디렉토리를 기준(출발점)으로 해서 타겟 파일의 경로를 지정하는 방법입니다. ‘../’는 현재 디렉토리에서 한 단계 위의 디렉토리를 의미하며, ‘./’은 현재 디렉토리를 의미합니다. 현재 디렉토리일 경우에는 ‘./’는 그냥 생략해서 사용합니다.
만약 a.html 문서에서 header.gif를 불러온다면 타겟 파일의 경로는 아래와 같이 됩니다. 즉, a.html이 있는 dir1 디렉토리에서 한 단계 위인 루트 디렉토리로 이동한 후에, 그 디렉토리에 있는 img 폴더로 내려가서 header.gif를 찾게 됩니다.
<img src="../img/header.gif" />만약, b.html의 문서에서 header.gif를 불러온다면, 두 단계 위의 디렉토리로 이동해야 img 폴더로 내려 갈 수 있기 때문에 경로는 아래와 같이 됩니다.
<img src="../../img/header.gif" />index.html에서 header.gif를 불러오려고 한다면 index.html이 있는 디렉토리에 img 폴더가 있으므로 이동할 필요가 없으므로 아래와 같은 경로가 됩니다.
<img src="img/header.gif" /> 또는 <img src="./img/header.gif" />루트상대경로(root relative path)
루트 상대경로는 도메인과 연결된 디렉토리(public_html, html, www 등)를 기준(출발점)으로 타겟 파일을 찾는 방법으로 경로 앞에 항상 ‘/’를 붙여야 합니다. 문서 상대경로의 경우 소스 파일(문서)의 디렉토리가 바뀔 경우 타겟 파일의 경로도 바뀌게 되는데, 루트 상대경로의 경우는 소스 파일의 위치에 상관없이 타겟파일의 위치는 항상 일정하다는 장점이 있습니다.
즉, a.html 에서 불러올 때나, b.html에서 불러 올 때나 상관없이, header.gif의 경로는 항상 아래와 같이 일정한 경로를 가지게 됩니다.
<img src="/img/header.gif" />절대경로(absolute path)
앞에서도 설명한 바와 같이, 도메인을 포함한 경로입니다. header.gif의 경우 경로는 아래와 같이 됩니다.
<img src="http://yoursite.com/img/header.gif" />홈페이지 내에서는 상대경로를 주로 많이 사용되지만 때때로 검색엔진 최적화(SEO)의 목적으로 절대경로를 사용하기도 합니다.
