반응형
이해를 위한 기본 세팅 설명
[내 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 이다.
상대경로로 작성하면 상대적으로 간결하게 참조할 수 있다.
반응형
'Front-End > HTML&CSS' 카테고리의 다른 글
[HTML / 시맨틱 마크업] 링크 (Anchor) (0) | 2023.05.03 |
---|---|
[HTML / 시맨틱 마크업] 강조 (Emphasis) - em, strong (2) | 2023.05.03 |
[HTML / 시맨틱 마크업] 제목과 문단 (Headings & Paragraphs) (0) | 2023.05.02 |
[HTML / 시맨틱 마크업] HTML이란? (0) | 2023.05.02 |
[CSS] 마진 상쇄(겹침) 현상 (Margin Collapsing) 해결하기 (1) | 2023.04.05 |