---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/layout/positioned-layers'
title: '위치 지정 레이어 추가하기 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:55:43+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '요소를 겹치거나 정확한 위치에 놓고 싶을 때 Positioned layers를 사용합니다. 로우와 컬럼으로는 할 수 없습니다. 원하는 위치에 각 요소를 드래그하는 캔버스가 생깁니다. 사진 위의 제목이 그 예입니다. 예제에서는 이미지 위에 흰색 open day 제목을 겹칩니다. 일반적인 나란 배치 콘텐츠에는 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: '요소를 겹치거나 정확한 위치에 놓고 싶을 때 Positioned layers를 사용합니다. 로우와 컬럼으로는 할 수 없습니다. 원하는 위치에 각 요소를 드래그하는 캔버스가 생깁니다. 사진 위의 제목이 그 예입니다. 예제에서는 이미지 위에 흰색 open day 제목을 겹칩니다. 일반적인 나란 배치 콘텐츠에는 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:43+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/positioned-layers'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/layout/positioned-layers'
      description: '요소를 겹치거나 정확한 위치에 놓고 싶을 때 Positioned layers를 사용합니다. 로우와 컬럼으로는 할 수 없습니다. 원하는 위치에 각 요소를 드래그하는 캔버스가 생깁니다. 사진 위의 제목이 그 예입니다. 예제에서는 이미지 위에 흰색 open day 제목을 겹칩니다. 일반적인 나란 배치 콘텐츠에는 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/sections)
- [AI 텍스트 검토하고 유지하기](/ko/hc/documentation/learn-dxpr-builder/layout/nesting)
- [스크롤, 호버, 클릭 시 콘텐츠 애니메이션](/ko/hc/documentation/learn-dxpr-builder/design/animation-tab)

요소를 겹치거나 정확한 위치에 놓고 싶을 때 Positioned layers를 사용합니다. 로우와 컬럼으로는 할 수 없습니다. 원하는 위치에 각 요소를 드래그하는 캔버스가 생깁니다. 사진 위의 제목이 그 예입니다. 예제에서는 이미지 위에 흰색 open day 제목을 겹칩니다. 일반적인 나란 배치 콘텐츠에는 [rows and columns](/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)가 휴대전화에서 정리하기 쉽습니다.

  ## 위치 지정 레이어 컨테이너 추가하기

1. 컬럼에 마우스를 올리고 컨트롤 표시줄의 **+**를 클릭하거나, 빈 컬럼 가운데의 **+**를 클릭하여 요소 선택기를 엽니다.
2. 탭 **Layout**에서 항목 **Positioned layers**를 클릭합니다.
3. 먼저 설정이 열립니다. 가장 높은 레이어가 들어가도록 **Height**를 설정한 뒤 **Save**를 클릭합니다. 빈 캔버스가 나타납니다.
4. 캔버스에 마우스를 올리고 컨트롤 표시줄의 **+**를 클릭하여 **Text**나 **Image** 같은 요소를 추가합니다. 추가한 요소마다 위치를 지정할 수 있는 레이어가 됩니다.

## 표시 내용

캔버스는 설정한 높이를 유지하고, 각 레이어는 놓은 위치 그대로 다른 레이어 위나 아래에 있습니다. 방문자에게는 에디터에서 보는 그대로의 구성이 표시됩니다. 위치는 캔버스 대비 비율로 저장되므로 캔버스가 좁아져도 레이어가 자리를 유지합니다. **Responsive**를 켜지 않으면 텍스트는 크기를 유지합니다.

## 위치 지정 레이어 설정하기

설정은 다음에서 엽니다. **More** > **Settings**를 **Positioned layers** 컨트롤 표시줄에서 엽니다.

| Setting | What it does | Default |
|---|---|---|
| **Width** | 캔버스 너비입니다(예: 100% 또는 600px). | 100% |
| **Height** | 캔버스 높이로, 픽셀 단위입니다. | 500 |
| **Responsive** | 캔버스 너비에 따라 캔버스 높이와 텍스트를 조절하므로 작은 화면에서도 구성의 비율이 유지됩니다. | Off |

## 레이어 배치하기

- **Select**: 레이어를 클릭합니다. 모서리와 가장자리에 핸들이 나타납니다.
- **Move**: 컨트롤 표시줄에서 **Text**나 **Image** 같은 이름으로 레이어를 드래그합니다. 레이어는 캔버스 안에 머뭅니다.
- **Resize**: 선택한 레이어의 핸들을 드래그합니다.
- **Add at a spot**: 캔버스의 빈 부분을 더블클릭합니다. 요소 선택기가 열리고 새 요소가 클릭한 위치에 들어갑니다.

각 레이어의 **More** 메뉴에는 네 가지 추가 항목이 있습니다. **100% width**와 **100% height**는 레이어를 캔버스 가득 늘이고, **Bring forward**와 **Send backward**는 다른 레이어 위나 아래로 이동합니다.

## 표시되지 않는 경우

- **드래그해도 레이어가 움직이지 않습니다.** 레이어는 컨트롤 표시줄의 이름 핸들로만 이동합니다. 레이어에 마우스를 올리고 해당 핸들을 드래그합니다.
- **레이어가 다른 레이어 뒤에 숨습니다.** 쌓인 순서가 아래입니다. 레이어의 **More** 메뉴를 열고 **Bring forward**를 선택합니다.
- **휴대전화에서 레이어가 겹치거나 삐져나옵니다.** **Responsive**가 꺼져 있어 캔버스 높이와 텍스트가 크기를 유지합니다. **Responsive**를 **Positioned layers** 설정에서 켭니다.
- **캔버스 안에서는 피커에 Positioned layers가 없습니다.** 캔버스 안에 다른 캔버스를 넣을 수 없습니다. 새 **Positioned layers** 요소는 컬럼에 추가합니다.
- **어느 위치에서도 피커에 Positioned layers가 없습니다.** DXPR Builder 사용자 프로필에서 빠져 있습니다. 관리자가 프로필의 **Elements** 아래에서 **Layers**를 `/admin/dxpr_studio/dxpr_builder/profile` 경로에서 체크합니다.

## 다음 단계

- [Sections](/ko/hc/documentation/learn-dxpr-builder/layout/sections): 캔버스 주변 영역에 배경 색상이나 이미지를 지정합니다.
- [Nesting](/ko/hc/documentation/learn-dxpr-builder/layout/nesting): 레이어와 로우, 컬럼을 조합하여 더 복잡한 레이아웃을 만듭니다.
- [Animation tab](/ko/hc/documentation/learn-dxpr-builder/design/animation-tab): 각 레이어가 고유의 등장 효과와 함께 나타나게 합니다.