Stack (스택)
Stack(스택) 은 요소를 가로 또는 세로로 자동 정렬하는 레이아웃 도구입니다. CSS의 Flexbox와 같은 개념이라고 생각하면 됩니다.
핵심 속성
| 속성 | 설명 |
|---|---|
| 방향(Direction) | 가로(→) 또는 세로(↓) |
| 간격(Gap) | 요소 사이의 일정한 간격 |
| 정렬(Align) | 시작/가운데/끝 정렬 |
| 분배(Distribute) | 남는 공간을 어떻게 나눌지 |
만드는 법
- 정렬할 요소들을 선택
- 우클릭 → Stack, 또는 오른쪽 패널에서 Stack 활성화
- 방향과 간격을 조절
메뉴, 버튼 그룹, 카드 목록처럼 “일정 간격으로 나열되는 것”은 거의 다 Stack으로 만듭니다.
Stack 활용 예: 버튼
가장 흔한 Stack 활용이 버튼입니다. 텍스트를 Stack으로 감싸고 패딩·배경색을 주면 버튼이 됩니다. 자세한 순서는 버튼 만들기에서 다룹니다.
실전 팁
- 간격은 4 · 8 · 16px처럼 일정한 단위로 통일하면 깔끔합니다.
- 좌표를 손으로 고정하기보다 Stack에 맡기면 반응형이 훨씬 쉬워집니다.
다음 단계
버튼 만들기에서 Stack의 가장 흔한 활용을 실습해보세요.
자주 묻는 질문
Last updated on