스택
스택 (Stack) 레이아웃 — HTML
HTML 관점에서 스택 레이아웃을 사용하는 방법과 사용 가능한 클래스를 설명해 드릴게요.
출처: 문서
본문
예시 (Examples)
기본 (Basic)
content와 pf-m-fill 항목으로 구성된 기본 스택 예시예요.
거터 포함 (With gutter)
content와 pf-m-fill 항목 사이에 거터 간격을 적용한 예시예요.
문서 (Documentation)
개요 (Overview)
스택 레이아웃은 항목을 세로로 배치하도록 설계됐어요.
사용법 (Usage)
| 클래스 (Class) | 적용 대상 (Applied to) | 결과 (Outcome) |
|---|---|---|
.pf-v6-l-stack |
* |
스택 레이아웃을 시작함 |
.pf-v6-l-stack__item |
* |
스택 항목을 시작함 |
.pf-m-gutter |
.pf-v6-l-stack |
전역적으로 정의된 거터 값을 사용해 children 사이에 공간 추가 |
.pf-m-fill |
.pf-v6-l-stack > *, .pf-v6-l-stack__item |
어떤 항목이 사용 가능한 세로 공간을 채워야 하는지 지정 |