3.1 background-repeat 속성
CSS의 background-repeat와 background-size 속성은 요소 내에서 배경 이미지가 어떻게 반복되고 크기가 조정되는지 제어하는 데 사용돼. 이 속성들은 웹 개발자들에게 시각적으로 매력적인 배경을 만들 수 있는 유연한 도구를 제공해. 각각의 속성을 더 자세히 살펴보자.
background-repeat 속성은 요소 내에서 배경 이미지가 어떻게 반복되는지를 결정해. 기본적으로 배경 이미지는 가로와 세로로 반복돼.
값들
repeat: 이미지가 가로와 세로로 반복돼 (기본값)repeat-x: 이미지가 가로로만 반복돼repeat-y: 이미지가 세로로만 반복돼no-repeat: 이미지가 반복되지 않아
1. repeat 값:
이미지가 가로와 세로로 반복돼.
CSS
.repeat {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat;
border: 1px solid #000;
}
HTML
<div class="repeat">가로와 세로로 반복</div>
2. repeat-x 값:
이미지가 가로로만 반복돼.
CSS
.repeat-x {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat-x;
border: 1px solid #000;
}
HTML
<div class="repeat-x">가로로만 반복</div>
3. repeat-y 값:
이미지가 세로로만 반복돼.
CSS
.repeat-y {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat-y;
border: 1px solid #000;
}
HTML
<div class="repeat-y">세로로만 반복</div>
4. no-repeat 값:
이미지가 반복되지 않아.
CSS
.no-repeat {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: no-repeat;
border: 1px solid #000;
}
HTML
<div class="no-repeat">반복 없음</div>
코드 설명
.repeat: 이미지가 가로와 세로로 반복되어 요소를 모두 채워.repeat-x: 이미지가 가로로만 반복돼.repeat-y: 이미지가 세로로만 반복돼.no-repeat: 이미지는 반복되지 않고 한 번만 표시돼
3.2 background-size 속성
background-size 속성은 배경 이미지의 크기를 제어해. 이미지를 요소에 맞게 크기 조정할 수 있도록 해줘.
값들:
auto: 이미지의 크기가 자동으로 결정돼 (기본값)cover: 이미지를 비율을 유지하면서 요소를 완전히 덮도록 크기 조정해contain: 이미지를 비율을 유지하면서 요소에 완전히 맞도록 크기 조정해- 절대값: 예를 들어, 100px 50px는 이미지의 가로와 세로를 픽셀 단위로 지정해
- 백분율 값: 예를 들어, 50% 50%는 요소 크기의 백분율로 이미지의 가로와 세로를 지정해
1. 기본 크기 (auto):
이미지의 크기가 자동으로 결정돼 (기본값).
CSS
.size-auto {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-size: auto;
border: 1px solid #000;
}
HTML
<div class="size-auto">기본 크기 (auto)</div>
2. cover:
이미지를 비율을 유지하면서 요소를 완전히 덮도록 크기 조정해.
CSS
.size-cover {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: cover;
border: 1px solid #000;
}
HTML
<div class="size-cover">요소를 덮도록 크기 조정 (cover)</div>
3. contain:
이미지를 비율을 유지하면서 요소에 완전히 맞도록 크기 조정해.
CSS
.size-contain {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: contain;
border: 1px solid #000;
}
HTML
<div class="size-contain">완전히 맞도록 크기 조정 (contain)</div>
4. 절대값:
예를 들어, 100px 50px은 이미지의 가로와 세로를 픽셀 단위로 지정해.
CSS
.size-pixels {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: 100px 50px;
border: 1px solid #000;
}
HTML
<div class="size-pixels">픽셀 단위 크기 (100px 50px)</div>
5. 백분율 값:
예를 들어, 50% 50%는 요소 크기의 백분율로 이미지의 가로와 세로를 지정해.
CSS
.size-percent {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: 50% 50%;
border: 1px solid #000;
}
HTML
<div class="size-percent">백분율 크기 (50% 50%)</div>
코드 설명:
.size-auto: 이미지의 크기가 자동으로 결정돼.size-cover: 이미지를 비율을 유지하면서 요소를 완전히 덮도록 크기 조정해. 이미지 일부가 잘릴 수도 있어.size-contain: 이미지를 비율을 유지하면서 요소에 완전히 맞도록 크기 조정해. 이미지는 완전히 보이지만 빈 영역이 있을 수 있어.size-pixels: 이미지의 크기가 픽셀 단위로 지정돼 (가로 100px, 세로 50px).size-percent: 이미지의 크기가 요소 크기의 백분율로 지정돼 (가로 50%, 세로 50%)
3.3 background-repeat와 background-size의 조합
background-repeat와 background-size 속성은 배경 이미지의 원하는 표시 효과를 얻기 위해 함께 자주 사용돼.
사용 예시:
CSS
.combined {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-size: cover;
border: 1px solid #000;
}
HTML
<body>
<div class="combined">배경 이미지가 반복되지 않고 요소를 덮도록 크기 조정</div>
</body>
코드 설명:
background-repeat: no-repeat;: 이미지가 반복되지 않아background-size: cover;: 이미지를 비율을 유지하면서 요소를 완전히 덮도록 크기 조정해. 이미지 일부가 잘릴 수도 있어
GO TO FULL VERSION