컨테이너는 이미지, 텍스트, 버튼 등 여러 요소를 담을 수 있는 박스 형태의 영역입니다.

컨테이너를 사용하면 여러 요소를 하나의 그룹으로 묶어 배치할 수 있으며, 위치, 정렬, 간격 등을 일괄적으로 조정하여 페이지 구성을 효율적으로 관리할 수 있습니다.

컨테이너 옵션

1. 연결

컨테이너 영역을 클릭했을 때 특정 URL이나 페이지로 이동하도록 설정합니다. 선택한 연결 유형에 따라 ② 항목의 설정 내용이 변경됩니다.

2. URL / 페이지 / 품목 및 필드

①에서 선택한 연결 유형에 따라 세부 항목을 입력하거나 선택합니다.

• URL : 이동할 페이지의 URL을 입력합니다.

• 페이지 : '페이지 선택'  버튼을 클릭하여 이동할 페이지를 선택합니다.

• 품목 및 필드 : 연결할 품목과 필드를 선택합니다. 품목의  버튼을 클릭하여 문서 및 미디어에 저장된 파일을 연결하고, 필드에서 'URL 다운로드'를 선택하면 컨테이너 클릭했을 때 해당 파일이 다운로드됩니다.

연결 : URL
연결 : 페이지
연결 : 맵핑된 URL

3. 새 탭에서 엽니다.

체크 시 연결된 페이지를 새 탭에서 엽니다.

4. 컨텐츠 디스플레이

컨테이너 내부 요소의 배치 방식을 설정합니다.
Flex Row 또는 Flex Column을 선택한 경우에만 ⑤~⑥ 항목이 활성화됩니다.

• 구획 : 각 요소가 가로 폭 전체(100%)를 차지하며, 여러 요소를 추가하면 아래 방향으로 수직(세로) 배치됩니다

• Flex Row : 내부 요소를 가로 방향으로 배치합니다.

• Flex Column : 내부 요소를 세로 방향으로로 배치합니다.

컨텐츠 디스플레이 : 구획

A

B

C

컨텐츠 디스플레이 : Flex Row

A

B

C

컨텐츠 디스플레이 : Flex Column

A

B

C

5. Flex Wrap

내부 요소의 전체 너비가 컨테이너를 초과할 경우, 요소를 다음 줄로 자동 정렬할지 여부를 설정합니다.

• No Wrap(기본값) :  요소가 한 줄에 유지되며, 부모 너비에 맞게 자동 축소됩니다.

• Wrap : 요소의 전체 너비가 부모를 초과하면 다음 줄로 이어서 배치됩니다.

• 랩 리버스 : 아래에서 위 방향으로 줄바꿈하며 역순으로 배치됩니다.

원래 크기
70*70px

Flex Wrap : No Wrap

A

B

C

D

Flex Wrap : Wrap

A

B

C

D

Flex Wrap : 랩 리버스

A

B

C

D

6. 아이템 정렬 / 컨텐츠 양쪽 정렬

컨테이너 내부 요소의 가로 또는 세로 정렬 방식을 설정합니다.
④에서 선택한 디스플레이 방식에 따라 각 항목의 정렬 기준(가로/세로)이 달라집니다

  Flex Row Flex Column
아이템 정렬 세로 정렬 가로 정렬
컨텐츠 양쪽 정렬 가로 정렬 세로 정렬
컨텐츠 디스플레이 : Flex Row
아이템 정렬 : 시작 / 컨텐츠 양쪽 정렬 : 센터

A

컨텐츠 디스플레이 : Flex Column
아이템 정렬 : 시작 / 컨텐츠 양쪽 정렬 : 센터

A

7. 컨테이너 너비

컨테이너 너비를 고정 너비(1140px)로 설정하거나, 좌우 여백 없이 전체 너비로 확장할 수 있습니다.
단, 상위 콘텐츠 영역이 이미 고정 너비로 제한된 경우에는 적용되지 않습니다.