[HTML] HTML파일 경로(File Paths, 절대파일경로, 상대파일경로)

 

 

1.절대 파일 경로(Absolute File Paths)

<img src="https://www.w3schools.com/images/flower.jpg"/>

절대 파일 경로는 전체 URL이다.

 

 

특징

• 어느 위치에서든 접근이 가능하도록 표기하는 경로 방식
  
• 주소의 길이가 길다
  
• 이전을 하게되면 주소의 업데이트가 반드시 필요

---

 

2.상대 파일 경로(Relative File Paths)

<img src="../images/flower.jpg"/>

상대 파일 경로는 이미지를 삽입할 HTML 문서를 기준으로 경로를 인식함

위 예제에서는 현재 웹 루트에 있는 images 폴더의 파일을 가리킴

(이미지 파일이 HTML 문서와 같은 폴더에 있는지, 상위 폴더에 있는지 등을 따져보고 경로를 지정해줘야함)

만약 문서와 이미지 파일이 같은 경로에 있다면 이미지 파일명만 적어주면 되므로 문제가 되지 않으나

다른 폴더에 있다면 이 다른폴더에 위치를 지정해줘야함

 

 

 

상대 경로 표기 방식

./ : 현재 폴더
../ : 상위 폴더

 

특징

• 출발 지점에 따라서 도착지가 달라질 수 있음
• 첫 출발지 선택이 중요

 

 

---

3. 루트 파일 경로

<img src="/images/flower.jpg"/>

 루트(root) 경로 (최상위 폴더)로 파일을 가리키나 현재는 쓰지않음

 

  

 

---

가능한 상대파일경로를 사용하는 것이 제일 좋다고 함

 

 

 

 

간단한 실습

 

위 다람쥐 사진의 경로를 파일이름만 지정하여 실행시켜 보았다.

 

잘 출력된다.

 

 

사진을 밖으로 꺼내자

 

출력이 되지 않는다.

 

경로에 상위폴더 지정을 해준다 (../squirrel.jpg)

 

 

잘 출력된다.