비율
비율 (Ratios)
.ratio 헬퍼로 <iframe>, <embed>, <video>, <object> 같은 외부 콘텐츠의 화면 비율(aspect ratio)을 관리하는 방법을 설명하는 문서예요.
출처: 문서
본문
소개 (About)
ratio 헬퍼를 사용해서 <iframe>, <embed>, <video>, <object> 같은 외부 콘텐츠의 화면 비율을 관리할 수 있어요. 이 헬퍼는 일반적인 표준 HTML 자식 요소(예: <div>나 <img>)에도 사용할 수 있어요. 스타일은 부모 .ratio 클래스에서 자식에게 직접 적용돼요.
화면 비율은 Sass 맵에 선언되고 CSS 변수를 통해 각 클래스에 포함돼요. 이 덕분에 커스텀 화면 비율도 가능해요.
프로 팁! <iframe>에 frameborder="0"은 필요 없어요. Reboot가 대신 처리해 주거든요.
예시 (Example)
.ratio와 화면 비율 클래스를 가진 부모 요소에 <iframe> 같은 임베드 요소를 감싸세요. 바로 아래 자식 요소는 우리의 전체 선택자 .ratio > * 덕분에 자동으로 크기가 조정돼요.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
화면 비율 (Aspect ratios)
화면 비율은 수정자(modifier) 클래스로 커스터마이즈할 수 있어요. 기본적으로 다음 ratio 클래스가 제공돼요.
<div class="ratio ratio-1x1">
<div>1x1</div>
</div>
<div class="ratio ratio-4x3">
<div>4x3</div>
</div>
<div class="ratio ratio-16x9">
<div>16x9</div>
</div>
<div class="ratio ratio-21x9">
<div>21x9</div>
</div>
커스텀 비율 (Custom ratios)
각 .ratio-* 클래스는 선택자에 CSS 커스텀 속성(또는 CSS 변수)을 포함해요. 이 CSS 변수를 재정의해서 직접 약간의 계산을 통해 즉석에서 커스텀 화면 비율을 만들 수 있어요.
예를 들어 2x1 화면 비율을 만들려면 .ratio에 --bs-aspect-ratio: 50%를 설정하세요.
<div class="ratio" style="--bs-aspect-ratio: 50%;">
<div>2x1</div>
</div>
이 CSS 변수는 중단점에 걸쳐 화면 비율을 쉽게 수정할 수 있게 해 줘요. 아래는 4x3으로 시작하지만, 중간(medium) 중단점에서 커스텀 2x1로 바뀌는 예시예요.
.ratio-4x3 {
@include media-breakpoint-up(md) {
--bs-aspect-ratio: 50%; // 2x1
}
}
<div class="ratio ratio-4x3">
<div>4x3, then 2x1</div>
</div>
Sass 맵 (Sass maps)
_variables.scss 안에서 사용하고 싶은 화면 비율을 바꿀 수 있어요. 여기 우리 기본 $aspect-ratios 맵이 있어요. 맵을 원하는 대로 수정하고 Sass를 다시 컴파일해서 사용하세요.
$aspect-ratios: (
"1x1": 100%,
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%)
);