Studio 에디터: 요소 스택하기
5 분
페이지 메뉴
- 스택 적용하기
- 스택 방향 변경하기
- 스택 관리하기
- 스택 디자인하기
- 스택 레이아웃 조정하기
스택은 세로 또는 가로 순서로 요소 그룹을 "포괄"하는 플렉스박스 컨테이너입니다. 요소를 스택하면 요소가 정의한 여백대로 순서대로 유지되며 겹치지 않습니다.
하지만, 여백을 음수로 정의해 요소를 의도적으로 겹치게 할 수도 있습니다.
겹치는 요소를 처리해야 한다면:
문제 해결 동영상을 통해 확인 사항 및 해결 방법을 알아보세요.
스택 적용하기
요소 스택은 일관된 간격으로 디자인을 구성해 깔끔하고 세련된 레이아웃을 만들 수 있는 빠른 방법입니다. 동일한 상위 요소내에 있는 여러 요소를 선택하면, 스택 옵션이 팝업으로 표시됩니다.
스택을 적용하려면:
- 에디터로 이동합니다.
- 스택에 추가하고자 하는 요소를 클릭합니다.
- Shift 키를 누른 상태에서 다른 스택 요소를 선택합니다.
- 스택을 클릭합니다.
- (선택사항) 요소 사이의 선을 끌어 여백을 설정합니다.
도움말:
여백을 음수로 정의해 요소를 의도적으로 겹치게 할 수도 있습니다.
스택 방향 변경하기
요소를 스택하면 요소의 순서에 따라 방향이 자동으로 결정됩니다. 예를 들어, 요소가 세로로 정렬되어 있는 경우 스택은 세로가 됩니다.
어느 쪽이든, 드롭다운을 사용해 언제든지 방향을 전환할 수 있습니다. 이렇게 하면 요소가 올바른 순서로 자동으로 재정렬됩니다.
스택 관리하기
새로운 콘텐츠와 요구 사항에 맞게 스택을 사용자 지정할 수 있습니다. 스택에 요소를 추가하고 버튼 클릭으로 이동하고, 더 이상 필요하지 않은 요소를 분리하세요.
스택을 관리하려면:
- 에디터로 이동합니다.
- 해당 스택을 선택합니다.
- 다음에 수행할 작업을 선택합니다.
스택에 요소 추가하기
스택에서 요소 분리하기
아이콘을 클릭하고스택에서 분리를 클릭해 분리할 수도 있습니다.
스택 요소 순서 변경하기
/ 아래로 이동
, 또는 왼쪽으로 이동
/ 오른쪽으로 이동 
아이콘을 클릭합니다.
요소 스택 해제하기
스택 디자인하기
스택이 투명할 필요는 없습니다. 페이지에서 콘텐츠가 눈에 띄도록 스택을 디자인해 보세요. 배경 색상, 테두리, 음영을 추가합니다. 스택 모서리를 각지게 또는 둥글게 만들 수도 있습니다.
스택을 디자인하려면:
- 에디터로 이동합니다.
- 해당 스택을 선택합니다.
- 에디터 오른쪽 상단에서 속성 열기
화살표를 클릭합니다.
- 디자인 아래에서 사용 가능한 옵션을 사용해 스택을 사용자 지정합니다.
- 배경 색상 및 투명도를 설정합니다.
- 테두리를 추가해 스택 프레임을 설정합니다.
- 모서리 반경을 선택합니다.
- 음영을 활성화하고 각도, 거리, 크기 등과 같은 설정을 관리합니다.
스택 레이아웃 조정하기
창의적인 비전이나 클라이언트의 요구 사항에 맞게 모든 요소가 간격을 두고 정렬 및 여백이 설정되도록 스택 레이아웃을 조정하세요.
스택 레이아웃을 조정하려면:
- 에디터로 이동합니다.
- 해당 스택을 선택합니다.
- 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
- 레이아웃으로 스크롤합니다.
- 사용 가능한 옵션을 사용해 스택 레이아웃을 조정합니다.
- 방향을 가로에서 세로 또는 그 반대로 전환합니다.
- 아이템 간격 아래에 값을 입력해 스택 요소(예: 아이템) 사이에 동일한 여백을 생성합니다.
- 왼쪽, 오른쪽, 가운데 또는 양쪽 맞춤 중 스택 아이템에 대한 정렬을 선택합니다.
- 측면에 여백을 추가합니다.
추가 정보:
캔버스에서 직접 여백과 간격을 조정할 수 있습니다. 요소 사이의 선을 끌어 정확한 값을 입력하려면, 선을 두 번 클릭하세요. 필요한 경우, 크기 단위를 전환할 수도 있습니다.