레벨
레벨 (Level) 레이아웃 — HTML
HTML 관점에서 레벨 레이아웃을 사용하는 방법과 사용 가능한 클래스를 설명해 드릴게요.
출처: 문서
본문
예시 (Examples)
항목 2개 (Two items)
content 항목 2개를 배치하는 예시예요.
항목 3개 (Three items)
content 항목 3개를 배치하는 예시예요.
거터 포함 (With gutters)
거터 간격이 적용된 content 항목들을 배치하는 예시예요.
문서 (Documentation)
개요 (Overview)
레벨 레이아웃은 children 사이에 공간을 균등하게 분배하고 x축 기준으로 가운데 정렬하도록 설계됐어요. 기본적으로 children은 가로로 배치되고 반응형으로 줄바꿈돼요.
사용법 (Usage)
| 클래스 (Class) | 적용 대상 (Applied to) | 결과 (Outcome) |
|---|---|---|
.pf-v6-l-level |
<div>, <section>, 또는 <article> |
레벨 레이아웃을 초기화함 |
.pf-v6-l-level__item |
<div> |
레벨의 자식을 명시적으로 설정함. 이 클래스는 필수는 아니지만 BEM 규칙에 맞추고, 나중에 modifier를 적용하는 데 사용될 엔티티를 제공하기 위해 포함됨 |
.pf-m-gutter |
.pf-v6-l-level |
전역적으로 정의된 거터 값을 사용해 children 사이에 공간 추가 |