경로

 

 

📍1. 절대 경로

• 다른 웹사이트에서 호스팅되는 외부이미지로 연결 (고유 경로 ) 
• 도메인 주소를 시작으로 최상위 폴더 부터 거슬러 내려가기)
• 파일이 변해도 주소가 변하지 않음

Ex)

예: src="https://www.w3schools.com/images/img_girl.jpg"

 

📍2. 상대 경로 

 : 웹사이트 내에서 호스팅되는 이미지에 대한 링크

-  현재 문서를 기준으로 경로를 인식하는 방법

 

•  index.html 에서 동일한 위치에 있는 apple.png를 가져오기 

=>  src = "apple.png" 또는 scr = " ./apple.png"

 

•  index.html 의 상위 폴더에 이미지가 있는 경우

=>  src = "../apple.png"

 

=> 현재 문서의 위치가 /home/user/documents 라면 ../doucments는 /home/user 의미

 

•  index.html의 하위 폴더에 이미지가 있는 경우

=> src = "하위폴더/apple.png"

=> src = "./하위폴더/apple.png"

 

../ : 한단계 위

./   : 현재(생략해도 무방)

/ :  최상위 폴더로 바로 이동함 (루트)

 

- Url 이 슬래시 없이 시작하며 현재 페이지를 기준으로 함 ex )  src="img_girl.jpg".

- Url 이 슬래시를 포함 하여 시작하면 도메인에 상대적   ex) src="/images/img_girl.jpg".

 

• -> 웹 작업 할떄 상대경로로 작성 ( 서버나 도메인 주소가 바뀌어도 이미지나 파일 경로에 영향이 없음)