로우 추가하기.
로우는 섹션을 컬럼으로 나누므로 콘텐츠를 나란히 놓을 수 있습니다. 세 가지 서비스, 텍스트 옆의 사진, 기사 옆의 사이드바가 그 예입니다. 열두 가지 프리셋 중에서 분할을 고르고 휴대전화에는 별도 레이아웃을 지정할 수 있습니다. 로우 추가는 이 페이지에서 설명합니다. 컬럼 안의 로우는 Nesting을 참조합니다.
로우 추가하기
예제에서는 팀이 제공하는 서비스마다 하나씩, 세 컬럼의 로우를 섹션에 추가합니다.
- 섹션에서 +를 클릭하여 요소 선택기를 엽니다.
- 항목 Row를 Layout 탭에서 고릅니다. 동일한 컬럼 두 개가 딸려 옵니다.
- 로우 컨트롤 표시줄의 격자 아이콘(Column layout)을 클릭하고 세 개의 동일한 컬럼 같은 컬럼 프리셋을 고른 뒤 Save를 클릭합니다.
- 컬럼 안의 +를 클릭하여 콘텐츠를 추가합니다.
- 도구 모음에서 Save를 클릭하여 페이지를 저장합니다.
격자 아이콘은 로우의 드래그 핸들 바로 뒤에 있습니다. 프리셋을 클릭하면 즉시 컬럼이 바뀝니다. Cancel을 클릭하면 이전 레이아웃으로 돌아갑니다.
표시 내용
세 서비스가 나란히 표시되며, 각 컬럼은 섹션 너비의 3분의 1을 차지합니다. 너비가 768픽셀 미만인 화면에서는 컬럼이 쌓입니다. 각 컬럼이 전체 너비를 차지하며, 페이지에서의 순서대로 표시됩니다.
컬럼은 콘텐츠만큼만 높으므로 짧은 컬럼은 이웃보다 먼저 끝납니다. 컬럼에 배경 색상이 들어가면 눈에 띕니다. Equal-height columns으로 높이를 맞춥니다.
로우 설정하기
컬럼 레이아웃
격자 아이콘을 클릭하면 자체 레이아웃이 있는 화면 크기마다 패널이 열립니다. 모든 패널에 다음 열두 가지 프리셋이 타일로 표시됩니다.
| Preset | Layout |
|---|---|
| 1/1 | 전체 너비 컬럼 하나입니다. |
| 1/2 + 1/2 | 동일한 컬럼 두 개입니다. |
| 1/3 + 1/3 + 1/3 | 동일한 컬럼 세 개입니다. |
| 1/4 + 1/4 + 1/4 + 1/4 | 동일한 컬럼 네 개입니다. |
| 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | 동일한 컬럼 여섯 개입니다. |
| 1/4 + 1/2 + 1/4 | 좁게, 넓게, 좁게입니다. |
| 1/6 + 4/6 + 1/6 | 좁게, 매우 넓게, 좁게입니다. |
| 1/4 + 3/4 | 왼쪽 4분의 1, 오른쪽 4분의 3입니다. |
| 3/4 + 1/4 | 왼쪽 4분의 3, 오른쪽 4분의 1입니다. |
| 2/3 + 1/3 | 왼쪽은 넓게, 오른쪽은 좁게입니다. |
| 1/3 + 2/3 | 왼쪽은 좁게, 오른쪽은 넓게입니다. |
| 5/12 + 7/12 | 왼쪽은 약간 좁게, 오른쪽은 약간 넓게입니다. |
다른 분할에는 Custom Layout을 클릭하고 너비를 분수로
입력합니다(예: 1/6 + 5/6). 합이 1을 초과하는 너비는 새 줄로
넘어갑니다. 대화상자를 다시 열면 Custom Layout이 표시되고
레이아웃이 나옵니다(예: Custom Layout (1/6 + 5/6)).
화면 크기별 레이아웃
첫 번째 패널인 Medium devices (≥ 768px)는 태블릿 이상에서의 레이아웃을 정합니다. 휴대전화도 변경하려면 대화상자 맨 위의 Add screen size를 클릭합니다. Extra small (< 576px) 패널이 열립니다. 필요하면 목록에서 다른 크기를 고른 뒤 프리셋을 고릅니다. Remove screen size는 패널을 다시 삭제합니다.
로우 및 컬럼 설정
로우 컨트롤 표시줄에서 More > Settings를 엽니다. 컬럼 설정은 컬럼 표시줄에서 엽니다.
| Setting | Element | What it does | Default |
|---|---|---|---|
| Equal-height columns | Row | 모든 컬럼을 가장 높은 컬럼의 높이까지 늘이니다. | Off |
| Mirror row | Row | 768픽셀 이상에서 컬럼을 역순으로 표시합니다. 쌓인 컬럼은 페이지 순서를 유지합니다. | Off |
| Vertical centering | Column | 자신보다 높은 컬럼 안에서 콘텐츠를 중앙에 배치합니다. | Off |
Mirror row는 로우가 번갈아 나오는 페이지에 적합합니다. 왼쪽에 사진, 다음에는 오른쪽에 사진이 오고, 휴대전화에서는 항상 사진이 먼저 표시됩니다.
컬럼 이동 및 제거
컬럼을 핸들로 드래그하거나 표시줄의 More > Move Left 또는 Move Right를 사용합니다. 컬럼에는 Delete가 없습니다. 대신 컬럼이 더 적은 프리셋을 고릅니다. 이렇게 하면 콘텐츠가 절대 사라지지 않고 남은 마지막 컬럼으로 이동합니다.
표시되지 않는 경우
- 컬럼의 세로 가운데 정렬이 적용되지 않습니다. 컬럼은 콘텐츠만큼만 높으므로 중앙에 배치할 여백이 없습니다. 로우 설정에서 Equal-height columns를 켭니다.
- 휴대전화에서 컬럼이 쌓입니다. 768픽셀 미만에서는 기본 동작입니다. 격자 아이콘을 클릭한 뒤 Add screen size를 클릭하고 Extra small (< 576px)용 프리셋을 고릅니다.
- 텍스트가 다른 컬럼으로 넘어갔습니다. 컬럼이 더 적은 프리셋을 골랐고, 제거된 컬럼의 콘텐츠가 마지막 컬럼으로 이동했습니다. Ctrl+Z(Mac에서는 Cmd+Z)를 눌러 변경을 실행 취소합니다.
- 컬럼의 More 메뉴에 Delete가 없습니다. 컬럼은 레이아웃을 통해 제거합니다. 로우의 격자 아이콘을 클릭하고 컬럼이 더 적은 프리셋을 고릅니다.
다음 단계
- Nesting: 컬럼 안에 로우를 넣어 더 세밀한 그리드를 만듭니다.
- Sections: 컬럼 주변 띠에 별도 배경을 지정합니다.
- Responsive design: 레이아웃이 화면 크기마다 어떻게 적응하는지 알아봅니다.