HTML 상대경로와 절대경로 표기법

HTML과 CSS에서 이미지를 넣는 방법은 img와 background:url()로 삽입할 수 있습니다. 이 과정에서 경로를 설정해야 하는데 상대경로와 절대경로를 이용할 수 있습니다.

 

상대경로

상대경로

상대경로는 HTML, CSS 파일을 기준으로 경로를 설정하는 방법입니다. 만약, img 태그를 사용하여 jpg 파일을 삽입하고 싶을 때 어떻게 해야 할까요? 일단 img 태그는 HTML에 속하므로 index.html를 참고할 것입니다. index.html 파일은 루트에 있고 jpg 파일은 images 안에 logos에 있습니다. 그렇다면 최종 경로는 './images/logos/xxx.jpg'가 될 것입니다.

 

마찬가지로 CSS에서 jpg 파일을 삽입하고 싶을 때 어떻게 해야 할까요? index.css 파일은 styles에 있기 때문에 루트로 간다음에 images안에 logos에 도달해야 할 것입니다. 그렇다면 최종 경로는 '../images/logos/xxx.jpg'가 될 것입니다.

 

절대경로

절대경로

절대경로는 절대로 바뀌지 않는 경로를 의미합니다. 상대경로에서는 HTML 혹은 CSS 파일에 따라 경로를 다르게 설정해야 했지만 절대경로는 도메인을 기준으로 하기 때문에 다르게 설정할 필요가 없습니다. 도메인을 기준으로 jpg 파일로 가기 위해서는 'https:dahanweb.tistory.com' 혹은 '/'로 적고 경로를 설정하면 됩니다. 위 사진과 같은 구조로 되어있다면 '/images/logos/xxx.jpg'의 형태로 설정하면 됩니다.