[HTML] 절대경로, 상대경로 - 이미지 경로 표기법

<img src ="경로"> 

<img>태그- src 속성으로 이미지 파일 경로 지정

 

미리 알아두자!

' / '  - 하위 폴더 지칭

' . '   - 현재 경로

' .. '  - 한 칸 상위 경로

 

1. 절대 경로

: 고유의 경로

ex) c:\Users\web\images

---

2. 상대 경로 - 주로 쓰는 경로

web.html 문서 하위에 css 폴더와 images 폴더가 있는 상태입니다.

cat.jpg (images 폴더안에 저장)

web.html 경로

 

1) web.html 문서에서 cat.jpg를 삽입 ( . 사용)

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

현재 경로(.) -> 하위 폴더(/) -> images 폴더 -> cat.jpg

 

2) css파일에서 cat.jpg를 삽입 ( .. 사용)

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

같은 레벨에 있는 폴더이기 때문에 바로 사용할 수 없습니다.

한 칸 상위 경로로 올라갔다가 하위 폴더로 내려오는 경로를 사용해야합니다.

상위경로(..) -> 하위폴더(/) -> images 폴더 -> cat.jpg