에디터 X: 플렉스박스 도구와 그리드 기반 도구 중 선택하기
4 분 분량
에디터 X는 에이전시 및 프리랜서를 위한 새로운 플랫폼인 Wix Studio로 전환됩니다.Wix Studio에 대해 자세히 알아보세요.
에디터 X는 요소를 구성하는 데 사용할 수 있는 다양한 레이아웃 도구를 제공하며, 모두 다른 목적으로 사용됩니다. 이러한 도구는 그리드 및 플렉스박스의 두 가지 일반적인 CSS 기술을 기반으로 합니다. 복잡한 구성 템플릿을 계획할 때에는 이를 염두에 두는 것이 중요합니다.
이 도움말에서 에디터 X에서 CSS 기술을 사용하는 방법에 대해 자세히 알아보세요.
에디터 X의 그리드
그리드는 에디터 X에서도 찾을 수 있는 2차원 CSS 모델이며, 2차원은 열 및 행으로 구성됩니다. 큰 반응형 레이아웃을 디자인할 때 그리드를 사용하면 사전 정의된 셀 내부에 배치되는 요소의 구조를 제어할 수 있습니다.
참고:
CSS 그리드 요소는 콘텐츠 컬렉션에 연결할 수 없습니다.
에디터 X의 다음 요소는 CSS 그리드를 기반으로 합니다.
그리드
그리드 요소는 실제 CSS 그리드이므로, 이를 사용해 반응형 동작을 정의하면서 복잡한 레이아웃을 생성할 수 있습니다. 구성이 항상 픽셀 단위로 되도록 각 중단점에 대해 열/행의 수 또는 크기를 선택할 수 있습니다.
열, 행, 간격(여백)의 크기 설정 시에는 픽셀, 백분율, 프랙션 등과 같이 사용할 수 있는 많은 고정 및 유동적인 측정 단위가 있습니다.
컨테이너
도움말:
컨테이너 내부에 다른 레이아웃 도구를 배치할 수 있습니다. 예를 들어, 컨테이너 내부의 그리드를 적용하거나 레이아웃터/반복 레이아웃을 추가할 수 있습니다.
섹션
페이지 섹션 또한 컨테이너이므로 연결된 하위 요소의 구조를 정의합니다. 필요에 따라 섹션에 그리드를 적용하거나 요소를 배치할 수 있습니다.
에디터 X의 플렉스박스
플렉스박스는 에디터 X에서 대부분의 레이아웃 도구에 사용하는 1차원 CSS 모델입니다. 이러한 도구에서 요소는 줄 바꿈하거나 공간을 채우도록 늘리거나 또는 공간에 맞게 줄어드는 등 상위 요소의 공간에 맞게 자동으로 유연하게 조정됩니다.
에디터 X의 다음 요소는 플렉스박스를 기반으로 합니다.
스택
스택은 세로 순서로 배치된 요소가 포함된 투명한 플렉스 컨테이너입니다. 예를 들어, 여러 텍스트 상자나 텍스트 요소와 그 아래에 하나의 버튼을 스택할 수 있습니다. 스택은 요소 사이의 여백을 유지하고 작은 화면에서 요소가 겹치는 것을 방지합니다.
중단점 활용하기
특정 중단점에서 스택 또는 스택의 하위 요소를 삭제할 수는 없지만 오른쪽 클릭 메뉴를 사용해 숨길 수 있습니다.
레이아웃터
레이아웃터는 선택한 레이아웃 내에 여러 아이템이 포함된 플렉스 컨테이너입니다. 레이아웃터 아이템은 컨테이너이므로 자유 구성 템플릿 내에 요소를 추가하거나 더 구성하려는 경우 그리드를 적용할 수 있습니다.
표시 유형(예: 슬라이더, 모자이크, 칼럼)을 선택하면 레이아웃터로 나머지 아이템이 모든 중단점에서 멋지게 보이도록 줄 바꿈됩니다. 즉, 각 뷰포트별로 다른 표시 유형을 선택할 수 있습니다(예: 슬라이더 레이아웃은 모바일 기기에 적합).
중단점 활용하기
특정 중단점에서 레이아웃터 또는 해당 아이템을 삭제할 수는 없지만 오른쪽 클릭 메뉴를 사용해 숨길 수 있습니다.
반복 레이아웃
반복 레이아웃은 선택한 레이아웃 내에 여러 아이템이 포함된 플렉스 컨테이너입니다. 반복 레이아웃은 모든 아이템의 레이아웃과 디자인은 동일하지만 목록과 같이 콘텐츠는 다른 경우에 적합합니다. 레이아웃 및 디자인 조정은 자동으로 이루어지므로 일관성에 대해 걱정할 필요가 없습니다.
반복 레이아웃의 특별한 점은 바로 반복 레이아웃을 콘텐츠 컬렉션에 연결할 수 있는 기능입니다. 이를 통해 실제 디자인에 영향을 주지 않고 백엔드에서 콘텐츠를 관리 및 업데이트할 수 있습니다.
올바른 레이아웃 도구 선택 방법
도구를 선택하기 전, 각 화면 크기에 맞게 원하는 레이아웃을 계획하세요. 그 다음 필요한 기능이 포함된 레이아웃 도구를 선택할 수 있습니다.
아래를 클릭해 에디터 X 레이아웃 도구 간의 몇 가지 주요 차이점을 확인하세요.
반응형 동작
콘텐츠 컬렉션(데이터)에 연결하기
간격 제어
도움이 되었나요?
|