Front-End/HTML&CSS

[HTML] 절대경로와 상대경로

Olivia Kim 2023. 1. 21. 01:23
반응형

 

이해를 위한 기본 세팅 설명


[내 PC]의 [사진] 폴더 안에 [Scan], [오류] 폴더가 있으며 동등한 위치에 'capture.jpg'가 있다.

 

 

 


[Scan] 폴더 안에는 'black.jpg'가, [오류] 폴더 안에는 '1.jpg', '2.jpg', '3.jpg'가 있다.

 

 

 

절대 경로

▶ 최상위 디렉토리(=파일)를 반드시 포함하여 작성된 경로


사진에 보이는 '1.jpg'의 절대경로는 내 PC\사진\오류\1.jpg 이다.

 

절대경로는 직관적이어서 이해하기 쉽지만, 찾아가는 과정에서 여러 파일을 거칠 경우 경로가 길고 복잡해진다는 단점이 있다.

 

 

 

상대 경로

▶ 현재 디렉토리(기준 비교 대상)를 기준으로 작성된 경로

 

상대경로는 '내가 기준으로 삼고 싶은 디렉토리'를 기준으로 '다른 디렉토리(또는 파일)'가 어디에 있는지 찾을 때 사용할 수 있다.

 

경로 표기법

/ → 최상위 경로
./ → 현재 디렉토리 (현재 디렉토리는 생략 가능)
../ → 상위 디렉토리

 

 

 


1.jpg를 기준
으로 capture.jpg를 찾아가는 상대경로는 ../capture.jpg 이다.
1.jpg를 기준으로 black.jpg를 찾아가는 상대경로는 ../../Scan/black.jpg 이다.
마찬가지로 black.jpg를 기준으로 3.jpg를 찾아가는 상대경로는 ../../오류/3.jpg 이다.

상대경로로 작성하면 상대적으로 간결하게 참조할 수 있다.

 

 

반응형