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