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

Studio 에디터는 요소를 특정 디자인 요구 사항에 맞게 구성할 수 있는 강력한 레이아웃 도구를 제공합니다. 이러한 도구는 그리드 및 플렉스박스의 두 가지 일반적인 CSS 기술을 기반으로 하며, 이러한 차이점을 이해하면 클라이언트의 콘텐츠를 표시할 가장 좋은 반응형 레이아웃을 계획하는 데 도움이 될 수 있습니다. 

이 도움말에서는 레이아웃 도구를 유형별로 분류하고 주요 기능을 설명하며, 필요에 가장 적합한 기능을 결정하는 데 도움을 드립니다.

그리드는 행과 열을 사용해 미리 정의된 셀 내에서 요소를 배열하는 2D CSS 모델입니다. 정확한 제어가 가능한 반응형 모듈식 레이아웃을 제작하는 데 특히 강력합니다.

빈 섹션은 단일 셀(전체 섹션을 수용)을 포함하는 내장 그리드와 함께 제공됩니다. 콘텐츠에 반응형 구조를 부여하기 위해 필요에 따라 그리드를 더 많은 셀로 분할합니다. 데스크톱에 대한 레이아웃을 결정한 후에는 더 작은 중단점에 대한 다른 레이아웃을 선택할 수 있습니다.

고급 CSS 그리드를 사용하면 섹션 그리드, 컨테이너, 라이트박스, 플렉스박스 및 반복 레이아웃 아이템에 복잡한 레이아웃을 완전히 자유롭게 생성할 수 있습니다. 반응형 측정을 사용해 모든 화면 중단점에서 모든 셀의 정확한 크기를 설정할 수 있습니다(예: fr, 최소/최대, %). 

추천 대상: 픽셀 단위의 완벽한 조정이 필요한 복잡한 레이아웃

컨테이너는 간단하지만 필수적인 레이아웃 도구입니다. 컨테이너 상자에 요소를 추가하면, 해당 요소는 자동으로 상위 요소가 되고 구조를 정의합니다. 

추천 대상: 섹션 내 격리된 독립형 레이아웃 

플렉스박스는 상위 컨테이너 내에서 요소를 동적으로 조정해야 하는 레이아웃에 최적화된 1D CSS 모델입니다. 플렉스박스 도구를 사용하면 요소는 확장, 축소, 줄 바꿈 여부와 관계없이 할당된 공간에 맞게 원활하게 "조정"됩니다.

스택은 요소의 세로 또는 가로 정렬을 보장하는 보이지 않는 플렉스 컨테이너입니다.  스택은 요소 사이의 여백을 유지하고 작은 화면에서 요소가 겹치는 것을 방지합니다.

또한, 화면 중단점당 스택 요소의 순서를 설정해 레이아웃이 모든 화면 크기에서 세련되게 보이도록 할 수 있습니다. 

추천 대상: 단일 가로 또는 세로 축을 따라 요소를 정확하게 정렬해야 하는 섹션 내 독립형 레이아웃 

플렉스박스는 아이템이 모든 화면에 맞게 자동으로 줄 바꿈되는 사전 제작된 플렉스 레이아웃입니다. 특정 콘텐츠에 적합한 다양한 표시 유형(예: 모자이크, 슬라이더, 칼럼)이 있는 반응형 컨테이너로 구성되어 있습니다. 

각 뷰포트에 대해 다른 표시 유형(예: 슬라이더 레이아웃은 모바일 기기에 적합)을 선택하고 특정 아이템 순서도 설정할 수 있습니다.

추천 대상: 많은 양의 콘텐츠를 깔끔하고 편리한 레이아웃으로 구성하는 경우 

반복 레이아웃은 디자인과 레이아웃이 동일하지만, 콘텐츠가 다른 아이템 목록입니다. 레이아웃 및 디자인 조정은 자동으로 이루어지므로 일관성에 대해 걱정할 필요가 없습니다. 

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

추천 대상: 목록 또는 완벽하게 일관되게 보이는 아이템으로 분할하고자 하는 모든 유형의 콘텐츠

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

각 레이아웃 도구는 다양한 양과 유형의 콘텐츠를 수용하도록 설계되었습니다. 예를 들어, 컨테이너는 더 작은 크기의 콘텐츠에 적합하며, 큰 섹션 그리드는 복잡한 레이아웃 구성에 더 적합합니다. 

마찬가지로, 플렉스박스와 반복 레이아웃은 모두 많은 양의 콘텐츠를 체계적으로 표시하는 데는 유용하지만, 서로 다른 목적을 수행합니다. 반복 레이아웃은 모든 아이템에 동일한 레이아웃과 디자인을 적용해 일관성을 간소화하는 반면, 플렉스박스는 각 아이템을 개별적으로 디자인할 수 있도록 합니다.

플렉스박스 및 그리드 요소는 콘텐츠가 다양한 화면 크기에 조정되는 방식이 다릅니다. 그리드는 작은 화면에 맞게 다양한 행과 열 수를 표시합니다. 플렉스박스 기반 도구에서 콘텐츠는 방문자의 화면에 맞게 자동으로 줄바꿈 및/또는 순서를 변경합니다.

반복 레이아웃만 이 옵션을 지원하므로 CMS 컬렉션의 콘텐츠를 표시해야 하는 경우 이 도구를 선택하세요. 

또는, 특정 요소(예: 텍스트, 이미지)를 컬렉션에 연결하고 컨테이너 또는 스택에 추가해 레이아웃을 체계적으로 유지할 수 있습니다.