웹사이트 관련 팁들을 모아놓은 곳입니다. 좋은팁 공유 합시다.
  • 웹미니 한줄 전광판 영역 입니다.
글 수 186

18

조회 수 : 3449 신고 : 0

profile
작성자 : title: [ani]깜빡이는 표정빽짱구
포인트 : 56933 | 레벨 : 25
●경로
 

한 문서에서 다른 문서로 링크를 하거나 문서 안에 그림을 넣는다거나 할 때는 연결하고자 하는 문서나 파일의 위치를 브라우저에게 알려주어야 한다. 링크를 할 때는 href 속성을 사용해서 클릭했을 때 어디로 넘어갈 것인지를 말해주어야 하고, 그림을 넣을 때는 src 속성을 사용해서 어느 디렉토리 밑에 있는 어느 그림 파일을 그 자리에 넣을 것인지를 말해 주어야 하는 것이다. 이 때 적어주는 문서나 파일의 위치를 경로(path)라고 한다.

경로를 쓰는 방법은 절대경로와 상대경로, 두 가지가 있다.

절대경로

절대경로는 연결하고자 하는 파일의 전체 URL을 써 주는 것이다. 조선일보의 홈페이지로 링크하고자 한다면 http://www.chosun.com이 조선일보 홈페이지의 절대경로가 된다. 만약 필자의 홈페이지 첫 화면에 있는 로고 그림을 본인의 홈페이지에 넣고자 한다면 그 그림 파일의 절대경로는 http://galaxy.channeli.net/chungyee/image/aphro.gif가 될 것이다. 절대경로는 일반적으로 다른 사람이 만들어 놓은 문서나 파일을 연결할 때 사용한다.

내가 만든 문서를 연결할 때도 물론 절대경로를 쓸 수 있다.

필자의 경우 홈페이지 주소가 http://galaxy.channeli.net/chungyee인데, 이것은 galaxy.channeli.net이라는 이름을 가진 컴퓨터 아래에 있는 chungyee 디렉토리 안에 모든 문서들이 들어있다는 뜻이다. 이 주소로 들어갔을 때 보이는 첫 화면은 default.html이라는 이름의 파일인데, 일반적으로 홈페이지 첫 화면은 default.html이나 index.html 등 해당 웹 서버가 정해놓은 대로 이름을 주면 파일 이름까지 쓰지 않더라도 기본적으로 그 파일을 보여주게 된다. 그러므로, 원래는 http://galaxy.channeli.net/chungyee/default.html이라고 써야하는 것을 줄여 쓰는 셈이 된다.

 

지금 default.html 문서를 만들고 있는데 여기에서 index.html로 연결하려고 한다. 이 때 절대경로를 쓴다면, http://galaxy.channeli.net/chungyee/index.html이라는 긴 경로를 써야 할 것이다. chungyee 디렉토리 밑에 있는 image 디렉토리의 aa.gif로 연결하려면, http://galaxy.channeli.net/chungyee/image/aa.gif로 더 길어진다. 매번 이렇게 긴 절대경로를 써야 한다면 매우 번거로운 일이 될 것이다. 만약, 홈페이지가 이사를 해서 주소가 http://members.iworld.net/chungyee로 바뀌었다면 모든 경로를 다 바꿔주어야 하므로 보통 일이 아니다.

default.html을 기준으로 다른 세 개 파일의 절대경로를 쓰면 아래와 같다.

index.html : http://galaxy.channeli.net/chungyee/index.html
aa.gif : http://galaxy.channeli.net/chungyee/image/aa.gif
bb.html : http://galaxy.channeli.net/chungyee/image/bb.html
상대경로

상대경로는 항상 현재 만들고 있는 문서를 기준으로, 연결하려고 하는 문서가 같은 디렉토리에 있는지, 상위 디렉토리에 있는지, 하위 디렉토리에 있는지를 따지면 된다. 같은 디렉토리에 있으면 파일 이름, 상위 디렉토리에 있으면 ../파일이름, 하위 디렉토리에 있으면 디렉토리이름/파일이름을 써 주면 된다.

위 그림에서 index.html을 기준으로 다른 세 개 파일의 상대경로를 쓰면 아래와 같다. 위에서 쓴 절대경로와 비교해 보자.

index.html : index.html
aa.gif : image/aa.gif
bb.html : image/bb.html
bb.html을 기준으로 나머지 세 개 파일의 상대경로를 쓰면 다음과 같다.
default.html : ../default.html
index.html : ../index.html
aa.gif : aa.gif
상대경로를 쓰게 되면 혹시 서버 주소가 달라지더라도 현재의 디렉토리 구조만 그대로 유지시켜주면 경로를 수정하지 않고 그대로 사용할 수 있다.



출처: 술도넷
profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

엮인글 :
https://web.webmini.net/webtip/13914/637/trackback
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

댓글 '1'

환상 (101025)

2009.09.17 21:32:23

절대 상대 이건 수학도 ㅠㅠ 어려운 그런데 이런 설명은 괜찮네요.
List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수sort
186 소스 비교해 주는 사이트 title: [ani]깜빡이는 표정빽짱구 2018-10-20   210
185 웹사이트 속도 측정하고 개선해야 할부분 체크하세요. file title: [ani]깜빡이는 표정빽짱구 2018-10-19   215
184 괜찮은 구글 웹폰트 많네요. file title: [ani]깜빡이는 표정빽짱구 2018-10-23   216
183 seo 점수 알아보는 곳이라네요. title: [ani]깜빡이는 표정빽짱구 2018-10-11   224
182 페이스북 og 이미지 캐시 업데이트 title: [ani]깜빡이는 표정빽짱구 2017-07-10   264
181 카카오톡 미리보기 이미지 캐쉬 삭제 title: [ani]깜빡이는 표정빽짱구 2017-07-10   416
180 제가 쓰고 있는 플래쉬 코딩소스 title: [ani]방울UI 2012-05-09   1225
179 모바일화면 pc에서 확인하기 file title: [ani]깜빡이는 표정빽짱구 2013-12-03   2012
178 [스크랩] HTML5/CSS3 관련 팁 & 튜토리얼 title: 새싹사뎅이 2014-01-14   2067
177 best of best 휠을 움직이면 배경색이 바뀌고 클릭하면 원래색으로 title: [ani]깜빡이는 표정빽짱구 2004-02-29 27 2175
176 best of best 밑에 글 소스입니다. [1] title: [ani]깜빡이는 표정빽짱구 2004-02-22 20 2223
175 계산기 title: [ani]깜빡이는 표정빽짱구 2004-03-25 9 2241
174 자동으로 페이지 넘어가지 title: [ani]깜빡이는 표정빽짱구 2004-07-28 12 2246
173 best of best font 의 속성 [1] title: [ani]깜빡이는 표정빽짱구 2004-02-22 28 2260
172 포인트에 따른 자동레벨변경 title: [ani]깜빡이는 표정빽짱구 2004-03-29 16 2261
171 반응형 웹 참고 사이트(미디어쿼리) file title: [ani]깜빡이는 표정빽짱구 2013-06-03   2277
170 페이지확장 시키기 title: [ani]깜빡이는 표정빽짱구 2004-08-18 11 2340
169 리눅스 [Linux] [1] title: [ani]깜빡이는 표정빽짱구 2004-02-08 13 2341
168 트래픽을 제대로 알자! [1] title: [ani]깜빡이는 표정빽짱구 2004-03-08 10 2367
167 [re] (불투명결과) [1] title: [ani]깜빡이는 표정빽짱구 2004-02-29 12 2376