CSS 파일의 상대 경로는 CSS 파일을 기준으로 합니까?

CSS로 작업할 때 이미지 및 기타 파일과 같은 외부 파일을 참조하세요. CSS 파일은 일반적인 관행입니다. 적절한 파일 위치를 찾으려면 이러한 참조의 상대 경로를 이해하는 것이 중요합니다.

CSS의 상대 경로: 자세히 살펴보기

CSS 파일의 상대 경로는 다음을 기준으로 합니다. CSS 파일을 사용하는 HTML 파일이 아닌 CSS 파일 자체입니다. 즉, 이미지나 다른 파일의 경로를 지정할 때 CSS 파일이 있는 디렉터리에서 시작하는 경로를 제공해야 합니다.

예제 이해하기

이 개념을 보여주기 위해 다음 레이아웃을 고려하십시오.

• 페이지: page.htm(위치: 중요하지 않음)
• CSS: /resources/css/styles. css
• 이미지: /resources/images/image.jpg

CSS 파일(styles.css)에서:

div {
  background-image: url('../images/image.jpg');
}

이 예에서 CSS 파일의 이미지(image.jpg) 경로는 ../로 시작합니다. 이는 CSS 파일(styles.css) 위치에서 "한 디렉터리로 이동"한 다음 이미지가 저장된 이미지 디렉터리로 이동하는 것을 의미합니다.