---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/bootstrap-grid'
title: 'Bootstrap 그리드 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T01:37:41+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  추가하는 모든 행은 Bootstrap 그리드(열이 공유하는 12개의 동일한 트랙)에 배치됩니다. 1/3 + 2/3 같은
  레이아웃은 한 열에 4개 트랙, 다른 열에 8개 트랙을 줍니다. 합이 맞는 너비를 계획하고, 작은 화면용으로 행에
  두 번째 레이아웃을 지정하려면 이 페이지를 사용하세요. 행 추가 자체는 Adding a Row 문서를 참고하세요.
  동영상에서는 4열 행에 태블릿용 두 번째 레이아웃을 지정한 뒤 창을 좁힙니다.
tags:
  - 'Design guides'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Bootstrap 그리드'
      description: |-
        추가하는 모든 행은 Bootstrap 그리드(열이 공유하는 12개의 동일한 트랙)에 배치됩니다. 1/3 + 2/3 같은
        레이아웃은 한 열에 4개 트랙, 다른 열에 8개 트랙을 줍니다. 합이 맞는 너비를 계획하고, 작은 화면용으로 행에
        두 번째 레이아웃을 지정하려면 이 페이지를 사용하세요. 행 추가 자체는 Adding a Row 문서를 참고하세요.
        동영상에서는 4열 행에 태블릿용 두 번째 레이아웃을 지정한 뒤 창을 좁힙니다.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T01:37:41+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/bootstrap-grid'
      articleSection: '디자인 가이드'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/bootstrap-grid'
      description: |-
        추가하는 모든 행은 Bootstrap 그리드(열이 공유하는 12개의 동일한 트랙)에 배치됩니다. 1/3 + 2/3 같은
        레이아웃은 한 열에 4개 트랙, 다른 열에 8개 트랙을 줍니다. 합이 맞는 너비를 계획하고, 작은 화면용으로 행에
        두 번째 레이아웃을 지정하려면 이 페이지를 사용하세요. 행 추가 자체는 Adding a Row 문서를 참고하세요.
        동영상에서는 4열 행에 태블릿용 두 번째 레이아웃을 지정한 뒤 창을 좁힙니다.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 홈
            item: 'https://dxpr.com/ko'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ko
---
[도움말 센터](/ko/node/75)/[문서](/ko/hc/documentation) /[DXPR Builder 배우기](/ko/hc/documentation/learn-dxpr-builder) /[페이지 만들기](/ko/hc/documentation/learn-dxpr-builder/build) /[요소 스타일 지정](/ko/hc/documentation/learn-dxpr-builder/element-settings) /[디자인 가이드](/ko/hc/documentation/learn-dxpr-builder/design/overview) # Bootstrap 그리드.

 DXPR Builder 배우기페이지 만들기요소 스타일 지정디자인 가이드

   ## 이 가이드의 내용

 관련 가이드

- [로우 추가하기](/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)
- [휴대전화에 맞는 레이아웃 만들기](/ko/hc/documentation/learn-dxpr-builder/design/responsive-design)
- [AI 텍스트 검토하고 유지하기](/ko/hc/documentation/learn-dxpr-builder/layout/nesting)

추가하는 모든 행은 Bootstrap 그리드(열이 공유하는 12개의 동일한 트랙)에 배치됩니다. 1/3 + 2/3 같은 레이아웃은 한 열에 4개 트랙, 다른 열에 8개 트랙을 줍니다. 합이 맞는 너비를 계획하고, 작은 화면용으로 행에 두 번째 레이아웃을 지정하려면 이 페이지를 사용하세요. 행 추가 자체는 [Adding a Row](/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) 문서를 참고하세요.

동영상에서는 4열 행에 태블릿용 두 번째 레이아웃을 지정한 뒤 창을 좁힙니다.

  ## 분수가 트랙이 되는 방식

| 분수 | 트랙 | 일반적인 용도 |
|---|---|---|
| 1/1 | 12 | 전체 너비 열 하나 |
| 1/2 | 6 | 동일한 열 둘 |
| 1/3 | 4 | 동일한 열 셋, 또는 2/3 옆의 사이드바 |
| 2/3 | 8 | 1/3 사이드바 옆의 주요 콘텐츠 |
| 1/4 | 3 | 동일한 열 넷, 또는 3/4 옆의 사이드바 |
| 3/4 | 9 | 1/4 사이드바 옆의 주요 콘텐츠 |
| 1/6 | 2 | 작은 열 여섯. 예: 로고 행 |
| 5/12 and 7/12 | 5 and 7 | 너비가 거의 같은 두 열 |

행의 트랙 합은 12입니다. 합이 더 크면 넘치는 열이 새 줄로 넘어갑니다. 트랙이 정수로 나오는 분수를 사용하세요. 절반, 3분의 1, 4분의 1, 6분의 1, 12분의 1이 해당됩니다. 1/5 같은 분수에는 맞는 Bootstrap 클래스가 없습니다.

열 안의 행은 해당 열을 자체 12개 트랙으로 나눕니다. 자세한 내용은 [Nesting](/ko/hc/documentation/learn-dxpr-builder/layout/nesting) 문서를 참고하세요.

## 태블릿용으로 행에 다른 레이아웃 지정

새 행에 고르는 레이아웃은 **Medium devices (≥ 768px)**부터 적용됩니다. 해당 너비 아래에서는 열이 쌓입니다. 다음 단계는 데스크톱에 4열을 유지하고 태블릿에 한 줄에 둘씩 표시합니다.

1. 행을 가리키고 컨트롤 바에서 그리드 아이콘을 클릭하세요. 레이아웃 대화상자가 **Medium devices (≥ 768px)** 패널로 열립니다.
2. 네 열이 동일한 타일을 고르세요.
3. 이제 **Add screen size**(을)를 클릭하세요. 레이아웃 복사본과 함께 두 번째 패널이 열립니다.
4. 새 패널의 화면 크기 목록에서 **Small devices (≥ 576px)**(을)를 고르세요.
5. 이제 **Custom Layout**(을)를 클릭하고 `1/2 + 1/2 + 1/2 + 1/2`(을)를 입력한 뒤 **Save**(을)를 클릭하세요.
6. 이제 **Save**(을)를 툴바에서 클릭하세요.

절반 넷은 네 열을 모두 유지하고 한 줄에 둘씩 배치합니다. 두 열 타일은 대신 행을 두 열로 줄입니다.

## 표시되는 내용

넓은 화면에서는 행에 네 열이 나란히 표시됩니다. 브라우저 창을 768픽셀보다 좁게 만들면 한 줄에 둘씩 넘어갑니다. 576픽셀 아래에서는 모든 열이 전체 너비를 차지합니다.

## 화면 크기

레이아웃 대화상자의 각 패널은 한 화면 크기의 열을 설정합니다. 레이아웃은 자체 패널이 있는 다음 크기까지 더 큰 화면에도 적용됩니다.

| 패널 | 적용 시작 |
|---|---|
| **Extra small (< 576px)** | 가장 작은 휴대전화부터 |
| **Small devices (≥ 576px)** | 576픽셀 |
| **Medium devices (≥ 768px)** | 768픽셀. 새 행의 첫 패널 |
| **Large devices (≥ 992px)** | 992픽셀 |
| **Extra large (≥ 1200px)** | 1200픽셀 |
| **Extra extra large (≥ 1400px)** | 1400픽셀 |

**Remove screen size**(은)는 패널과 레이아웃을 삭제합니다. **Custom Layout**(은)는 `1/4 + 1/2 + 1/4` 같은 분수 목록을 받습니다. 패널의 레이아웃이 타일 중 하나가 아니면 대화상자에 **Custom Layout**(이)가 표시되고 **Custom Layout (1/2 + 1/2 + 1/2 + 1/2)** 같은 레이아웃 이름이 표시됩니다. 클릭하면 사용자 지정 레이아웃 상자에서 해당 레이아웃을 편집합니다.

## 사이트의 Bootstrap

그리드에는 페이지의 Bootstrap 5가 필요합니다. 사이트 관리자가 다음에서 출처를 고릅니다: **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`)의 **Bootstrap** 아래. **Sideload Bootstrap files** 항목은 빌더가 직접 불러오는 **Bootstrap 5** 또는 **None (theme provides Bootstrap)**(을)를 제공합니다.

## 레이아웃이 표시되지 않는 경우

- **모든 화면 크기에서 열이 쌓입니다.** Bootstrap이 불러와지지 않았습니다. 설정이 **None (theme provides Bootstrap)**(이)고 테마도 불러오지 않습니다. **Bootstrap 5**(을)를 **Sideload Bootstrap files** 아래에서 고르세요. 위치: `/admin/dxpr_studio/dxpr_builder/settings`.
- **데스크톱 레이아웃에서 열이 사라졌습니다.** 다른 화면 크기에 열이 더 적은 타일을 골라 빌더가 동일한 너비의 레이아웃을 맞게 줄였습니다. [Undo and redo](/ko/hc/documentation/learn-dxpr-builder/editing/undo-redo) 문서대로 변경을 실행 취소하고 열마다 분수 하나씩 **Custom Layout**(을)를 사용하세요.
- **마지막 열이 새 줄로 떨어집니다.** 분수 합이 12개 트랙 한 줄을 넘습니다. `1/4 + 3/4` 같은 합이 1이 되게 하세요.
- **사용자 지정 열에 너비가 명확하지 않습니다.** 1/5 같은 분수에는 Bootstrap 클래스가 없습니다. 절반, 3분의 1, 4분의 1, 6분의 1, 12분의 1을 사용하세요.

## 다음 단계

- [Adding a Row](/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): 행을 추가하고 열 프리셋을 고릅니다.
- [Responsive design](/ko/hc/documentation/learn-dxpr-builder/design/responsive-design): 휴대전화, 태블릿, 데스크톱에 요소를 표시하거나 숨깁니다.
- [Nesting](/ko/hc/documentation/learn-dxpr-builder/layout/nesting): 열 안에 행을 넣어 더 세밀한 레이아웃을 만듭니다.