휴대전화에 맞는 레이아웃 만들기.
페이지는 휴대전화와 태블릿에 스스로 적응합니다. 칸이 넓은 화면에서는 나란히, 작은 화면에서는 쌓입니다. 이 페이지에서는 직접 조정하는 법을 보여줍니다. 화면 크기별로 칸 레이아웃을 정하고, 넓은 화면에서는 순서를 뒤집으며, 일부 기기에서만 요소를 보여줍니다. 예시에서는 네 칸 행을 태블릿에서 2×2로 바꿉니다.
이 비디오는 휴대전화에서 사진을 숨긴 뒤 창을 좁혀 사라지는 모습을 보여줍니다.
시작하기 전에
- 페이지에 네 칸이 같은 행이 필요합니다. 행과 칸(을)를 보세요.
화면 크기별 레이아웃 고르기
- 행에 마우스를 올리고 제어 막대의 격자 아이콘을 클릭하세요. 레이아웃 대화 상자가 Medium devices (≥ 768px) 패널과 함께 열립니다.
- 이제 Add screen size(을)를 클릭하세요. 두 번째 패널이 열리며 Extra small (< 576px)(으)로 설정됩니다.
- 해당 패널의 드롭다운에서 다음을 고르세요: Small devices (≥ 576px).
- 이제 Custom Layout(을)를 클릭하고
1/2 + 1/2 + 1/2 + 1/2(을)를 입력한 뒤 Save(을)를 클릭하세요. - 다음을 클릭하세요: 도구 모음의 Save.
4개의 절반은 네 칸을 모두 유지하고 한 줄에 두 칸씩 배치합니다. 두 칸이 같은 타일은 모든 화면 크기에서 행을 두 칸으로 줄입니다.
결과 화면
데스크톱에서는 네 칸이 여전히 한 줄에 놓입니다. 브라우저 창을 768픽셀 아래로 좁히면 2×2로 감싸집니다. 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 칩은 해당 크기에서만 보여주고 나머지에서는 모두 숨깁니다.
화면 크기
| 레이아웃 대화 상자의 레이블 | 화면 너비 |
|---|---|
| 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픽셀부터 동작합니다. 휴대전화에서 순서를 바꾸려면 대신 편집기에서 칸을 옮기세요.
다음 단계
- 행과 칸: 여기에서 반응형으로 만드는 행을 만드세요.
- 휴대전화나 태블릿에서 페이지 편집: 작은 화면에서 페이지를 확인하고 고치세요.
- 섹션을 끝까지 펼치기: 콘텐츠 너비를 정하세요.