휴대전화에 맞게 레이아웃 조정하기.
페이지는 휴대전화와 태블릿에 스스로 적응합니다. 넓은 화면에서는 컬럼이 나란히, 작은 화면에서는 쌓입니다. 이 페이지에서는 직접 제어하는 법을 설명합니다. 화면 크기마다 컬럼 레이아웃을 정하고, 넓은 화면에서 순서를 뒤집으며, 특정 기기에서만 요소를 표시합니다. 예제에서는 네 컬럼의 로우를 태블릿에서 2×2로 바꿉니다.
동영상에서는 사진을 휴대전화에서 숨긴 뒤 창을 좁혀 사라지는 모습을 보여줍니다.
시작하기 전에
- 페이지에 동일한 컬럼 네 개의 로우가 있습니다. 자세한 내용은 Rows and columns을 참조합니다.
화면 크기별 레이아웃 선택하기
- 로우에 마우스를 올리고 컨트롤 표시줄의 격자 아이콘을 클릭합니다. Medium devices (≥ 768px) 패널이 있는 레이아웃 대화상자가 열립니다.
- 버튼 Add screen size를 클릭합니다. Extra small (< 576px)로 설정된 두 번째 패널이 열립니다.
- 해당 패널의 드롭다운에서 Small devices (≥ 576px)를 선택합니다.
- 항목 Custom Layout을 클릭하고
1/2 + 1/2 + 1/2 + 1/2를 입력한 뒤 Save를 클릭합니다. - 도구 모음에서 Save를 클릭합니다.
절반 네 개는 네 컬럼을 그대로 두고 줄에 두 개씩 배치합니다. 동일한 컬럼 두 개 타일은 모든 화면 크기에서 로우를 두 컬럼으로 줄입니다.
표시 내용
데스크톱에서는 네 컬럼이 여전히 한 줄에 있습니다. 브라우저 창을 768픽셀 미만으로 좁히면 둘씩 감싸고, 576픽셀 미만에서는 한 줄에 하나씩 쌓이며, 에디터에서 보이는 순서대로 표시됩니다.
레이아웃은 해당 화면 크기부터 적용되며, 더 큰 화면 크기에 자체 레이아웃이 있으면 거기까지입니다. 새 로우는 모두 Medium devices (≥ 768px)용 레이아웃 하나로 시작하므로 휴대전화와 작은 태블릿에서는 컬럼이 쌓입니다. 패널의 Remove screen size는 해당 레이아웃을 다시 삭제합니다.
넓은 화면에서 순서 뒤집기
로우의 More 메뉴를 열고 Settings를 선택한 뒤 Mirror row를 켭니다. 768픽셀 이상에서는 컬럼이 역순으로 표시되고, 작은 화면에서는 에디터 순서대로 쌓입니다.
사진과 텍스트가 번갈아 나오는 로우에 사용합니다. 에디터에서는 사진을 먼저 두어 휴대전화에서는 텍스트 위에 사진이 나오게 하고, 한 줄 걸러 미러링하여 데스크톱에서는 사진이 오른쪽에 나오게 합니다.
화면 크기별로 요소 표시 또는 숨기기
- 요소의 More 메뉴를 열고 Settings를 선택합니다.
- 칩은 다음 그룹에서 고릅니다. HTML classes 아래 Responsive Visibility 그룹에서 칩을 고릅니다(예: Hidden on extra small devices, phones (<576px)).
- 버튼 Save를 클릭합니다.
각 Hidden on 칩은 하나의 화면 크기에서만 요소를 숨깁니다. 각 Visible on 칩은 해당 한 크기에서만 표시하고 나머지에서는 모두 숨깁니다.
화면 크기
| Label in the layout dialog | Screen width |
|---|---|
| Extra small (< 576px) | 세로 모드의 휴대전화 |
| Small devices (≥ 576px) | 큰 휴대전화, 작은 태블릿 |
| Medium devices (≥ 768px) | 태블릿 |
| Large devices (≥ 992px) | 노트북 |
| Extra large (≥ 1200px) | 데스크톱 |
| Extra extra large (≥ 1400px) | 대형 데스크톱 |
요소 Positioned layers에는 자체 Responsive 토글이 있으며, 기본적으로 꺼져 있습니다. 창 너비에 따라 캔버스 높이와 텍스트를 조절하려면 켭니다. 구성이 비율을 유지합니다.
변경이 보이지 않는 경우
- 태블릿에서도 컬럼이 계속 쌓입니다. 해당 화면 크기의 레이아웃이 로우에 없어 768픽셀 미만에서 컬럼이 쌓입니다. 로우의 격자 아이콘을 열고 Add screen size를 클릭한 뒤 Small devices (≥ 576px)를 고릅니다.
- 모든 화면 크기에서 요소가 사라졌습니다. 두 개의 Visible on 칩이 있으며, 각각 서로가 표시하는 곳에서 숨깁니다. 하나만 유지하거나 숨길 크기마다 Hidden on 칩을 하나씩 사용합니다.
- 휴대전화에서 Mirror row가 동작하지 않습니다. Mirror row는 768픽셀 이상에서 작동합니다. 휴대전화에서 순서를 변경하려면 에디터에서 컬럼을 직접 이동합니다.
다음 단계
- Rows and columns에서 여기에 반응형으로 만드는 로우를 만듭니다.
- Edit a page on your phone or tablet에서 작은 화면에서 페이지를 확인하고 수정합니다.
- Run a section edge to edge에서 콘텐츠 너비를 정합니다.