3일차_상대 경로 그리고 절대 경로_20210624

상대 경로 그리고 절대 경로

 

<상대 경로>

./ (생략 가능) : 현재 폴더(주변에서 찾기)

../ : 상위 폴더

 

<절대 경로>

http (https) : 완성된 주소

/ (//) : 최상위 경로(root)

 

예)

http://localhost:5500 (단, 뒤의 포트번호는 변경 가능하고 포트번호마다 다른 프로젝트 일 수 있음)

의 파일 및 폴더 구조 : 

project - images - logo.png

          - css - main.css

          - index.html

경로

index.html에서 나타내는 logo.png의 경로

상대 경로 : ./images/logo.png 또는 images/logo.png

절대 경로 : /images/logo.png 또는 https://sample.Website.Address/images/logo.png

 

main.css에서 나타내는 logo.png의 경로

상대 경로 : ../images/logo.png

절대 경로 : /images/logo.png 또는 https://sample.Website.Address/images/logo.png

 

다음은 이미지 파일의 상대경로를 이용한 예시이다.

index.html의 div태그에 나타내주기 위해 css에서 logo.png의 상대경로를 이용함

div태그에 나타내주기 위해 css에서 logo.png의 상대경로를 이용함

index.html의 div태그에 나타내주기 위해 css에서 logo.png의 절대경로를 이용함

div태그에 나타내주기 위해 css에서 logo.png의 절대경로를 이용함