컨테이너 요소

Last updated on 8/22/2025@mrbirddev

컨테이너 요소는 많은 것을 달성하기 위해 사용할 수 있습니다.

요소를 수평으로 배열하기

열 추가 및 너비 비율 설정

캔버스에 컨테이너를 추가한 후, 데이터 탭에 열이 하나만 있는 것을 볼 수 있습니다.

열 추가 및 너비 비율 설정 열을 클릭하여 더 많은 열을 추가하세요. 그리고 원하는 레이아웃을 만들기 위해 너비 비율를 조정하세요. 스크린샷에서는 왼쪽 열이 오른쪽 열보다 2배 넓은 2:1 비율로 설정했습니다.

항상 수평

모바일에서 수직

열이 수평으로 배열되어 있지만, 모바일 화면에서는 좁은 화면에 적응하기 위해 열이 수직으로 배열됩니다.

항상 수평

대부분의 경우 이것은 괜찮습니다. 하지만 열이 항상 수평으로 배열되기를 원한다면, 콘텐츠 탭을 클릭하고 유형 필드를 확인하세요. 항상 가로을 선택하세요. 그러면 화면 크기에 상관없이 콘텐츠가 수평으로 배열됩니다.

자동 열 너비

자동 열 너비

너비 비율에 대한 짧은 설명은 너비 비율로 설정할 수 있다는 것입니다. 이 경우 열 너비는 열 내부의 요소에 맞게 줄어듭니다. 예를 들어, 아바타와 모토를 설정할 때 유용합니다.

단일 열

Single column

컨테이너에 단일 열만 있을 때도 여전히 유용합니다. 예를 들어, 추가 배경 및 추가 박스 그림자를 추가할 수 있습니다.

전체 배경 확장

Full bleed background

전체 배경 확장은 컨테이너를 사용하여 달성할 수 있습니다. 모양 -> 너비를 전체 화면 너비로 설정하기만 하면 됩니다. 컨테이너는 화면의 왼쪽에서 오른쪽까지 가장자리로 확장됩니다.

Inner width

하지만 컨테이너 내부의 콘텐츠는 여전히 페이지 요소의 너비 내에 제한됩니다. 콘텐츠 -> 내부 너비를 100%로 설정하여 콘텐츠가 컨테이너의 가장자리까지 확장되도록 할 수 있습니다.

전체 이미지 확장

Inner width

위의 스크린샷에서 보듯이, 이미지 요소의 모양 -> 너비를 덮기로 설정하면 이미지 요소는 컨테이너의 가장자리까지 확장되어 컨테이너와 열의 패딩 및 간격을 무시합니다.

Last updated on 8/22/2025@mrbirddev
Loading...