[CSS] 상대경로, 절대경로

 

 

작업을 진행하다보니 CSS에 사용하고자 하는 이미지의 경로를 작성해주어야하는 일이 발생하였다.

이때, 경로를 작성하는 방법에 대해 정확히 알지 못해 필요한 이미지 소스를 참조하지 못하는 경우가 생겼다.

 

이런 경우를 방지할 목적으로 해당 포스팅을 작성한다.

 

우선 절대경로와 상대경로의 대략적인 의미는 아래와 같다.

 

출처: https://velog.io/@shin6403/CSS-%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-vs-%EC%83%81%EB%8C%80%EA%B2%BD%EB%A1%9C

 

 

 

경로 작성 방법을 간단히 정리하면 아래와 같다.

 

1. 폴더명 뒤에 슬레쉬(/)를 붙여 구분한다.

2. 참조하려는 소스와 작업중인 파일이 동일한 디렉토리에 있다면, 소스명 만으로 참조가 가능하다.

3. 참조하려는 소스가 상위폴더에 있다면 구분자(../)를 통해 상위 디렉토리를 의미할 수 있다. 이때 구분자는 연달아서 작성 가능하다.

 

 

 

 

아래에 해당 참고한 블로그 링크를 통해 더 자세한 내용을 확인할 수 있다.

 

https://velog.io/@shin6403/CSS-%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C-vs-%EC%83%81%EB%8C%80%EA%B2%BD%EB%A1%9C

CSS 이미지(절대경로 vs 상대경로)