---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/full-width-layouts'
title: '섹션을 끝까지 펼치기 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T01:37:45+00:00'
updated: '2026-10-24T06:23:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  섹션 내용을 한쪽 끝에서 다른 쪽 끝까지 펼치거나, 배경이 창을 채우는 동안 가운데 박스에 담아 둘 수 있습니다. 섹션의 토글 하나로 결정됩니다: Full width. 예시에서는 회색 섹션에 세 칸을 만들고 Full width(을)를 켜서 칸을 펼칩니다. 색상 및 사진 채우기에 대해서는 배경(을)를 보세요.
  이 비디오는 회색 섹션에 3칸을 만든 뒤 내용을 한쪽 끝에서 다른 쪽 끝까지 펼칩니다.
tags:
  - Ontwerpgidsen
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T06:23:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: '섹션을 끝까지 펼치기'
      description: |-
        섹션 내용을 한쪽 끝에서 다른 쪽 끝까지 펼치거나, 배경이 창을 채우는 동안 가운데 박스에 담아 둘 수 있습니다. 섹션의 토글 하나로 결정됩니다: Full width. 예시에서는 회색 섹션에 세 칸을 만들고 Full width(을)를 켜서 칸을 펼칩니다. 색상 및 사진 채우기에 대해서는 배경(을)를 보세요.
        이 비디오는 회색 섹션에 3칸을 만든 뒤 내용을 한쪽 끝에서 다른 쪽 끝까지 펼칩니다.
      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:45+0000'
      dateModified: '2026-10-24T06:23:17+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/full-width-layouts'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/full-width-layouts'
      description: |-
        섹션 내용을 한쪽 끝에서 다른 쪽 끝까지 펼치거나, 배경이 창을 채우는 동안 가운데 박스에 담아 둘 수 있습니다. 섹션의 토글 하나로 결정됩니다: Full width. 예시에서는 회색 섹션에 세 칸을 만들고 Full width(을)를 켜서 칸을 펼칩니다. 색상 및 사진 채우기에 대해서는 배경(을)를 보세요.
        이 비디오는 회색 섹션에 3칸을 만든 뒤 내용을 한쪽 끝에서 다른 쪽 끝까지 펼칩니다.
      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
---
[Help Center](/ko/node/75)/[Documentation](/ko/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # 섹션을 끝까지 펼치기.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [배경](/ko/hc/documentation/learn-dxpr-builder/design/backgrounds)
- [휴대전화에 맞는 레이아웃 만들기](/ko/hc/documentation/learn-dxpr-builder/design/responsive-design)

섹션 내용을 한쪽 끝에서 다른 쪽 끝까지 펼치거나, 배경이 창을 채우는 동안 가운데 박스에 담아 둘 수 있습니다. 섹션의 토글 하나로 결정됩니다: **Full width**. 예시에서는 회색 섹션에 세 칸을 만들고 **Full width**(을)를 켜서 칸을 펼칩니다. 색상 및 사진 채우기에 대해서는 [배경](/ko/hc/documentation/learn-dxpr-builder/design/backgrounds)(을)를 보세요.

이 비디오는 회색 섹션에 3칸을 만든 뒤 내용을 한쪽 끝에서 다른 쪽 끝까지 펼칩니다.

  ## 박스형 섹션 만들기

1. 다음을 클릭하세요: 빈 콘텐츠 영역의 **Add Elements**. **Section**(을)를 **Layout** 탭에서 고르세요.
2. 섹션에 마우스를 올리고 **More**(을)를 연 뒤 **Settings**(을)를 고르세요.
3. 다음 패널을 여세요: **Style**. 연한 회색 **Background**(을)를 고르세요.
4. 다음을 클릭하세요: **Save**. 회색이 이미 창을 가득 채웁니다.
5. 다음을 클릭하세요: 섹션의 **+**. **Row**(을)를 고르세요.
6. 행의 격자 아이콘을 클릭하고 세 칸이 같은 타일을 고른 뒤 **Save**(을)를 클릭하세요.
7. 각 칸에서 다음을 클릭하세요: **+**. **Text**(을)를 **Content** 탭에서 고르고, **Heading 4** 하나와 한 줄을 입력한 뒤 **Save**(을)를 클릭하세요.

세 칸이 이제 회색 띠 위의 가운데 박스에 놓입니다.

## Full width 켜기

1. 섹션에서 **More**(을)를 열고 **Settings**(을)를 고르세요.
2. 다음을 켜세요: **General** 패널의 **Full width**.
3. 다음을 클릭하세요: **Save**.
4. 다음을 클릭하세요: DXPR Builder 도구 모음의 **Save**.
5. 보기 메뉴(도구 모음의 눈 아이콘)를 열고 **Preview**(을)를 고르세요.

## 결과 화면

회색 띠는 이전과 같아 보입니다. 바뀐 것은 콘텐츠 박스뿐입니다. 첫 칸은 이제 섹션의 왼쪽 끝에서 시작하고 마지막 칸은 오른쪽 끝에서 끝납니다.

모든 섹션은 두 부분으로 이루어집니다. 배경을 담는 바깥 요소와 행을 담는 안쪽 박스입니다. **Full width**(은)는 안쪽 박스만 바꿉니다. 끄면 최대 너비로 가운데 정렬되고, 켜면 섹션 끝까지 늘어납니다.

## 설정

섹션의 **General** 패널에는 세 가지 레이아웃 토글이 있으며, 기본적으로 모두 꺼져 있습니다:

| 설정 | 기능 |
|---|---|
| **Full width** | 행이 가운데 박스 대신 섹션을 한쪽 끝에서 다른 쪽 끝까지 채움 |
| **100% height** | 섹션 높이가 최소 브라우저 창만큼 높음 |
| **Vertical centering** | 행이 섹션의 세로 가운데에 놓임 |

행에는 자체 너비 설정이 없습니다. 섹션이 결정합니다.

## 두 가지 패턴

- **Edge-to-edge background, boxed text**: 흔한 히어로. **Full width**(을)를 끄고 **Style** 또는 **Background effects** 패널에서 배경을 설정하세요.
- **Edge-to-edge content**: 카드나 사진 띠. **Full width**(을)를 켜고, 텍스트가 창 끝에 너무 가까우면 칸에 **Padding**(을)를 주세요.

## 변경 사항이 보이지 않는 경우

- **Full width를 켜도 아무것도 바뀌지 않습니다.** 휴대전화 같은 좁은 화면에서는 박스형도 이미 너비를 가득 채웁니다. 브라우저 창을 넓히고 다시 보세요.
- **배경이 창 끝까지 닿지 않습니다.** 테마가 페이지 콘텐츠를 박스형 영역에 배치하므로 섹션은 그 영역만 채울 수 있습니다. 테마에서 전체 너비 페이지 레이아웃이나 영역을 고르세요.
- **텍스트가 창 끝에 닿습니다.** **Full width**(이)가 하는 일입니다. 칸의 **Style** 패널에서 **Padding**(을)를 추가하거나 **Full width**(을)를 끄세요.

## 다음 단계

- [색상, 사진, 그라데이션으로 섹션 채우기](/ko/hc/documentation/learn-dxpr-builder/design/backgrounds): 콘텐츠 뒤의 띠를 꾸미세요.
- [휴대전화에 맞는 레이아웃 만들기](/ko/hc/documentation/learn-dxpr-builder/design/responsive-design): 작은 화면에서 칸이 어떻게 동작할지 조정하세요.