--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/layout/sections' title: '섹션 추가하기 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:55:58+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 섹션은 페이지의 띠 하나입니다. 맨 위의 히로나 아래 회색 기능 띠가 그 예입니다. 각 섹션에 배경, 텍스트 색상, 여백, 높이를 지정하고 로우나 콘텐츠로 채웁니다. 섹션 추가와 설정은 이 페이지에서 설명합니다. 하나를 컬럼으로 나누려면 Rows and columns를 참조합니다. tags: - Lay-out 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: |- 섹션은 페이지의 띠 하나입니다. 맨 위의 히로나 아래 회색 기능 띠가 그 예입니다. 각 섹션에 배경, 텍스트 색상, 여백, 높이를 지정하고 로우나 콘텐츠로 채웁니다. 섹션 추가와 설정은 이 페이지에서 설명합니다. 하나를 컬럼으로 나누려면 Rows and columns를 참조합니다. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:55:58+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/layout/sections' articleSection: Lay-out - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/layout/sections' description: |- 섹션은 페이지의 띠 하나입니다. 맨 위의 히로나 아래 회색 기능 띠가 그 예입니다. 각 섹션에 배경, 텍스트 색상, 여백, 높이를 지정하고 로우나 콘텐츠로 채웁니다. 섹션 추가와 설정은 이 페이지에서 설명합니다. 하나를 컬럼으로 나누려면 Rows and columns를 참조합니다. 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) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # 섹션 추가하기. Learn DXPR BuilderBuild pagesAdd contentLay-out ## In this guide Related guides - [로우 추가하기](/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) - [배경](/ko/hc/documentation/learn-dxpr-builder/design/backgrounds) - [섹션을 끝까지 펼치기](/ko/hc/documentation/learn-dxpr-builder/design/full-width-layouts) 섹션은 페이지의 띠 하나입니다. 맨 위의 히로나 아래 회색 기능 띠가 그 예입니다. 각 섹션에 배경, 텍스트 색상, 여백, 높이를 지정하고 로우나 콘텐츠로 채웁니다. 섹션 추가와 설정은 이 페이지에서 설명합니다. 하나를 컬럼으로 나누려면 [Rows and columns](/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)를 참조합니다. ## 섹션 추가하기 예제에서는 클리닉용 남색 히로 섹션을 만듭니다. 아래에는 세 컬럼의 연회색 섹션이 이어집니다. 1. 빈 페이지에서 **Add Elements**를 클릭하고 **Layout** 탭에서 **Section**을 고릅니다. 기존 섹션 아래에는 그 아래의 둥근 더하기인 **Add Section Below**를 클릭합니다. 2. 섹션에 마우스를 올리고 **More**를 열어 **Settings**를 선택합니다. 3. 섹션 전체를 설정합니다. 여기서는 **HTML classes** 아래의 **Align text center**, 남색 **Background**, 흰색 **Font color**입니다. **Save**를 클릭합니다. 4. 섹션의 **+**를 클릭하여 콘텐츠를 바로 추가하거나 **Row**를 추가하여 컬럼으로 나눕니다. 5. 도구 모음에서 **Save**를 클릭하여 페이지를 저장합니다. **Background**와 **Font color**는 대화상자의 **Style** 패널에 있습니다. 새 요소는 섹션 맨 위에 추가되므로 가장 아래 요소부터 추가합니다. 동영상에서는 제목보다 버튼을 먼저 넣습니다. ## 표시 내용 남색 띠가 창을 가장자리까지 채웁니다. 제목과 버튼은 가운데 정렬 상자, 즉 섹션의 내부 컨테이너 안에 머뭅니다. 회색 섹션은 바로 아래에서 시작하며, 세 기능 컬럼이 동일한 가운데 상자에 있습니다. 새 섹션에는 이미 **HTML classes**에 클래스 **Vertical padding size 5 (py-5)**가 들어 있습니다. 이 클래스는 콘텐츠 위아래에 여백을 줍니다. ## 섹션 설정하기 설정 대화상자에는 패널이 다섯 개 있습니다. **General**, **Background effects**, **Animation**, **Style**, **Hover style**입니다. **Background effects**는 섹션에만 있습니다. | Setting | Panel | What it does | Default | |---|---|---|---| | **Full width** | General | 로우가 가운데 컨테이너 안이 아니라 가장자리까지 이어집니다. | Off | | **100% height** | General | 섹션이 최소한 브라우저 창만큼 높습니다. | Off | | **Vertical centering** | General | 자신보다 높은 섹션의 세로 가운데에 콘텐츠가 배치됩니다. | Off | | **HTML ID** | General | 앵커 이름입니다. `#name`으로 연결하면 이 섹션으로 이동합니다. | Empty | | **HTML classes** | General | 유틸리티 클래스입니다(예: **Align text center** 또는 안쪽 여백 크기). | **Vertical padding size 5 (py-5)** | | **Background effect** | Background effects | **Simple image**, **Fixed image**, **Parallax image**, **Gradient** 또는 **YouTube video** | **Simple image** | | **Background**, **Font color** | Style | 섹션 뒤의 색상과 텍스트 색상입니다. | None: the theme decides | 배경은 **Full width** 설정과 관계없이 항상 섹션 전체에 걸칩니다. 이미지 효과는 선택한 **Background image**를 **Style** 패널에서 움직입니다. [Backgrounds](/ko/hc/documentation/learn-dxpr-builder/design/backgrounds)에 각 효과가 나와 있습니다. 여백을 늘리거나 줄이려면 **Vertical padding size 5 (py-5)**를 더 작은 크기나 **No vertical padding (py-0)**으로 바꿉니다. 정확한 픽셀 지정은 **Style** 패널의 박스 모델을 사용합니다. 자세한 내용은 [Spacing](/hc/documentation/learn-dxpr-builder/element-settings/spacing)에서 설명합니다. ## 섹션 레시피 | Section | Settings that make it | |---|---| | Hero | **100% height**와 **Vertical centering**을 켜고, **Parallax image** 효과, 제목, 버튼을 사용합니다. | | Features | 밝은 **Background**, 제목, 세 컬럼의 로우를 사용합니다. | | Call to action | 강한 **Background**, **Align text center**, 짧은 문구 하나와 버튼을 사용합니다. | | Testimonials | 밝은 **Background**와 세 컬럼의 로우를 사용하고, 각 컬럼에 **Block quote** | [Design a hero section](/ko/hc/documentation/learn-dxpr-builder/tutorials/hero-section)에서 첫 번째를 단계별로 만듭니다. ## 표시되지 않는 경우 - **빈 페이지에 Add Elements 버튼이 없습니다.** 페이지 생성 어시스턴트가 꺼져 있어 빈 페이지에는 **Choose a template**만 표시됩니다. 빈 영역을 클릭하여 요소 선택기를 열거나, **Enable page creation assistant**를 `/admin/dxpr_studio/dxpr_builder/ai_settings` 경로에서 켭니다. - **Add Section Below 버튼이 없습니다.** 페이지에 바로 놓인 섹션에만 있으며, 컬럼이나 탭 안의 섹션에는 없습니다. 대신 컬럼의 **+**를 클릭합니다. - **세로 가운데 정렬이 적용되지 않습니다.** 섹션은 콘텐츠만큼만 높으므로 중앙에 배치할 여백이 없습니다. **100% height**도 함께 켭니다. - **Full width를 켜도 아무것도 바뀌지 않습니다.** 배경은 이미 섹션 전체에 걸칩니다. **Full width**는 로우를 가장자리까지만 이동합니다. 한 컬럼에 짧은 텍스트만 있으면 변화를 알아보기 어렵습니다. - **추가하지 않은 섹션이 나타났습니다.** 빈 페이지에서 **Row**나 콘텐츠 요소를 골랐고, 모든 요소에는 주변에 섹션이 필요합니다. DXPR Builder가 대신 하나 추가했습니다. 다른 섹션처럼 설정을 엽니다. ## 다음 단계 - [Rows and columns](/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): 섹션을 컬럼으로 나눕니다. - [Backgrounds](/ko/hc/documentation/learn-dxpr-builder/design/backgrounds): 섹션용 패럴랙스, 그러데이션, 동영상 효과입니다. - [Full-width layouts](/ko/hc/documentation/learn-dxpr-builder/design/full-width-layouts): 로우를 가장자리까지 이어야 할 때를 설명합니다.