열을 사용하여 잘 짜여진 레이아웃으로 콘텐츠를 정렬하면 사이트가 시각적으로 보기 좋고 탐색하기 쉬워집니다. 이 가이드에서는 열의 디자인 측면(예: 모바일의 색상, 정렬, 모양)을 사용자 정의하는 방법을 배웁니다.
열의 배경 색상을 추가하거나 변경하려면 다음 단계를 따르세요.
- 편집기의 왼쪽 상단에서 목록 보기를 선택합니다. 아이콘은 가로줄 3개처럼 보이는 모양입니다.
- 여기에서 열 블록을 찾아서 클릭합니다.
- 화면 오른쪽의 열 블록 설정에서 스타일 탭을 클릭합니다(아이콘은 흑백 원 모양).
- 색상 설정에서 “배경“을 클릭하고 배경 색상을 선택합니다.
- 변경사항을 저장하려면 “저장” 버튼을 누릅니다.
각 열에 대해 다른 색상을 선택하려면 같은 단계를 따르되 목록 보기에서 전체 열 블록 대신 개별 열 블록을 선택합니다.
새 열에 콘텐츠를 추가하면 기본적으로 열 컨테이너 상단에 정렬됩니다. 다음 단계를 수행하여 열 내부의 콘텐츠 정렬을 변경할 수 있습니다.
- 편집기의 왼쪽 상단에서 목록 보기를 선택합니다. 아이콘은 가로줄 3개처럼 보이는 모양입니다.
- 여기에서 열 블록을 찾아서 클릭합니다.
- 선택한 열 위나 아래에 나타나는 도구 모음에서 수직 정렬 옵션을 클릭합니다.
- 열 내부의 모든 내용물이 열 컨테이너의 상단, 중앙 또는 하단에 위치하도록 “상단 정렬“, “중앙 정렬” 또는 “하단 정렬” 중에서 선택합니다.
각 열에 대해 다른 정렬을 선택하려면 같은 단계를 따르되 목록 보기에서 전체 열 대신 개별 열을 선택합니다. 이렇게 하면 다음과 같이 분산된 레이아웃을 생성할 수 있습니다.
열 레이아웃을 사용할 때는 모바일 장치를 사용하는 웹사이트 방문자에게 열이 어떻게 표시되는지 고려해야 합니다. 스마트폰은 화면이 작기 때문에 여러 열이 한 행에 모두 맞지 않고 콘텐츠의 가독성도 떨어질 수 있습니다.
모바일 화면의 열을 한 행에 모두 표시하는 대신에 세로로 표시되도록 “세로 배열”을 선택할 수 있습니다.
이 전환 스위치를 통해 모바일 장치에서 페이지 또는 글을 볼 때 열이 가로로 표시될지 또는 세로로 배열될지 결정됩니다. 다음은 세로로 배열된 열을 데스크톱/노트북 화면과 모바일 화면에서 볼 때를 비교한 예입니다.
지원 