background-size
배경 이미지가 컨테이너를 채우는 방식을 제어합니다. bsc는 전체를 채우며(잘릴 수 있음), bsct는 전체를 보여줍니다(레터박스 발생 가능). 실무에서는 bsc를 90% 이상 사용합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
bsc | background-size: cover | 컨테이너를 완전히 채움 (이미지가 잘릴 수 있음) |
bsct | background-size: contain | 이미지 전체를 보여줌 (여백이 생길 수 있음) |
사용 예시
히어로 배너, 카드 썸네일 등 배경 이미지를 채울 때 bsc와 bgpc, bgrn을 함께 사용합니다.
<!-- 히어로 배너 -->
<div class="bsc bgrn bgpc h40rem">
<h1>Hero Title</h1>
</div>
<!-- 카드 썸네일 -->
<div class="bsc bgrn bgpc h20rem br8px"></div>
<!-- 로고 등 전체를 보여줘야 할 때 -->
<div class="bsct bgrn bgpc h10rem"></div>팁
cover vs contain
bsc는 빈 공간 없이 채우지만 이미지가 잘릴 수 있고, bsct는 이미지 전체를 보여주지만 빈 공간이 생길 수 있습니다.
필수 조합
배경 이미지에는 bsc bgrn bgpc를 세트로 사용하는 것이 일반적입니다.