절대경로/전체경로 (html 교재 33p)

 

 

html 교재 33p

* 절대경로 : 전체 경로
1) C:\Users\itedunet\eclipse-workspace\arrylist
2) <img src="/html/resources/img/dog.jpg">
3) https://news.naver.com/breakingnews/section/105/230

* 상대경로 : 내 현재 위치 (폴더) 기준으로의 경로
1) 파일/폴더/visual studio code
  현재폴더 ./index.html 혹은 index.html
  상위폴더 ../index2.html
  <img src="dog.jpg"> 현재 문서와 같은 폴더 안에 있는 dog.jpg
2) url
  <base href="https://news.naver.com/">
  <a href="breakingnews/section/105/230">

 

___

 

절대경로와 상대경로의 차이점
1. 절대경로 (Absolute Path)
- 루트 디렉토리부터 시작하여 특정 파일이나 폴더까지의 전체 경로를 표시
- 항상 슬래시(/)나 드라이브 문자(C:\)로 시작
- 어디서든 동일한 위치를 가리킴
- 예시:
  - Windows: C:\Users\Documents\file.txt
  - Linux/Mac: /home/user/documents/file.txt

2. 상대경로 (Relative Path)
- 현재 작업 중인 디렉토리를 기준으로 상대적인 위치를 표시
- 현재 위치에 따라 달라질 수 있음
- 주요 표기법:
  - . : 현재 디렉토리
  - .. : 상위 디렉토리
  - 파일명이나 폴더명으로 시작
- 예시:
  - ./file.txt (현재 폴더의 file.txt)
  - ../file.txt (상위 폴더의 file.txt)
  - folder/file.txt (현재 폴더 내의 folder 안에 있는 file.txt)

장단점:
- 절대경로: 명확하지만 경로가 길어질 수 있음
- 상대경로: 경로가 짧고 간단하지만 현재 위치에 따라 달라질 수 있음  rel="noopener noreferrer">
_________________________________________
<img src="cat.jpg"> 이 이미지 경로:

이 이미지 경로는 상대경로라고 불립니다.

"cat.jpg"라는 파일명만 지정되어 있고, 전체 디렉토리 구조나 루트 디렉토리부터 시작하는 경로가 없기 때문에 이는 상대경로에 해당합니다. 이 경우, 현재 HTML 파일이 있는 디렉토리에서 "cat.jpg" 파일을 찾게 됩니다.

상대경로의 특징은 다음과 같습니다:

현재 작업 중인 디렉토리를 기준으로 파일 위치를 지정합니다.

파일이나 디렉토리의 전체 경로를 명시하지 않습니다.

웹 개발에서 자주 사용되며, 사이트 구조 변경 시 유연하게 대응할 수 있습니다.

만약 이 이미지가 현재 HTML 파일과 다른 디렉토리에 있다면, 경로를 조정해야 할 수 있습니다. 예를 들어:

<img src="./images/cat.jpg">: 현재 디렉토리의 images 폴더 내 cat.jpg

<img src="../images/cat.jpg">: 상위 디렉토리의 images 폴더 내 cat.jpg

이러한 상대경로 사용은 웹사이트의 구조를 변경하거나 다른 서버로 이전할 때 유용합니다.