스플릿
스플릿 (Split) 레이아웃 — 디자인 가이드라인
스플릿 레이아웃은 항목을 가로로 배치하며, 뷰포트가 리사이즈될 때 하나의 항목이 남은 가로 공간을 채워요. 언제 쓰고 어떻게 응용하는지 디자인 관점에서 설명해 드릴게요.
출처: 문서
본문
스플릿 레이아웃은 컨테이너 안에서 항목을 가로로 배치하며, 뷰포트가 리사이즈될 때 하나의 항목이 남은 가로 공간을 채워요.
요소 (Elements)
- 스플릿 (Split): 모든 스플릿 항목을 담는 스플릿 컨테이너예요.
- 스플릿 항목 (Split item): 스플릿 레이아웃에 배치할 콘텐츠의 개별 섹션이에요.
사용법 (Usage)
콘텐츠가 유연해야 하고 동적으로 변할 수 있을 때 스플릿 레이아웃을 사용하세요.
변형 (Variations)
공간을 채우는 여러 항목 (Multiple items that fill space)
레이아웃에서 남은 가로 공간을 채울 스플릿 항목을 지정할 수 있어요. 하나 이상의 항목을 채움으로 설정할 수 있으며, 그러면 남은 공간을 균등하게 나눠 가져요.
줄바꿈되는 항목 (Items that wrap)
화면이 리사이즈될 때 다른 콘텐츠 사이에 맞도록 스플릿 항목을 줄바꿈할 수 있어요. 줄바꿈 가능한 항목을 구현하려면 관련 React와 HTML 예제를 참고하세요.
항목 주위의 거터 (Gutters around items)
스플릿 항목 사이의 간격을 조정하려면 거터를 적용할 수 있어요.