Bulma 반응형
Bulma 반응형 (Responsiveness)
Bulma의 모든 요소는 모바일 우선(mobile-first) 에디어 세로로 읽는 방식에 최적화되어 있어요. 이번 문서에서는 Bulma의 브레이크포인트와 반응형 수식어, 그리고 비활성화 방법까지 정리해 볼게요.
출처: 문서
본문
Bulma의 모든 요소는 모바일 우선 방식이며 세로 읽기에 최적화되어 있어요. 따라서 기본적으로 모바일에서는:
columns는 세로로 쌓입니다level컴포넌트는 자식 요소를 세로로 쌓아서 보여줘요nav메뉴는 숨겨집니다
하지만 columns나 level에 is-mobile 수식어를 붙이면 가로 배치를 강제할 수 있어요.
브레이크포인트 (Breakpoints)
Bulma에는 4개의 브레이크포인트가 있으며, 이를 통해 5개의 화면 크기를 정의합니다.
mobile:768px까지tablet:769px부터desktop:1024px부터widescreen:1216px부터fullhd:1408px부터
이 브레이크포인트들을 활용하기 위해 Bulma는 9개의 반응형 수식어를 제공해요.
| Mobile | Tablet | Desktop | Widescreen | FullHD | |
|---|---|---|---|---|---|
up to 768px |
between 769px and 1023px |
between 1024px and 1215px |
between 1216px and 1407px |
1408px and above |
|
mobile |
- | ||||
tablet |
- | ||||
desktop |
- | ||||
widescreen |
- | ||||
fullhd |
- | ||||
tablet-only |
- | ||||
desktop-only |
- | ||||
widescreen-only |
- | ||||
touch |
- | ||||
until-widescreen |
- | - | |||
until-fullhd |
- | - | - |
이 브레이크포인트를 쉽게 사용할 수 있도록 Bulma는 사용하기 간편한 반응형 수식어(mixins) 를 제공합니다.
브레이크포인트 비활성화 (Disabling breakpoints)
기본적으로 $widescreen과 $fullhd 브레이크포인트는 활성화되어 있어요. 해당 Sass 불리언 값을 false로 설정하면 비활성화할 수 있습니다.
// widescreen 브레이크포인트 비활성화
$widescreen-enabled: false;
// fullhd 브레이크포인트 비활성화
$fullhd-enabled: false;