CSS 이미지 경로 규칙

이 문서는 스타일시트 또는 CSS 파일의 이미지와 같은 다른 파일을 연결하는 방법과 파일 경로를 지정하는 가장 좋은 방법에 대한 지침입니다.

파일 경로 개요

파일 경로는 웹 사이트의 폴더 계층 구조 내에서 파일의 위치를 식별합니다. 외부 파일을 참조할 때 다음과 같은 파일 경로:

• 웹 사이트
• 이미지
• 자바 스크립트

경로에는 두 가지 유형이 있습니다.

1. 절대경로
2. 상대 경로

예제가 있는 절대 경로

절대 경로는 현재 파일의 위치에 관계없이 파일의 전체 URL을 표시하는 파일 경로입니다. 예를 들어:

background-image: url(https://www.exampleSite.com/images/image1.png);

예제가 있는 상대 경로

상대 경로는 현재 폴더의 파일 경로를 나타내는 파일 경로입니다. 예를 들어:

background-image: url(/images/image1.png);

현재 웹사이트 루트 디렉토리의 images 폴더에 있습니다. 다른 예를 고려하십시오.

background-image: url(images/image1.png);

현재 폴더에 있는 images 폴더에 있는 image1,의 경로입니다.

background-image: url(../images/image1.png);

현재 디렉터리 이전의 디렉터에 있는 images 폴더에 있는 image1,의 경로입니다. ../는 현재 디렉토리에서 한 단계 위를 의미합니다. 디렉토리 계층 구조를 더 많이 올라가고 싶을수록; 더 많은 ../를 사용할 수 있습니다.

경로 지정 모범 사례

파일 경로를 지정하는 가장 좋은 방법은 상대 경로를 사용하는 것입니다. 상대 파일 경로를 사용하면 웹 페이지가 현재 기본 URL에 연결되지 않습니다. 대신, 모든 링크는 개인용 컴퓨터(localhost) 및 향후 생성하는 모든 공용 도메인에서 작동합니다.

따라서 웹 사이트의 HTML 및 CSS 페이지에서 파일 경로를 지정할 때 항상 주의를 기울이고 나중에 기본 URL이 변경될 때 경로를 변경할 필요가 없도록 경로를 제공하는 것이 좋습니다.