칼럼 폭·간격·모바일 쌓기 조절

2열·3열을 넣고 나면 칸 폭이 마음에 들지 않거나, 태블릿과 모바일에서는 다르게 보이게 하고 싶을 때가 있습니다. 이 글에서는 이미 넣어 둔 칸을 다듬는 방법을 순서대로 안내합니다. 칸을 넣고 채우는 방법, 컨테이너 설정 창의 칼럼 폭 버튼과 옆 칸 연동은 별도 글에서 다룹니다.

1. 칸 경계의 손잡이로 폭 조절하기

캔버스에서 칸의 빈 곳을 눌러 칸을 선택하면 보라색 테두리가 생기고, 이웃 칸이 있는 쪽 경계 가운데에 보라색 손잡이가 나타납니다. 3열의 가운데 칸은 양쪽에, 첫 칸은 오른쪽에만 손잡이가 보입니다. 손잡이에 마우스를 올리면 오른쪽 열 너비 조정, 왼쪽 열 너비 조정이라는 안내가 나옵니다.

손잡이를 좌우로 끌면 끈 만큼 이웃 칸이 반대로 줄거나 늘어서 두 칸의 합은 그대로 유지됩니다. 아래 화면은 첫 칸의 오른쪽 손잡이를 오른쪽으로 끌어, 33%씩이던 세 칸이 약 45%, 21%, 33%가 된 모습입니다. 칸 폭은 5%보다 좁아지지 않습니다.

2. 간격은 보기마다 따로 정하기

화면 위쪽의 기기 아이콘으로 데스크탑, 태블릿, 모바일 보기를 바꿀 수 있습니다. 태블릿은 768px, 모바일은 375px 기준으로 보여 줍니다. 태블릿 보기에서 칸을 선택하고 점 세 개를 누른 뒤 요소 설정 열기를 누르면 컨테이너 설정 창이 열립니다. 여기서 칼럼 간격을 바꾸면 그 값은 태블릿 보기에만 적용됩니다.

이 예에서는 데스크탑 간격 40px을 그대로 두고 태블릿 간격만 8px로 줄였습니다. 데스크탑 보기로 돌아가면 간격은 40px 그대로입니다.

3. 태블릿에서 1열로 쌓기

모바일 보기에서는 칸이 자동으로 위에서 아래로 쌓이지만, 태블릿 보기에서는 칸이 가로로 유지됩니다. 칸이 좁아 글이 답답하면 태블릿에서만 1열로 쌓을 수 있습니다.

• 태블릿 보기에서 칸을 선택하고 점 세 개 > 요소 설정 열기를 누른 뒤 창 아래의 전체 속성 패널 열기를 누릅니다.
• 패널 위쪽의 자물쇠 아이콘(패널 고정)을 눌러 두고, 왼쪽 위의 상위 버튼을 눌러 칸들을 묶은 행을 선택합니다. 패널을 고정하지 않으면 행을 선택할 때 패널이 닫힙니다.
• 반응형 탭의 칼럼 레이아웃 카드에서 태블릿 1칼럼으로 전환 (권장)을 누릅니다.

누르는 즉시 태블릿 보기의 세 칸이 위에서 아래로 쌓이고 칸마다 가로 전체를 씁니다. 데스크탑 보기의 3열은 그대로입니다. 바로 되돌리려면 실행 취소(Ctrl+Z)를 누르면 됩니다.

4. 모바일에서 쌓이는 순서 바꾸기

모바일에서는 왼쪽 칸이 위에, 오른쪽 칸이 아래에 놓입니다. 마지막 칸을 맨 위로 올리고 싶다면 모바일 보기에서 그 칸을 선택하고, 위와 같은 방법으로 전체 속성 패널 열기를 눌러 반응형 탭을 엽니다. 순서 (order) 입력칸에 -1을 넣으면 그 칸이 맨 위로 올라옵니다. 값을 넣으면 패널 머리의 모바일 표시 옆에 +1 모바일 오버라이드가 나타납니다.

이 값은 모바일 보기에만 적용되어 데스크탑과 태블릿의 칸 순서는 그대로입니다.

5. 보기 기준 폭 확인하기

화면 위쪽의 반응형 버튼을 누르면 왼쪽에 반응형 설정 패널이 열리고 브레이크포인트 기준이 나옵니다. 데스크탑은 1024px 이상, 태블릿은 768px, 모바일은 375px입니다.

6. 이렇게 활용해 보세요

• 이미지와 설명을 나란히 놓은 2열에서 태블릿 간격만 좁혀 보세요.
• 장점 세 가지를 나열한 3열을 태블릿에서 1열로 쌓으면 칸마다 글을 더 넓게 보여 줄 수 있습니다.
• 데스크탑에서 사진이 오른쪽에 있는 2열이라면, 모바일에서는 사진 칸의 순서를 -1로 바꿔 사진이 먼저 보이게 할 수 있습니다.

7. 알아 두실 점

• 칼럼 폭 비율은 보기별로 따로 저장되지 않고 하나의 값을 모든 보기에서 씁니다. 태블릿에서만 다르게 보이게 하려면 위의 1열 쌓기를 쓰세요.
• 손잡이를 너무 멀리 끌어 폭 합계가 100%를 넘으면 칸이 서로 줄어듭니다. 컨테이너 설정 창의 폭 합계 표시로 확인할 수 있습니다.
• 태블릿·모바일에서 바꾼 간격, 1열 쌓기, 순서는 저장한 뒤 다시 열어도 유지됩니다. 바꾼 뒤에는 저장을 눌러 주세요.