웹 개발을 하다 보면 배경 이미지를 요소에 어떻게 맞출지 고민하게 됩니다. CSS의 background-size 속성은 배경 이미지의 크기를 조절하는 데 사용됩니다. 이번 글에서는 background-size 속성의 다양한 값과 그 동작 방식을 예제와 함께 알아보겠습니다.
background-size 속성 값 설명
-
auto:
- 의미: 배경 이미지의 원본 크기를 유지합니다.
- 효과: 이미지가 요소의 크기에 관계없이 원래 크기로 표시됩니다.
-
length:
- 의미: 두 개의 값을 넣으면 첫 번째는 너비, 두 번째는 높이 값을 의미합니다. 하나의 값을 넣으면 너비 값을 뜻하며, 높이는 원본 비율에 따라 자동으로 정해집니다.
- 효과: 지정된 크기로 이미지가 조정됩니다. 예를 들어
300px 400px으로 설정하면 너비가 300px, 높이가 400px이 됩니다.
-
cover:
- 의미: 배경 이미지가 요소를 완전히 덮도록 비율에 맞게 확대 또는 축소됩니다.
- 효과: 이미지의 비율이 유지되며, 요소의 크기에 맞추기 위해 이미지의 일부가 잘릴 수 있습니다.
-
contain:
- 의미: 배경 이미지가 요소 내부에 맞게 확대 또는 축소됩니다. 이미지의 모든 부분이 요소 내부에 보이도록 조정됩니다.
- 효과: 이미지의 비율이 유지되며, 요소 안에서 이미지가 찌그러지거나 잘리지 않습니다. 요소의 크기에 맞추기 위해 여백이 생길 수 있습니다.
-
100%:
- 의미: 배경 이미지의 가로 크기를 요소의 너비에 맞추고, 세로 크기는 자동으로 조정됩니다.
- 효과: 이미지의 비율이 유지되며, 가로 크기를 요소의 너비에 맞추기 때문에 세로 방향으로 일부 잘릴 수 있습니다.
-
100% 100%:
- 의미: 배경 이미지의 가로와 세로 크기를 모두 요소의 크기에 맞추어 100%로 설정합니다.
- 효과: 이미지의 비율이 유지되지 않아 왜곡될 수 있습니다.
HTML 및 CSS 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Size Example</title>
<style>
.example {
width: 300px;
height: 200px;
border: 1px solid #000;
background-image: url('example-image.jpg');
background-repeat: no-repeat;
background-position: center;
}
.size-auto {
background-size: auto;
}
.size-300-400 {
background-size: 300px 400px;
}
.size-80 {
background-size: 80%;
}
.size-cover {
background-size: cover;
}
.size-contain {
background-size: contain;
}
.size-100 {
background-size: 100%;
}
.size-100-100 {
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="example size-auto">background-size: auto;</div>
<div class="example size-300-400">background-size: 300px 400px;</div>
<div class="example size-80">background-size: 80%;</div>
<div class="example size-cover">background-size: cover;</div>
<div class="example size-contain">background-size: contain;</div>
<div class="example size-100">background-size: 100%;</div>
<div class="example size-100-100">background-size: 100% 100%;</div>
</body>
</html>결과 화면
이 예제를 통해 같은 이미지가 다양한 background-size 속성 값에 따라 다르게 적용되는 것을 확인할 수 있습니다.
- auto: 원본 크기를 유지하여 이미지가 표시됩니다.
- 300px 400px: 이미지가 지정된 크기로 조정됩니다.
- 80%: 이미지의 너비가 요소의 80%로 조정되고, 높이는 비율에 맞춰 자동으로 조정됩니다.
- cover: 이미지의 비율을 유지하면서 요소를 완전히 덮습니다. 이미지의 일부가 잘릴 수 있습니다.
- contain: 이미지의 비율을 유지하면서 요소 내부에 맞게 조정됩니다. 여백이 생길 수 있습니다.
- 100%: 이미지의 가로 크기가 요소의 너비에 맞춰 100%로 설정되고, 세로 크기는 자동으로 조정됩니다. 이미지의 비율이 유지되며, 세로 방향으로 일부 잘릴 수 있습니다.
- 100% 100%: 이미지의 가로와 세로 크기를 모두 요소의 크기에 맞춰 100%로 설정합니다. 이미지가 왜곡될 수 있습니다.
결론
background-size 속성의 다양한 값을 활용하여 배경 이미지를 효과적으로 조정할 수 있습니다. 특히, 단일 값 100%와 두 개의 값 100% 100%의 차이를 이해하는 것이 중요합니다. 이를 통해 원하는 디자인을 더욱 세밀하게 조정할 수 있습니다.
추가로 아래의 사이트에서 예제를 보여주니,
참고하면 이해가 쉬울것입니다.
https://www.w3schools.com/cssref/playit.php?filename=playcss_background-size&preval=cover
1인개발자가 되겠다