[CSS] 이미지 상대경로 / 절대경로

1   상대경로

상대적으로 변경이 될 수 있는 경로

(현재 실행중인 파일을 기준으로 경로 작성)

 

1.1   실행할 파일과 이미지 파일의 위치가 동일한 경우

(이미지의 경우 거의 폴더링을 따로하기 때문에 드문 경우)

<img src="삽입이미지.jpg" alt="이미지이름">

 

1.2   실행할 파일을 기준으로 이미지 파일이 실행 파일 하위 폴더에 있는 경우

<img src="images/삽입이미지.jpg" alt="이미지이름">

<link rel="style sheet" herf="css/main.css">
<link rel="style sheet" herf="./css/main.css>

<img src="images/main.jpg" alte="메인이미지">
<img src="./images/main.jpg" alt="메인이미지">


♬ 하나의 폴더마다 슬래시(/) 사용
   폴더명/파일명.확장자명
   ./폴더명/파일명.확장자명
   둘 다 가능

 

1.3   실행할 파일을 기준으로 이미지 파일이 실행 파일 상위 폴더에 있는 경우

<img src="../images/삽입이미지.jpg" alt="이미지이름">
<img src="../images/bg.jpg" alt+"backgroundimg"
<link rel="stylesheet href="../css/style.css"


♬ 상위폴더를 벗어날 때마다 마침표 2개(..)와 슬래시(/) 사용

---

2   절대경로

고유한 경로로 http://가 포함되어있는 웹브라우저(웹서버) 주소