절대경로와 상대경로

(2) 절대경로와 상대경로에 대하여 알아보자.

절대경로 와 상대경로에 대하여 빠지지 않고 올라오는 질문중 하나인 경로에 대해 간단히 알아 봅시다. HTML 문서에서 다른 문서를 링크시키고자 할때에는 링크될 문서의 정확한 위치를 지정해야 합니다. 그림을 삽입하는 경우에도 마찬 가지 입니다.

 HTML 문서에 그림이나 어느 대상위치를 지정할때 사용하는 방법은 두 가지가 있습니다.

우리가 웹 브라우저를 이용하여 어떤 사이트를 찾아가려면 주소창에 "http://www.everywow.com" 과 같이 도메인 주소를 입력하게 됩니다. 절대 URL 은 이렇게 도메인 주소를 사용하여 지정하는 방법 및 도메인 주소가 아니더라도 완전한 경로를 표시할때 사용하는 방법입니다.
 이 방법은 문서의 전송방식이나 인터넷상의 웹서버 위치, 그리고 HTML 문서, 그림등이 있는 실제 위치까지 정확하게 지정됩니다.

반면 상대경로는 같은 사이트 안에 있는 문서나 그림등을 연결하거나 위치를 지정할때 사용하는 방법입니다. 이 방법은 처음 시작하는 디렉토리를 기준으로 상대적인 경로와 문서이름등을 사용하기 때문에 표현이 간략해지고 쉬워지는 장점이 있습니다.
상대경로를 사용하면 웹서버에 파일들을 업로드 하지 않고도 로컬(자신의 컴퓨터)에서 브라우저의 실행만으로 결과물을 확인할 수 있습니다.
또한, 홈페이지가 사용하는 서버의 이전, 또는 도메인의 변경등을 하여도 별도로 수정할 일이 없다는 장점이 있습니다.

이 글을 쓰고 있는 운영자도 홈페이지 제작시 꼭 필요한 경우가 아니라면 상대경로를 사용합니다.

절대경로와 상대경로의 사용법을 예를들어 한번 봅시다.

C:\Document\Homepage\ 라는 폴더에 everywow.html 이라는 문서가 있습니다.
C:\Document\Homepage\ 라는 폴더에 everywow.gif 라는 그림이 있습니다.

everywow.html 에서 같은 폴더에 있는 everywow.gif 파일을 삽입하려 할때,

▶ 절대경로 <img src="C:\Document\Homepage\everywow.gif">
▶ 상대경로 <img src="everywow.gif">

C:\Document\Homepage\image 라는 everywow.gif 라는 그림이 있습니다.

▶ 절대경로 <img src="C:\Document\Homepage\image\everywow.gif">
▶ 상대경로 <img src="image/everywow.gif">

여기서 한가지 알아두어야 할것은 C:\ 와 같이 하드디스크(로컬) 의 경로를 표시할때 \ 라는 기호를
사용하는데, 이때 로컬의 경로를 사용하였기 때문에 자신의 컴퓨터에서는 그림이 보입니다.
하지만, 다른 사람은 볼수 없습니다. 이유는 다른 사람이 여러분이 만들어놓은 everywow.html 파일을 보기위해서는 여러분의 컴퓨터로 접속해야 한다는 말이 되는데, 여러분의 컴퓨터는 웹서버가 아닌 관계로 볼수가 없습니다.
다른 사람이 볼수 있도록 하기 위해서 이렇게 만든 파일들을 웹서버라는 곳에 올려야 합니다.
웹서버는 인터넷이 연결된 어디에서나 접속할 수 있도록 준비가 되어 있습니다.
웹서버의 운영을 위해서는 DNS, FTP, TELNET, MAIL 서버등의 각종 서버를 함께 운영해야 하고, 그에따른 전문 기술이 필요하므로 그 부분에 대한 설명은 생략하겠습니다.
또한, 홈페이지를 이제 시작하는 여러분의 입장에서 알아야 할 과정이 아니라고 생각 합니다.

SRC="test.gif" 그림이 page1.html 문서와 같은 폴더에 있다.

SRC="images/test.gif" 그림이 page1.html 문서가 있는 곳에서 한 폴더 아래의 images라는 폴더에 있다.필요하면 아래로 계속 확장할 수 있다.

SRC="../test.gif" 그림이 page1.html 문서보다 한 폴더 위에 있다.

SRC="../../test.gif" 그림이 page1.html 문서보다 두 폴더 위에 있다.

SRC="../images/test.gif"문서와 그림은 동일한 한 상위 폴더를 가지며 images라는 폴더에

한단계 상위를 의미할 경우가 "../" 로 표시 됩니다.
두 단계는? "../../" 가 되겠죠....

이와 같이 자신이 사용하고자 하는 파일을 기준으로 잡아서 상위, 하위의 표시방법을 적용하면 됩니다. 상대경로가 처음에는 많이 혼동되지만, 몇번만 해보면 금방 이해가 갈것 입니다.