WEB - 상대경로 & 절대 경로
프로그래밍을 하다보면 경로 설정을 해야될 때가 있다.
완벽히 정리가 되지 않으면 헷갈리기 쉽다.
절대경로
절대경로란 어떠한 웹페이지나 파일이 가지고 있는 고유한 경로를 말한다.
아래와 같이 예를 들 수 있다.
C:\Users\UserID\Desktop\test.txt
http://www.google.com
test.txt파일 같은 경우는 최상위 루트 폴더인 C폴더부터의 모든 경로를 전부 기입해주어야 한다.
이러한 주소를 알면 구글같은 웹페이지를 접속하거나 test.txt파일을 실행시킬 수 있는 것이다.
상대경로
상대경로란 현재 위치한 곳을 기준으로 생각하면 된다.
말로는 이해가 쉽지 않으므로 예를 들어보겠다.
아래와 같은 경로 하위에 A폴더와 B폴더가 있다고 가정해보자.
C:\users\documents
이때 상대경로의 개념처럼 '현재 내가 위치한 곳을 기준' = B폴더 라고 했을때 나는 A에 있는 text.txt파일을 가져오고 싶다고 가정했을때 경로는 ../A/text.txt 이다.
처음부터 풀어서 쓰면 ../ = 상위폴더로 이동이며 상위폴더로 이동하면 바로 하위에 A폴더가 있고 그 하위에 text.txt파일이 있으니 순서대로 경로를 적으면 된다.
경로를 정리하자면,
1 '/' -> 가장 최상의 디렉토리로 이동한다.(Web root)
2 './' -> 파일이 현재 디렉토리를 의미한다.
3 '../' -> 상위 디렉토리로 이동한다.
4 '../../' -> 만약 두단계 상위 디렉토리로 이동 (세단계면 세번..)
절대경로같은 경우는 경로를 파악하기 쉬운 이점도 있지만 상황에 따라 경로가 동적으로 바뀐다는 가정하에는 독이 될 수 있다. 그러니 상황에 맞게 절대경로와 상대경로 설정을 잘해주는 것이 유지보수 및 확장성 측면에 도움될 것이다.
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>상대 경로</h1>
<div><a href ="./ex04.htm">같은 폴더의 다른 페이지 이동하기</a></div>
<div><a href ="ex04.htm">같은 폴더의 다른 페이지 이동하기</a></div>
<div><a href ="./Member/list.htm">자식 폴더의 다른 페이지 이동하기</a></div>
<div><a href ="Member/list.htm">자식 폴더의 다른 페이지 이동하기</a></div>
<div><a href ="./Member/private/private.htm">자식 폴더의 다른 페이지 이동하기</a></div>
<div><a href ="Member/private/private.htm">자식 폴더의 다른 페이지 이동하기</a></div>
<div><a href ="../필기.txt">프로젝트 루트 폴더의 자원으로 이동</a></div>
<h1>절대 경로</h1>
<div><a href ="/WebClientTest/ex01.htm">절대경로</a></div>
<div><a href ="/WebClientTest/Member/list.htm">절대경로</a></div>
<div><a href ="/WebClientTest/Member/private/private.htm">절대경로</a></div>
<div><a href ="/WebClientTest/Member/list.htm">부모폴더의 다른 페이지 이동하기</a></div>
<h1>로컬 경로</h1>
<div><a href ="ex01.htm">1번예제 (상대)</a></div>
<div><a href ="/WebClientTest/ex01.htm">1번예제 (절대)</a></div>
<div><a href ="C:\Users\user\Desktop\Class\WebClient\WebClientTest\WebContent\ex01.htm">1번예제 (로컬)</a></div>
<h1>외부 경로</h1>
<div><a href = "http://naver.com">네이버 이동하기</a></div>
<div><a href = "http://www.naver.com">네이버 이동하기</a></div>
</body>
</html>
댓글