에디터 X: 플렉스박스 도구와 그리드 기반 도구 중 선택하기

에디터 X는 요소를 구성하는 데 사용할 수 있는 다양한 레이아웃 도구를 제공하며, 모두 다른 목적으로 사용됩니다. 이러한 도구는 그리드 및 플렉스박스의 두 가지 일반적인 CSS 기술을 기반으로 합니다. 복잡한 구성 템플릿을 계획할 때에는 이를 염두에 두는 것이 중요합니다. 

그리드는 에디터 X에서도 찾을 수 있는 2차원 CSS 모델이며, 2차원은 열 및 행으로 구성됩니다. 큰 반응형 레이아웃을 디자인할 때 그리드를 사용하면 사전 정의된 셀 내부에 배치되는 요소의 구조를 제어할 수 있습니다. 

그리드 요소는 실제 CSS 그리드이므로, 이를 사용해 반응형 동작을 정의하면서 복잡한 레이아웃을 생성할 수 있습니다. 구성이 항상 픽셀 단위로 되도록 각 중단점에 대해 열/행의 수 또는 크기를 선택할 수 있습니다.

열, 행, 간격(여백)의 크기 설정 시에는 픽셀, 백분율, 프랙션 등과 같이 사용할 수 있는 많은 고정 및 유동적인 측정 단위가 있습니다.

컨테이너는 구성 템플릿을 생성하는 가장 기본적인 레이아웃 도구입니다. 해당 컨테이너 상자에 요소를 추가하면 자동으로 컨테이너 상자는 상위 요소가 되고 구조를 정의합니다. 이는 섹션보다 작아야 하는 '독립형' 구성 템플릿을 생성하기 위한 훌륭한 도구입니다. 

페이지 섹션 또한 컨테이너이므로 연결된 하위 요소의 구조를 정의합니다. 필요에 따라 섹션에 그리드를 적용하거나 요소를 배치할 수 있습니다. 

플렉스박스는 에디터 X에서 대부분의 레이아웃 도구에 사용하는 1차원 CSS 모델입니다. 이러한 도구에서 요소는 줄 바꿈하거나 공간을 채우도록 늘리거나 또는 공간에 맞게 줄어드는 등 상위 요소의 공간에 맞게 자동으로 유연하게 조정됩니다.

스택은 세로 순서로 배치된 요소가 포함된 투명한 플렉스 컨테이너입니다. 예를 들어, 여러 텍스트 상자나 텍스트 요소와 그 아래에 하나의 버튼을 스택할 수 있습니다. 스택은 요소 사이의 여백을 유지하고 작은 화면에서 요소가 겹치는 것을 방지합니다.

레이아웃터는 선택한 레이아웃 내에 여러 아이템이 포함된 플렉스 컨테이너입니다. 레이아웃터 아이템은 컨테이너이므로 자유 구성 템플릿 내에 요소를 추가하거나 더 구성하려는 경우 그리드를 적용할 수 있습니다. 

표시 유형(예: 슬라이더, 모자이크, 칼럼)을 선택하면 레이아웃터로 나머지 아이템이 모든 중단점에서 멋지게 보이도록 줄 바꿈됩니다. 즉, 각 뷰포트별로 다른 표시 유형을 선택할 수 있습니다(예: 슬라이더 레이아웃은 모바일 기기에 적합).

반복 레이아웃은 선택한 레이아웃 내에 여러 아이템이 포함된 플렉스 컨테이너입니다. 반복 레이아웃은 모든 아이템의 레이아웃과 디자인은 동일하지만 목록과 같이 콘텐츠는 다른 경우에 적합합니다. 레이아웃 및 디자인 조정은 자동으로 이루어지므로 일관성에 대해 걱정할 필요가 없습니다. 

반복 레이아웃의 특별한 점은 바로 반복 레이아웃을 콘텐츠 컬렉션에 연결할 수 있는 기능입니다. 이를 통해 실제 디자인에 영향을 주지 않고 백엔드에서 콘텐츠를 관리 및 업데이트할 수 있습니다. 

도구를 선택하기 전, 각 화면 크기에 맞게 원하는 레이아웃을 계획하세요. 그 다음 필요한 기능이 포함된 레이아웃 도구를 선택할 수 있습니다. 

아래를 클릭해 에디터 X 레이아웃 도구 간의 몇 가지 주요 차이점을 확인하세요.