이윰
그리드 시스템
본 페이지의 테마코드 활용법은 2022년 01월 이후 선보인 이윰빌더 시즌4 부트스트랩5 기반의 테마코드 활용법입니다.
이전 이윰빌더 시즌4 부트스트랩3 기반의 테마코드 활용법은 아래 링크를 참조하여 주시기 바랍니다.
https://eyoom.net/page/eb4_code
Grid System
이윰빌더 테마는 반응형 디자인 프레임워크인 Bootstrap 5.x 버전을 채택하여 제작되었습니다.
부트스트랩은 기기나 뷰포트 크기가 증가함에 따라 12 열이 적절하게 확대되는 반응형, 모바일 우선 유동 그리드 시스템입니다. 그리고 Sass 변수 및 믹스인, 반응형 그리드 시스템, 사전 구축된 광범위한 구성 요소 및 강력한 JavaScript 플러그인을 특징으로 하는 세계에서 가장 인기 있는 프론트 엔드 오픈 소스 툴킷입니다.
기본 예시
Bootstrap의 그리드 시스템은 일련의 컨테이너, 행 및 열을 사용하여 콘텐츠를 레이아웃하고 정렬합니다. flexbox로 제작되었으며 완벽하게 반응합니다. 다음은 그리드 시스템이 함께 제공되는 방법에 대한 예와 자세한 설명입니다.
아래 예는 사전 정의된 그리드 클래스를 사용하여 모든 장치와 뷰포트에 동일한 너비의 열 세 개를 만듭니다.
그리드 옵션
Bootstrap의 그리드 시스템은 6개의 기본 중단점과 사용자 정의한 모든 중단점에 걸쳐 적응할 수 있습니다. 6개의 기본 그리드 계층은 다음과 같습니다.
Extra small (xs) / Small (sm) / Medium (md) / Large (lg) / Extra large (xl) / Extra extra large (xxl)
| xs | sm | md | lg | xl | xxl | ||
|---|---|---|---|---|---|---|---|
| <576px | ≥576px | ≥768px | ≥992px | ≥1200px | ≥1400px | ||
| 콘테이너 너비 | 없음 (auto) | 540px | 720px | 960px | 1140px | 1320px | |
| 클래스 접두사 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
|
| Column 수 | 12 | ||||||
| Gutter 폭 | 1.5rem (좌우 .75rem) | ||||||
| 맞춤형 Gutter | 예 | ||||||
| 중첩 가능 | 예 | ||||||
| Column 순서 | 예 | ||||||
동일한 너비
각 중단점에 대해 단위 없는 클래스를 원하는 수만큼 추가하면 모든 열의 너비가 동일합니다.
[ 그리드 예제 ]
하나의 열 너비 설정
flexbox 그리드 열에 대한 자동 레이아웃은 한 열의 너비를 설정하고 형제 열이 주위에서 자동으로 크기를 조정하도록 할 수 있음을 의미합니다.
미리 정의된 그리드 클래스(아래 참조), 그리드 믹스인 또는 인라인 너비를 사용할 수 있습니다. 다른 열은 중앙 열의 너비에 관계없이 크기가 조정됩니다.
[ 그리드 예제 ]
가변 너비 콘텐츠
col-{breakpoint}-auto 클래스를 사용 하여 콘텐츠의 자연스러운 너비에 따라 열의 크기를 조정합니다.
[ 그리드 예제 ]
모든 중단점
가장 작은 장치에서 가장 큰 장치까지 동일한 그리드의 경우 .col 클래스를 사용합니다.
특정 크기의 열이 필요한 경우 번호가 지정된 클래스를 지정하십시오. .col-*
[ 그리드 예제 ]
수평으로 쌓임
단일 .col-sm-* 클래스 집합을 사용하여 스택에서 시작하여 작은 중단점(sm) 에서 수평이 되는 기본 그리드 시스템을 만들 수 있습니다.
[ 그리드 예제 ]
믹스 앤 매치
열이 일부 그리드 계층에 쌓이는 것을 원하지 않습니까? 필요에 따라 각 계층에 대해 서로 다른 클래스를 조합하여 사용합니다. 모든 작동 방식에 대한 더 나은 아이디어는 아래 예를 참조하십시오.
[ 그리드 예제 ]
행 열
반응형 .row-cols-* 클래스를 사용 하여 콘텐츠 및 레이아웃을 가장 잘 렌더링하는 열 수를 빠르게 설정합니다. 일반 .col-* 클래스는 개별 열에 적용 되는 반면 (예: .col-md-4), 행 열 클래스는 부모 .row 에 바로 가기로 설정됩니다. 으로 .row-cols-auto 당신의 열을 자연의 폭을 제공 할 수 있습니다.
이러한 행 열 클래스를 사용하여 기본 그리드 레이아웃을 빠르게 생성하거나 카드 레이아웃을 제어할 수 있습니다.
[ 그리드 예제 ]
중첩
기본 그리드를 사용하여 콘텐츠를 중첩하려면 기존 열 내에 새로운 열 .row 집합을 추가합니다. 중첩된 행에는 최대 12개 이하의 열을 추가하는 열 집합이 포함되어야 합니다.
[ 그리드 예제 ]