---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/start-here/who-uses-it'
title: '섹션 가장자리까지 이어지게 하기 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:57:41+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  섹션 콘텐츠를 가장자리까지 이어지게 하거나, 배경은 창을 채우면서 가운데 상자에 담아 둘 수 있습니다. 섹션의 토글 하나로 정합니다. Full width입니다. 예제에서는 세 컬럼의 회색 섹션을 만든 뒤 Full width를 켜서 컬럼을 늘이고, 색상과 사진 채우기는 Backgrounds를 참조합니다.
  동영상에서는 세 컬럼의 회색 섹션을 만든 뒤 콘텐츠를 가장자리까지 이어지게 합니다.
tags:
  - 'Je eerste pagina bouwen'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+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를 켜서 컬럼을 늘이고, 색상과 사진 채우기는 Backgrounds를 참조합니다.
        동영상에서는 세 컬럼의 회색 섹션을 만든 뒤 콘텐츠를 가장자리까지 이어지게 합니다.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:57:41+0000'
      dateModified: '2026-10-24T09:09:48+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/start-here/who-uses-it'
      articleSection: 'Je eerste pagina bouwen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/start-here/who-uses-it'
      description: |-
        섹션 콘텐츠를 가장자리까지 이어지게 하거나, 배경은 창을 채우면서 가운데 상자에 담아 둘 수 있습니다. 섹션의 토글 하나로 정합니다. Full width입니다. 예제에서는 세 컬럼의 회색 섹션을 만든 뒤 Full width를 켜서 컬럼을 늘이고, 색상과 사진 채우기는 Backgrounds를 참조합니다.
        동영상에서는 세 컬럼의 회색 섹션을 만든 뒤 콘텐츠를 가장자리까지 이어지게 합니다.
      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) /[Start here](/hc/documentation/learn-dxpr-builder/start-here) /[Je eerste pagina bouwen](/hc/documentation/learn-dxpr-builder/start-here/first-steps) # 섹션 가장자리까지 이어지게 하기.

 Learn DXPR BuilderStart hereJe eerste pagina bouwen

   ## In this guide

 Related guides

- [Installation](/hc/documentation/learn-dxpr-builder/getting-started/installation)
- [Your first page](/hc/documentation/learn-dxpr-builder/getting-started/first-page)

섹션 콘텐츠를 가장자리까지 이어지게 하거나, 배경은 창을 채우면서 가운데 상자에 담아 둘 수 있습니다. 섹션의 토글 하나로 정합니다. **Full width**입니다. 예제에서는 세 컬럼의 회색 섹션을 만든 뒤 **Full width**를 켜서 컬럼을 늘이고, 색상과 사진 채우기는 [Backgrounds](/ko/hc/documentation/learn-dxpr-builder/design/backgrounds)를 참조합니다.

동영상에서는 세 컬럼의 회색 섹션을 만든 뒤 콘텐츠를 가장자리까지 이어지게 합니다.

  ## 박스형 섹션 만들기

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** 패널에는 레이아웃 토글이 세 개 있으며, 모두 기본적으로 꺼져 있습니다.

| Setting | What it does |
|---|---|
| **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**의 동작입니다. 컬럼에 **Padding**을 **Style** 패널에서 추가하거나 **Full width**를 끈 채로 둡니다.

## 다음 단계

- [Fill a section with colour, a photo or a gradient](/ko/hc/documentation/learn-dxpr-builder/design/backgrounds)에서 콘텐츠 뒤 띠를 꾸밉니다.
- [Make your layout work on phones](/ko/hc/documentation/learn-dxpr-builder/design/responsive-design)에서 작은 화면에서 컬럼 동작을 조정합니다.