.png%3Falt%3Dmedia%26token%3Dd47bf375-7ba8-4747-85ea-013673241842)
.png%3Falt%3Dmedia%26token%3Dd47bf375-7ba8-4747-85ea-013673241842)
레이아웃 추가, 레이아웃 설정
레이아웃 추가 버튼은 하나의 섹션 내에서 가장 아래 쪽에 나타납니다. 레이아웃은 세로 방향으로 무제한 추가가 가능합니다.
레이아웃을 선택하면 오른쪽 상단에 레이아웃 편집 툴바가 나타납니다.
이 툴바의 버튼을 활용하여 레이아웃 설정, 애니메이션 설정, 이동, 복사, 삭제가 가능합니다.
레이아웃 편집 툴바에서 톱니바퀴 모양의 레이아웃 설정 버튼을 클릭하면, 단 설정, 데스크톱 레이 아웃 설정, 모바일 레이아웃 설정이 가능합니다.
레이아웃은 1~4단으로 구성이 가능하며 이때 ‘단’은 오른쪽으로 하나씩 추가되는 개념입니다.
데스크탑에서는 가로로 펼쳐지는 항목들이 모바일 환경에서는 세로로 나열될 수 있습니다.
자칫 부자연스럽게 보일 수 있는 레이아웃 단 순서를 조정하여 모바일 환경에서도 깔끔한 구성을 완성해 보세요. 자세한 안내는 아래 내용을 참고해 주세요.
데스크탑 환경에서 [이미지-텍스트] [텍스트-이미지] 순서로 나열되는 두 개의 레이아웃이 있습니다.
이 레이아웃들은 모바일 환경에서는 [이미지-텍스트-텍스트-이미지] 순서로 보여집니다.
데스크탑 환경에서는 이미지와 텍스트 순서를 엇갈리게 하여 시각적인 효과를 더하지만, 모바일 환경에서는 조금 부자연스러워 보입니다.
모바일 레이아웃 설정을 이용해 단의 순서를 바꾸면 [이미지-텍스트-이미지-텍스트]의 순서로 자연스러움을 더할 수 있습니다.
데스크탑 환경에서는 데스크탑에 맞게, 모바일 환경에서는 모바일에 맞게 레이아웃 설정을 활용해 보세요.
레이아웃 편집 툴바에서 애니메이션 설정을 클릭한 후 애니메이션을 선택하면 해당 레이아웃에 선택된 애니메이션이 적용됩니다.
레이아웃 컴포넌트에 마우스를 호버하여 숨김처리하는 방식으로 그리드 편집이 가능합니다.
숨김 처리 시에는 나머지 레이아웃들이 기존 단 수에 맞는 너비를 유지한 채로 가운데 정렬됩니다. 숨김 처리된 레이아웃들도 동일하게 순서 변경이나 삭제 가능합니다. 단, 최소 2개 이상의 단이 존재해야 합니다.
레이아웃 항목을 선택하면 레아이웃 내 각 단 사이에
<> 버튼이 활성화됩니다.
이 버튼을 드래그 드롭하는 방식으로 단 간격(좌우)을 조정할 수 있습니다. 이 간격이 조정되는 방식은 당기는 방향의 반대쪽 레이아웃이 넓어지는 방식입니다. 레이아웃 단의 개수별로 최소 너비가 존재합니다.
- 4단 레이아웃 → 최소 넓이 125 (3개의 레이아웃까지 최소 넓이 값 도달 가능)
- 3단 레이아웃 → 최소 넓이 180 (2개의 레이아웃까지 최소 넓이 값 도달 가능)
- 2단 레이아웃 → 최소 넓이 320 (1개의 레이아웃만 최소 넓이 값 도달 가능)
- 1단 레이아웃 → 조절 불가
- 숨김 처리한 레이아웃 넓이를 조절하는 경우 → 기존 단 수의 넓이 기준으로 계산
Last modified 7d ago