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