스택
스택 (Stack) 레이아웃 — 디자인 가이드라인
스택 레이아웃은 항목을 세로로 배치하며, 하나 이상의 항목이 남은 세로 공간을 채워요. 언제 쓰고 어떻게 응용하는지 디자인 관점에서 설명해 드릴게요.
출처: 문서
본문
스택 레이아웃은 항목을 세로로 배치하며, 하나 이상의 항목이 사용 가능한 세로 공간을 채워요.
요소 (Elements)
- 스택 (Stack): 모든 스택 항목을 담는 스택 컨테이너예요.
- 스택 항목 (Stack item): 스택에 배치할 콘텐츠의 개별 섹션이에요.
사용법 (Usage)
스택 vs 다른 레이아웃 (When to use stack vs other layouts)
콘텐츠가 줄바꿈(wrap)될 필요가 없을 때 스택 레이아웃을 사용하세요. 줄바꿈이 필요한 레이아웃이 필요하다면 flex, gallery, level, split 레이아웃을 대신 선택하세요.
변형 (Variations)
공간을 채우는 여러 항목 (Multiple items that fill space)
레이아웃에서 남은 세로 공간을 채울 스택 항목을 지정할 수 있어요. 하나 이상의 항목을 채움으로 설정할 수 있으며, 그러면 남은 공간을 균등하게 나눠 가져요.
항목 주위의 거터 (Gutters around items)
항목 사이의 간격을 조정하려면 관련 React와 HTML 예제에 보이는 것처럼 거터를 적용할 수 있어요.