2열·3열 칼럼 레이아웃 만들기

이미지는 왼쪽에, 설명은 오른쪽에 나란히 놓고 싶거나 장점 세 가지를 한 줄에 보여 주고 싶을 때가 있습니다. 에디터의 2열과 3열 요소는 이런 칸 나누기를 위한 요소입니다. 이 글에서는 칸을 넣는 방법, 칸 안에 요소를 채우는 방법, 칸 너비를 바꾸는 방법, 모바일에서 어떻게 보이는지를 순서대로 안내합니다. 요소 패널 사용법과 속성 패널 구조는 별도 글에서 다룹니다.

1. 2열·3열은 어디에 있나요

에디터 왼쪽 레일의 + 아이콘(요소 추가)을 누르면 요소 패널이 열립니다. 맨 위 레이아웃 카테고리에 2열, 3열, 컨테이너, 구분선, 간격이 있습니다. 아이콘에 마우스를 올리면 "(드래그하여 삽입)"이라고 나오므로 끌어서 놓을 수도 있습니다.

2. 2열 넣고 칸 채우기

먼저 캔버스에서 섹션의 빈 곳을 눌러 섹션을 선택하고, 요소 패널에서 2열을 누릅니다. 선택한 섹션의 맨 아래, 기존 제목과 문구 아래에 칸 두 개가 들어갑니다. 칸은 비어 있어서 선택하기 전에는 눈에 띄지 않습니다. 칸의 빈 곳을 누르면 보라색 테두리가 나타납니다.

칸을 채우는 순서는 다음과 같습니다.

• 칸의 빈 곳을 눌러 칸을 선택합니다.
• 요소 패널을 열고 원하는 요소를 누릅니다. 선택한 칸 안쪽 맨 아래에 들어갑니다. 제목과 텍스트는 내용을 입력하는 창이 열리고 삽입을 누르면 들어갑니다. 이미지는 기본 이미지가 들어갑니다.
• 다른 칸을 채울 때는 패널을 닫고 그 칸의 빈 곳을 눌러 선택한 뒤 같은 방법을 반복합니다.

3. 칸 너비와 간격 바꾸기

칸을 선택하면 칸 오른쪽 위에 점 세 개가 보입니다. 이것을 누르고 나타나는 도구 막대에서 톱니바퀴(요소 설정 열기)를 누르면 컨테이너 설정 창이 열립니다. 위쪽에 칸에 관한 항목이 모여 있습니다.

• 칼럼 간격: 슬라이더나 숫자로 칸 사이 간격을 정합니다. 같은 줄의 모든 칸에 함께 적용됩니다.
• 칼럼 폭: 선택한 칸의 폭을 퍼센트로 정합니다. 25%, 33%, 50%, 66%, 75%, 100% 버튼이 있어 한 번에 고를 수 있습니다.
• 옆 칼럼과 연동 (합계 유지): 켜 두면 선택한 칸이 넓어진 만큼 옆 칸이 좁아져서 합계가 유지됩니다. 왼쪽 칸을 33%로 바꾸면 옆 칸은 67%가 됩니다.
• 콘텐츠 세로 정렬: 칸 안의 내용을 위, 가운데, 아래, 양끝 중에서 고릅니다. 높이가 다른 두 칸을 나란히 놓을 때 쓸 수 있습니다. 위 화면의 오른쪽 글은 가운데로 맞춘 것입니다.

연동을 끄면 옆 칸의 값은 그대로 두고 선택한 칸만 바뀝니다. 이때 두 칸의 합이 100%를 넘으면 칸이 서로 줄어들어 맞춰집니다. 폭 비율은 저장한 뒤 다시 열어도 유지되었습니다.

4. 3열도 같은 방법입니다

3열은 칸이 세 개이고 기본 폭이 칸마다 33.33%라는 점만 다릅니다. 섹션을 선택하고 3열을 누른 뒤 칸을 채우고 너비를 바꾸는 과정은 2열과 같습니다. 같은 섹션 안에 2열과 3열을 위아래로 이어서 넣을 수도 있습니다.

5. 모바일에서는 어떻게 보이나요

에디터 위쪽의 기기 아이콘에서 모바일(375px)을 선택하면 칸이 위에서 아래로 쌓입니다. 왼쪽 칸이 위에, 오른쪽 칸이 아래에 놓이고 칸 폭 설정과 상관없이 각 칸이 가로 전체를 씁니다. 3열도 세 칸이 차례로 쌓였습니다.

6. 알아 두실 점

• 칸을 선택하려면 칸 안의 요소가 아니라 빈 곳을 눌러야 합니다. 요소를 누르면 그 요소가 선택됩니다.
• 패널이 열린 상태에서 캔버스를 누르면 패널이 닫히니, 칸을 바꿀 때는 패널을 다시 열어 주세요.
• 컨테이너 설정 창 아래쪽에는 칼럼 너비, 자식 간격 같은 항목도 있습니다. 이 글에서는 위쪽의 칼럼 간격과 칼럼 폭만 다뤘습니다.
• 컨테이너 요소는 별도 글에서 다룹니다.