컨테이너 ①: 크기와 내용 정렬

제목, 설명 글, 버튼을 한 덩어리로 묶어 두고 싶을 때 쓰는 요소가 컨테이너입니다. 이 글에서는 컨테이너를 넣는 방법과 크기(너비·높이·최대 너비), 안쪽 내용의 가로·세로 정렬을 바꿨을 때 편집 화면이 어떻게 달라지는지 순서대로 살펴봅니다. 여백, 배경, 테두리는 별도 글에서 다루고, 속성 패널이 열리는 방법과 4개 탭의 구조도 별도 글에서 설명합니다.

1. 컨테이너 넣기와 선택하기

섹션을 먼저 선택한 뒤 왼쪽의 요소 추가를 열면 레이아웃 카테고리에 컨테이너가 있습니다. 누르면 점선으로 된 빈 컨테이너가 섹션 안에 들어가고, 가운데에 + 버튼이 보입니다.

+ 버튼을 누르면 컨테이너에 추가 메뉴가 열리고 제목, 텍스트, 버튼, 이미지 중에서 고를 수 있습니다. 이미 내용이 있는 컨테이너를 선택한 채로 요소 추가 패널에서 텍스트나 버튼을 누르면 그 컨테이너 안에 들어갑니다. 아래는 제목, 텍스트, 버튼을 차례로 넣은 모습입니다.

컨테이너를 선택하려면 글자 위가 아니라 제목 위쪽처럼 비어 있는 곳을 누르세요. 글자를 누르면 글자 편집으로 들어갑니다. 선택하면 오른쪽 위에 점 세 개가 나타나고, 이를 눌러 펼친 막대의 톱니바퀴(요소 설정 열기)를 누르면 컨테이너 설정 창이 열립니다.

2. 크기와 정렬은 어디에 있나요

컨테이너 설정 창 맨 아래의 전체 속성 패널 열기 (효과·반응형·HTML) →를 누르면 오른쪽 속성 패널의 콘텐츠 탭에 같은 항목이 열립니다. 위에서부터 칼럼 간격, 칼럼 폭, 콘텐츠 세로 정렬, 크기, 내용 정렬 (자식 요소) 순서입니다. 칼럼 간격은 2열·3열 글에서 다룹니다.

3. 너비 바꾸기

컨테이너는 칼럼이 하나뿐인 영역이어서, 화면에서 너비를 실제로 바꾸는 곳은 칼럼 폭입니다. 슬라이더나 25%·33%·50%·66%·75%·100% 버튼으로 가로 폭에 대한 비율을 정하면 컨테이너가 왼쪽에 붙은 채 그 비율만큼 줄어듭니다. 스타일 탭의 레이아웃 > 너비에 px 값을 입력해도 바로 바뀌며, 값은 "칼럼 폭 60.24%로 저장됩니다"처럼 비율로 저장됩니다.

4. 높이와 최대 너비

• 높이 (height): OFF이면 안의 내용만큼 높아집니다. ON으로 켜면 현재 높이에서 시작하고, 숫자 입력, 슬라이더, 200px·300px·400px 버튼으로 정합니다. 컨테이너를 선택했을 때 아래쪽에 나타나는 손잡이를 끌어도 높이가 바뀝니다.
• 최대 너비 (max-width): ON으로 켜면 1140px에서 시작하고 컨테이너가 가운데에 놓입니다. 960px·1140px·1280px·80% 버튼이 있습니다. 화면이 이 값보다 넓어도 컨테이너는 그 이상 커지지 않고, OFF로 끄면 다시 전체 폭을 씁니다.

5. 내용 정렬

내용 정렬 (자식 요소)의 가로 정렬은 왼쪽, 가운데, 오른쪽, 꽉 채움 네 가지입니다. 처음에는 "정렬 적용 시 자동으로 flex column으로 전환됩니다."라는 안내가 보이고, 정렬을 누르면 안의 요소가 세로로 쌓인 채 가로 방향으로 정렬됩니다. 이 예시에서는 왼쪽과 꽉 채움의 모양이 같았습니다. 정렬을 적용한 뒤에는 정렬 초기화 링크로 지정한 정렬을 지울 수 있습니다.

정렬을 적용하면 아래에 세로 정렬의 위, 가운데, 아래, 꽉 버튼이 나타납니다. 컨테이너 높이가 내용보다 클 때 차이가 보이므로 높이를 먼저 정해 두세요. 위쪽 콘텐츠 세로 정렬의 아이콘 네 개(마우스를 올리면 위, 가운데, 아래, 양끝)도 같은 용도이고, 양끝은 첫 요소를 위에, 마지막 요소를 아래에 두고 나머지를 사이에 나눕니다.

6. 이렇게 활용해 보세요

• 혜택 안내처럼 제목, 설명, 버튼을 한 묶음으로 두고 최대 너비를 960px로 맞춰 가운데에 놓을 수 있습니다.
• 높이를 정한 뒤 세로 정렬을 가운데로 두면 짧은 문구도 상자 한가운데에 놓을 수 있습니다.

7. 알아 두실 점

• 이 글의 화면은 모두 편집 화면 기준입니다. 저장한 뒤 새로고침해도 크기와 정렬이 유지되는 것은 확인했습니다.

컨테이너의 여백, 배경, 테두리는 별도 글에서, 2열·3열 칼럼의 폭과 간격도 별도 글에서 이어서 다룹니다.