--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/backgrounds' title: '배경 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T01:37:37+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 모든 섹션을 색상, 사진, 그라데이션으로 채울 수 있습니다. 색상과 사진은 Style 패널에서 가져오며, 섹션, 행, 열, 요소에 모두 있습니다. 섹션에는 그라데이션, 고정 및 패럴랙스 사진, YouTube 동영상용 Background effects 패널이 추가됩니다. 예시에서는 도시 사진, 흰색 텍스트, 위의 그라데이션을 사용한 남색 섹션을 만듭니다. 동영상에서는 섹션 뒤에 사진을 추가한 뒤 그라데이션으로 덮습니다. 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-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: |- 모든 섹션을 색상, 사진, 그라데이션으로 채울 수 있습니다. 색상과 사진은 Style 패널에서 가져오며, 섹션, 행, 열, 요소에 모두 있습니다. 섹션에는 그라데이션, 고정 및 패럴랙스 사진, YouTube 동영상용 Background effects 패널이 추가됩니다. 예시에서는 도시 사진, 흰색 텍스트, 위의 그라데이션을 사용한 남색 섹션을 만듭니다. 동영상에서는 섹션 뒤에 사진을 추가한 뒤 그라데이션으로 덮습니다. 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:37+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/design/backgrounds' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/backgrounds' description: |- 모든 섹션을 색상, 사진, 그라데이션으로 채울 수 있습니다. 색상과 사진은 Style 패널에서 가져오며, 섹션, 행, 열, 요소에 모두 있습니다. 섹션에는 그라데이션, 고정 및 패럴랙스 사진, YouTube 동영상용 Background effects 패널이 추가됩니다. 예시에서는 도시 사진, 흰색 텍스트, 위의 그라데이션을 사용한 남색 섹션을 만듭니다. 동영상에서는 섹션 뒤에 사진을 추가한 뒤 그라데이션으로 덮습니다. 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/full-width-layouts) - [스크롤, 호버, 클릭 시 콘텐츠 애니메이션](/ko/hc/documentation/learn-dxpr-builder/design/animation-tab) - [에디터 라이선스 확보하기](/ko/hc/documentation/learn-dxpr-builder/tutorials/hero-section) 모든 섹션을 색상, 사진, 그라데이션으로 채울 수 있습니다. 색상과 사진은 **Style** 패널에서 가져오며, 섹션, 행, 열, 요소에 모두 있습니다. 섹션에는 그라데이션, 고정 및 패럴랙스 사진, YouTube 동영상용 **Background effects** 패널이 추가됩니다. 예시에서는 도시 사진, 흰색 텍스트, 위의 그라데이션을 사용한 남색 섹션을 만듭니다. 동영상에서는 섹션 뒤에 사진을 추가한 뒤 그라데이션으로 덮습니다. ## 색상과 사진 추가 1. 빈 콘텐츠 영역에서 **Add Elements**(을)를 클릭하고 **Layout** 탭에서 **Section**(을)를 고르세요. 2. 섹션을 가리키고 **More > Settings**(을)를 여세요. 3. 다음을 여세요: **Style** 패널. 4. 다음용으로 진한 남색 견본을 고르세요: **Background**. 5. 다음용으로 흰색을 고르세요: **Font color**. 6. 다음에서 **Background image** 아래 **Select Image**(을)를 클릭하세요. 미디어 라이브러리에서 검색하고 사진을 선택한 뒤 **Insert selected**(을)를 클릭하세요. 7. 다음을 설정하세요: **Background style**(을)를 **Cover**(으)로. 8. 다음을 설정하세요: **Background position**(을)를 **Center center**(으)로. **Save**(을)를 클릭하세요. 9. 섹션의 **+**(을)를 클릭하고 **Content** 탭에서 **Text**(을)를 고르세요. 10. 다음 같은 제목을 입력하세요: `Evening lectures`. 아래에 한 줄을 추가하세요. 제목을 **Heading 2**(으)로 설정하고 에디터 툴바에서 두 줄을 모두 가운데로 맞추세요. 11. 다음을 여세요: **Style** 패널. **Font color**(을)를 흰색으로 설정한 뒤 **Save**(을)를 클릭하세요. ## 그라데이션 추가 1. 섹션을 가리키고 **More > Settings**(을)를 다시 여세요. 2. 다음을 여세요: **Background effects** 패널. **Background effect**(을)를 **Gradient**(으)로 설정하세요. 3. 다음을 고른 뒤 **Save**(을)를 클릭하세요: **Start color**와 **End color**. 4. 툴바에서 **Save**(을)를 클릭하고 뷰 메뉴(눈 아이콘)를 연 뒤 **Preview**(을)를 고르세요. ## 표시되는 내용 첫 단계 뒤에는 흰색 제목 뒤의 섹션 전체에 사진이 채워집니다. **Cover**(은)는 맞지 않는 부분을 자르고, **Center center**(은)는 사진의 가운데를 보기에 유지합니다. 남색은 사진이 불러와지는 동안이나 사진이 닿지 않는 곳에만 표시됩니다. 그라데이션은 위의 시작 색상에서 아래의 끝 색상으로 섞입니다. 사진 위에 얹힙니다. 불투명한 색상은 사진을 완전히 가리며, 약간 투명한 색상은 사진을 비칩니다. ## 설정 ### Style 패널(모든 섹션, 행, 열, 요소) | 설정 | 기능 | 기본값 | |---|---|---| | **Background** | 색상 선택기나 테마 견본의 채우기 색상 | 없음 | | **Background image** | 다음으로 고르는 미디어 라이브러리의 사진: **Select Image** | 없음 | | **Background style** | **Cover**(은)는 요소를 채우고 자릅니다. **Contain**(은)는 전체 그림을 보여주며 빈틈이 남을 수 있습니다. **No repeat**(은)는 자체 크기로 한 번 보여줍니다. **Repeat**(은)는 바둑판식으로 배치합니다 | **Theme defaults** | | **Background position** | 자를 때 보기 유지되는 그림 부분. 예: **Center center**, **Left top** | **Theme defaults** | AI 이미지 생성이 설정되면 **Background image**에도 프롬프트를 사용합니다. 자세한 내용은 [AI image generation](/ko/hc/documentation/learn-dxpr-builder/ai/image-generation) 문서를 참고하세요. ### Background effects 패널(섹션 전용) | 배경 효과 | 기능 | 추가 설정 | |---|---|---| | **Simple image** (기본값) | 사진이 페이지와 함께 스크롤됩니다 | 없음 | | **Fixed image** | 페이지가 위로 스크롤되는 동안 사진은 제자리에 있습니다 | 없음 | | **Parallax image** | 사진이 페이지보다 느리게 움직입니다. 예시는 [Hero section](/ko/hc/documentation/learn-dxpr-builder/tutorials/hero-section) 문서를 참고하세요. | **Parallax speed**, **Parallax mode** (**Fixed** 또는 **Local**), **Disable on mobile** | | **Gradient** | 두 색상이 섹션에 걸쳐 섞입니다. 사진이 있으면 위에 얹힙니다 | **Start color**, **End color**, **Gradient direction** (180도는 위에서 아래로), **Start position**, **End position** | | **YouTube video** | 음소거된 YouTube 동영상이 섹션을 채웁니다. 반복하려면 **Loop**(을)를 선택하세요 | **YouTube video URL**, **Video options**, **Start time in seconds**, **Stop time in seconds** | 고정 및 패럴랙스 효과는 **Style** 패널에서 설정한 사진을 움직입니다. YouTube 동영상에는 사진이 필요 없습니다. ## 배경이 표시되지 않는 경우 - **Background effects 패널이 없습니다.** 섹션에만 있습니다. 행, 열, 요소가 아니라 섹션을 가리키고 **More > Settings**(을)를 여세요. - **사진이 잘립니다.** **Cover**(은)는 섹션에 맞지 않는 부분을 자릅니다. 주제를 보기에 유지하려면 **Background position**(을)를 바꾸거나 **Contain**(을)를 고르세요. - **그라데이션이 사진을 가립니다.** 그라데이션은 위에 얹히며, 불투명한 색상은 사진을 덮습니다. 색상 선택기에서 **Start color**와 **End color**의 불투명도를 낮추세요. - **섹션에 그라데이션이 없습니다.** 그라데이션에는 두 색상이 모두 필요합니다. **Start color**와 **End color**(을)를 고르세요. - **YouTube 동영상이 재생되지 않습니다.** **YouTube video URL**(이)가 비어 있거나 단일 동영상 링크가 아닙니다. `https://www.youtube.com/watch?v=` 뒤에 ID가 오는 동영상의 전체 주소를 붙여넣으세요. ## 다음 단계 - [Full-width layouts](/ko/hc/documentation/learn-dxpr-builder/design/full-width-layouts): 배경과 콘텐츠를 가장자리까지 확장합니다. - [Animation tab](/ko/hc/documentation/learn-dxpr-builder/design/animation-tab): 섹션이 보기에 스크롤될 때 텍스트를 페이드인합니다. - [Hero section](/ko/hc/documentation/learn-dxpr-builder/tutorials/hero-section): 패럴랙스 사진의 전체 페이지 헤더를 만듭니다.