Studio 에디터: 섹션 그리드 사용자 지정하기

5 분 분량

Studio 에디터에서 섹션은 단일 셀(전체 섹션을 수용)을 포함하는 내장 그리드와 함께 제공됩니다. 섹션을 더 많은 셀로 분할해 콘텐츠에 반응형 구조를 추가하세요. 다양한 사용자 지정 레이아웃을 선택할 수 있습니다.

다음 지침을 참고하세요.

컨테이너에 셀을 추가하고 싶으신가요?

컨테이너에 고급 CSS 그리드를 적용할 수 있습니다.

섹션에 셀을 추가해 반응형의 구조화된 레이아웃을 만드세요. 요소를 별도의 셀에 유지하면 모든 화면에서 제자리에 유지될 수 있습니다. 레이아웃을 선택하고 요소를 셀로 이동할 수 있으며, 언제든지 셀을 분할하거나 나중에 새 셀을 추가할 수 있습니다.

행, 단, 콜라주 등의 레이아웃을 선택합니다.
도움말: 언제든지 드롭다운에서 레이아웃을 변경할 수 있으며 요소는 이동하지 않습니다.
(선택사항) 요소를 해당 셀로 끌어다 놓습니다.

셀을 교체해 섹션 그리드를 빠르고 효율적으로 재구성하세요. 드래그-앤-드롭을 사용해 2개의 셀을 즉시 교체할 수 있으며, 교체 시 그리드에서 서로의 위치를 즉시 차지합니다.

에디터에서 해당 섹션을 선택합니다.
첫 번째 셀을 선택합니다.
셀 상단의 끌기 아이콘을 누른 채 다른 셀로 끌어다 놓습니다. 도움말: 콘텐츠 교체 메시지가 표시되면 셀을 놓을 수 있음을 의미합니다.

셀과 그리드를 원하는 대로 디자인하세요. 기존 셀을 분할 또는 병합하고, 새 셀을 추가하거나 그리드라인을 끌어 크기를 조정할 수 있습니다. 간격을 추가해 셀 사이에 여백을 추가할 수도 있습니다.

기존 셀 분할하기

새 셀 추가하기

셀 병합하기

셀 크기 조정하기

셀 사이에 여백 추가하기

셀 삭제하기

참고:

현재는 셀을 복제할 수 없습니다.

고급 CSS 그리드로 전환하면, 중단점별로 레이아웃을 보다 정확하게 제어할 수 있습니다. 원하는 단과 행의 수를 선택하고 반응형 측정(예: fr, 최소/최대, %)을 사용해 크기를 설정할 수 있습니다.

페이지 메뉴