CSS를 사용한 확장 가능한 배경 이미지

Naila Saad Siddiqui 2023년6월20일

CSS CSS Background

웹 페이지의 CSS 스타일링
CSS 배경 크기 속성

이 간략한 문서는 HTML 요소의 배경 이미지 스타일 지정에 중점을 두고 CSS를 사용하여 HTML 페이지의 스타일을 지정하는 방법에 대해 설명합니다.

웹 페이지의 CSS 스타일링

웹 페이지에서 CSS를 사용하는 방법에는 여러 가지가 있습니다.

인라인 CSS: 인라인 CSS는 모든 HTML 요소에 스타일 속성을 사용하고 해당 요소에 특정 스타일 속성을 적용한다는 의미입니다.
내부 CSS: 내부 CSS는 웹 사이트의 단일 페이지에 스타일을 적용하려는 경우에 사용됩니다. 따라서 <style> 요소로 묶인 해당 페이지에 스타일 속성을 작성합니다.
외부 CSS: 외부 CSS는 모든 웹사이트 페이지에 스타일을 적용하는 데 사용되는 CSS 유형입니다. 따라서 다양한 유형의 선택기와 스타일 속성을 포함하는 스타일 시트를 만들고 웹 사이트의 모든 웹 페이지에 해당 스타일 시트를 포함합니다.

다양한 유형의 스타일을 적용하기 위한 여러 CSS 속성이 있습니다. 이 기사에서는 요소의 배경 이미지 크기를 설정하는 데 사용되는 background-size 속성에 중점을 둘 것입니다.

CSS `배경 크기` 속성

이 CSS 속성은 배경(예: 이미지)을 적용하고 해당 요소 내에서 해당 배경 이미지의 크기나 위치를 설정해야 할 때 사용됩니다. 배경 크기를 설정하는 네 가지 방법이 있습니다.

키워드를 사용하여 크기를 설정합니다. 키워드는 auto, cover 및 contain입니다.
너비만 지정하고 높이는 자동으로 설정되는 단일 값 구문을 사용합니다.
너비와 높이 값을 제공하는 두 개의 값 구문을 사용합니다.
배경 크기에 여러 값을 사용하십시오.

배경 크기 속성의 구문입니다.

background-size: auto|contain|cover|initial|inherit|percentage|length

예어	정의
`auto`	배경 이미지가 원래 크기로 표시되는 기본값입니다.
`contain`	이 값에서 배경 이미지는 요소에서 완전히 보이도록 크기가 조정됩니다.
`cover`	이 값에서 배경 이미지는 늘이거나 가장자리를 잘라내어 요소 컨테이너를 채우도록 크기가 조정됩니다.
`initial`	기본값을 설정합니다.
`inherit`	DOM에서 부모 요소의 크기를 상속합니다.
`percentage`	일부 백분율 값을 사용하여 크기를 지정합니다.
`length`	`px`와 같은 단위로 값을 설정하는 것입니다. 하나가 지정되면 다른 하나는 `자동`으로 설정됩니다.

아래 예에서 위에서 설명한 값 중 일부를 사용합니다.

다음 예제에서는 단락을 포함하는 div 요소를 생성했습니다. div 요소에 배경 이미지를 적용한 다음 모든 값의 데모를 얻기 위해 다양한 크기를 설정합니다.

코드 - HTML:

<body>
    <h2>background-size: 72% 52%:</h2>
    <div id="container1">
        <p>This div has a background-size of 72% and 52%.</p>
        <br/><br/>
    </div>
    <h2>background-size: 100% 100%:</h2>
    <div id="container2">
        <p>This div has a background-size of 100% and 100%.</p>
        <br/><br/>
    </div>
</body>

코드 - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: 72% 52%;
    background-repeat: no-repeat;
}
#container2 {
    background: url(/img/DelftStack/logo.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

이 CSS에서는 두 개의 서로 다른 id-selector를 만들고 서로 다른 속성을 적용했습니다. container1,에서 배경 이미지가 너비의 72%, 높이의 52%를 차지하도록 설정했습니다.

반면 container2에서는 배경 이미지의 너비를 100%, 높이를 100%로 설정했습니다.

다음 예에서는 background-size의 cover 값을 사용합니다. HTML 페이지에는 하나의 div 컨테이너만 있으면 충분합니다.

코드 - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
}

코드 - HTML:

<body>
    <h2>background-size: 72% 52%:</h2>
    <div id="container1">
        <p>This div has a background-size of 72% and 52%.</p><br/><br/>
    </div>
</body>

전체 div 요소를 채우기 위해 배경 이미지가 덮여 있는 것을 볼 수 있습니다.

결과를 보기 위해 다음 예제에서 속성 값을 contain으로 사용합니다.

코드 - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
}

배경 이미지는 div 요소에서 완전히 볼 수 있으며 전체 요소를 덮도록 늘어나지 않습니다.

따라서 배경 크기 속성을 설정하고 필요와 요구 사항에 따라 이미지를 늘리거나 볼 수 있게 만드는 방법을 확인할 수 있습니다. 이러한 속성은 div 요소와 마찬가지로 모든 HTML 요소에 적용할 수 있습니다.

웹 페이지의 CSS 스타일링

CSS 배경 크기 속성

관련 문장 - CSS Background

CSS `배경 크기` 속성