절대경로와 상대경로의 차이

요청 웹문서와 같은 서버에 존재하는 웹자원(WebContext)은 URL 주소에서

접속 서버 관련 정보를 생략하여 표현 가능 - 프로토콜, 서버명, 포트번호 생략 가능

절대경로 표현 방법 : 서버의 최상위 디렉토리(Root Directory)를 기준으로 웹자원의 경로 표현

전체 경로가 적혀져 있음. 따라서 절대 변하지 않는 고유의 경로이다.

장점: 어디서든 쉽게 찾을 수 있어 분실 가능성이 낮다.

단점: 속도가 오래걸림. 주소 변경시 경로를 모두 수정해야함.

 

ex) <img alt="apple" src="/web/html/images/apple.jpg">

ex) <img alt="다음로고" src="https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png">

 

 

상대경로 표현 방법 : 요청 웹문서가 저장된 서버의 디렉토리를 기준으로 웹자원의 경로 표현
현재 HTML문서가 위치한 폴더 기준으로 상대적인 경로이다.

장점: 컴파일 속도가 빠르다, 디렉터리 주소가 같다면 수정을 안해도 된다.

단점: 파일의 위치를 모를경우 분실할수 있음

 

현재 파일이 now.html 이라면

 

같은 디렉터리에 존재할 경우

ex) <img alt="오렌지" src="orange.jpg">

ex) <img alt="오렌지" src="/web/html/orange.jpg">

 

./ : 현재 위치 기준에서 하위 디렉터리로 이동 (생략가능)

ex) <img alt="사과" src="./images/apple.jpg">
ex) <img alt="사과" src="images/apple.jpg">

../ : 상위 디렉터리로 이동
ex) <img alt="바나나" src="/web/banana.jpg">
ex) <img alt="바나나" src="../banana.jpg">