[221124 TIL] 절대경로와 상대경로

0️⃣ keywords

keyword1 - 절대경로(Absolute Path)

최상위 디렉토리부터 해당 파일까지 경유한 모든 경로를 전부 작성

keyword2 - 상대경로(Relative Path)

현재 파일이 존재하는 디렉토리를 기준으로 해당 파일까지의 위치를 작성

1️⃣ 어떤 것(what)을 왜(why) 공부했나

A. Why

• html에 <img> 태그로 파일을 첨부할 때 경로를 어떻게 줘야하는지 알고싶다.
• 상대주소와 절대주소의 차이는 무엇이며 각각의 용도를 알고싶다.

B. What

<!-- 절대경로 -->
<img src="http://t2.gstatic.com/licensed-image?q=tbn:ANd9GcRgy5Jwolw7kbLujMdgbDk3HokpH5DkwqK7SUXGlBM9FFC00e2iZ8bYAlslmqACHKmAPW0rKZclMUTS_4s"><br>

<!-- multimedia.html 실행 할때 절대 경로 http://localhost:8080/html/multimedia.html -->
<img src="http://localhost:8080/html/images/html5.jpg"><br><!-- 절대경로 -->
<img src="/html/images/html5.jpg" width="100" height="100"><br><!-- 절대경로,내 서버 주소를 제외한 모든 경로 기재 -->
<img src="images/html5.jpg" width="200" height="200"><br><!-- 상대경로,  -->
<img src="./images/html5.jpg" width="500" height="500"><br><!-- 상대경로 -->
<img src="../html/images/html5.jpg"><br><!-- 상대경로 -->

<img src="../images/html5.jpg" alt="html 로고"><br>

절대경로는 위와 같이 http:// 부터 전체 주소를 기재하고

내 서버에서 실행할 경우 내 서버주소(localhost:8080)까지는 생략가능하다.

 

상대경로는 현재 <img>태그를 작성하는 파일을 기준으로

동일한 위치라면(./ 생략가능) 폴더명이나 파일명을 작성하고 상위 폴더라면 ../ 를 사용하여 그 이후 경로부터 작성해준다.

 

 

(위 예시 사진 폴더구조의 portfolio는 아래 주소의 main에 해당하는 것 같다.)

 

- photo.jpg 라는 파일을 index.html 에서 링크하고싶은 경우,

상대경로는 동일한 레벨에 존재하는 폴더명(images)부터 작성하면된다.

절대경로는 (내 서버주소)를 생략하고 / 부터 작성해주면 된다. /는 생략할 수 없다.

 

- photo.jpg 라는 파일을 style.css 에서 링크하고싶은 경우,

상대경로는 한 단계 위의 폴더를 참조해야 하므로 ../ 를 작성한 후 images 폴더명을 기재하고 이후는 위와 같다.

절대경로는 현재 파일위치에 영향을 받지 않으므로 index.html에서 작성한 것과 같다.

 

2️⃣ 가져갈 것들 및 생각(takeaway)

요약

• 절대경로는 어느곳에서든 경로에 접근 가능하지만, 폴더를 이동하는 등의 경로가 변경될 경우 일일히 수정해야한다는 단점이 존재함.
• 상대경로는 현재파일의 위치를 기준으로 연결하려는 파일의 상대적인 위치를 적는 것이기 때문에 프로젝트 디렉토리 위치가 바뀌어도 내부 구조(파일간의 위치)가 동일하다면 수정없이 사용할 수 있다.

 

참고(reference)

절대주소 vs 상대주소 개념 정확히 이해하기 - 코딩웍스(Coding Works)님의 블로그 - 인프런 | 커뮤니