스플릿

스플릿 (Split) 레이아웃 — HTML

HTML 관점에서 스플릿 레이아웃을 사용하는 방법과 사용 가능한 클래스를 설명해 드릴게요.

출처: 문서

content와 pf-m-fill 항목으로 구성된 기본 스플릿 예시예요.

content와 pf-m-fill 항목 사이에 거터 간격을 적용한 예시예요.

여러 content 항목이 줄바꿈되어 배치되는 예시예요.

스플릿 레이아웃은 항목을 가로로 배치하도록 설계됐어요.

클래스 (Class)	적용 대상 (Applied to)	결과 (Outcome)
`.pf-v6-l-split`	`*`	스플릿 레이아웃을 시작함
`.pf-v6-l-split__item`	`*`	스플릿 항목을 시작함
`.pf-m-gutter`	`.pf-v6-l-split`	전역적으로 정의된 거터 값을 사용해 children 사이에 공간 추가
`.pf-m-wrap`	`.pf-v6-l-split`	스플릿 레이아웃을 줄바꿈하도록 설정
`.pf-m-fill`	`.pf-v6-l-split > *, .pf-v6-l-split__item`	어떤 항목이 사용 가능한 가로 공간을 채워야 하는지 지정