CSS에서 배경 이미지 설정

1. background:url()을 사용하여 CSS에서 배경 이미지 설정
2. 상대 경로 /image/picture를 사용하여 CSS에서 배경 이미지 설정
3. 상대 경로 ../image/picture를 사용하여 CSS에서 배경 설정

이 기사에서는 CSS에서 배경 이미지를 설정하는 방법을 소개합니다. 배경 이미지가 올바르게 표시되도록 이미지의 경로를 설정하는 방법에 대해 설명합니다. 또한 다양한 상대 경로에 대해 설명합니다.

background:url()을 사용하여 CSS에서 배경 이미지 설정

background 속성을 사용하여 CSS에서 배경 이미지를 설정할 수 있습니다. URL() 함수는 이미지의 파일 경로를 배경 이미지로 유지합니다. background 속성은 배경과 관련된 여러 다른 속성의 축약형입니다. 이러한 속성은 순서대로 background-color, background-image, background-repeat, background-attachment 및 background-position입니다. background 속성을 사용하여 이러한 모든 속성에 대한 값을 짧은 방법으로 할당할 수 있습니다.

우리가 틀릴 수 있는 중요한 점은 URL() 함수에서 이미지의 경로를 작성하는 동안입니다. 이미지의 위치를 ​​알고 있어야 하며 URL() 함수에 작성된 경로는 CSS 파일에 상대적이어야 합니다. HTML 파일 자체에 CSS를 작성하는 경우 경로는 HTML 파일에 상대적이어야 합니다.

아래 예에서 picture라는 이미지는 image 폴더 안에 있습니다. image 폴더와 다음 CSS 파일 style.css는 같은 폴더에 있습니다. 따라서 다음 코드는 배경 이미지를 설정합니다.

폴더 구조는 아래와 같습니다.

web
├── style.css
├── HTML
│ └── test.html
└── image
 └── picture

예제 코드:

body {
    background: url(image/picture);
}

상대 경로 /image/picture를 사용하여 CSS에서 배경 이미지 설정

/image/picture 파일 경로 형식을 사용하여 CSS에서 배경 이미지를 설정할 수 있습니다. 이러한 형식에서 이미지는 image 폴더 안에 있습니다. 이미지 폴더는 현재 웹의 루트에 있습니다.

아래 예에서는 picture 이미지를 배경 이미지로 설정했습니다. CSS 파일의 위치는 이 형식에서 중요하지 않습니다. CSS 파일에 상대적인 파일 경로를 작성할 필요가 없습니다. 파일 경로는 현재 웹의 루트를 기준으로 작성됩니다. 이미지 폴더가 루트 디렉토리에 있음을 의미합니다.

예제 코드:

body {
    background: url(/image/picture);
}

상대 경로 ../image/picture를 사용하여 CSS에서 배경 설정

../ 표기법을 사용하여 디렉토리 구조에서 한 수준으로 다시 이동할 수 있습니다. ../ 표기법은 CSS에서 배경을 설정하는 동안 URL() 함수에 상대 파일 경로를 쓰는 데 사용할 수 있습니다.

예를 들어, html 폴더에 test.html HTML 파일이 있습니다. html 폴더는 web 폴더 안에 있습니다. 이미지 picture는 web 폴더 안의 image 폴더 안에 있습니다. 이러한 디렉토리 구조에서 다음 코드를 사용하여 배경을 설정할 수 있습니다.

폴더 구조는 아래와 같습니다.

web
├── CSS
├── HTML
│ └── test.html
└── image
 └── picture

아래 예에서는 HTML 파일 자체에 CSS를 작성했습니다. ../ 표기법은 html 폴더에서 web 폴더로 다시 이동합니다. 그런 다음 image 폴더를 찾은 다음 image 폴더 내 picture 파일을 찾습니다. 이런 식으로 상대 경로를 사용하여 CSS에서 배경 이미지를 설정할 수 있습니다.

예제 코드:

body {
    background: url(../image/picture);
}