개요
Site Settings > Responsive 탭에서 반응형 브레이크포인트를 설정합니다. ZenBlocks는 PC / MD(중간) / TB(태블릿) / SP(스마트폰) 4단계의 브레이크포인트를 지원합니다. PC는 항상 활성화되어 있으며, 나머지 3개는 개별적으로 켜고 끌 수 있습니다. 변경 후에는 반드시 저장하고 페이지를 새로고침합니다.
기본값
| 레벨 | 약칭 | 기본 브레이크포인트 | 상태 |
|---|---|---|---|
| PC (데스크톱) | PC | — | 항상 활성 |
| Medium (중간) | MD | 1140px | 토글 가능 |
| Tablet (태블릿) | TB | 840px | 토글 가능 |
| Smartphone (스마트폰) | SP | 540px | 토글 가능 |
PC는 비활성화할 수 없으며, 가장 넓은 화면 너비에 해당하는 기본 레벨입니다.
설정 화면 여는 방법
다음 3단계로 Responsive 설정 화면을 엽니다.
- 블록 에디터 상단 헤더에서 ZenBlocks 버튼을 클릭합니다.
- Site Settings 패널이 열립니다.
- Responsive 탭을 선택합니다.
설정 순서
다음 5단계로 브레이크포인트를 설정합니다.
- 위의 방법으로 Responsive 탭을 엽니다.
- 사용할 브레이크포인트(MD, TB, SP)의 토글을 켭니다.
- 필요에 따라 각 브레이크포인트의 픽셀 값을 변경합니다.
- Save 버튼을 클릭하여 변경 사항을 저장합니다.
- 페이지를 새로고침하여 변경 사항을 적용합니다.
확인 포인트
- 토글을 켠 브레이크포인트가 에디터의 반응형 프리뷰에 표시됩니다.
- 변경한 픽셀 값이 저장 후에도 유지됩니다.
- 블록의 반응형 설정에서 활성화한 레벨별 옵션이 나타납니다.
- 프런트엔드에서 설정한 브레이크포인트 기준으로 레이아웃이 전환됩니다.
주의 사항
- 브레이크포인트 값을 변경하면 기존에 설정한 반응형 스타일에 영향을 줄 수 있습니다.
- 값을 변경한 후에는 반드시 Save를 클릭하고 페이지를 새로고침합니다.
- 브레이크포인트를 비활성화해도 해당 레벨에 설정한 스타일 데이터는 삭제되지 않습니다.
- MD, TB, SP의 값은 서로 겹치지 않도록 설정합니다.
브레이크포인트를 재검토해야 하는 경우
다음과 같은 상황에서는 브레이크포인트 설정을 재검토하는 것을 권장합니다.
- 테마를 변경한 경우
- 사이트 레이아웃을 대폭 수정한 경우
- 특정 디바이스에서 레이아웃이 깨지는 경우
- 새로운 디바이스 크기를 지원해야 하는 경우