---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/editing/drag-and-drop'
title: '요소 제자리로 드래그 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:04:42+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '요소, 행, 섹션을 드래그하여 원하는 위치에 배치할 수 있습니다. 컬럼 안에서 위아래로 이동하거나 다른 컬럼이나 섹션으로 옮깁니다. 새 요소는 컬럼 맨 위에 추가되므로 드래그하면 빠르게 정렬할 수 있습니다. 예시에서는 무료 상담 예약 버튼을 해당 텍스트 아래로 드래그합니다.'
tags:
  - 'Edit a page'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: '요소 제자리로 드래그'
      description: '요소, 행, 섹션을 드래그하여 원하는 위치에 배치할 수 있습니다. 컬럼 안에서 위아래로 이동하거나 다른 컬럼이나 섹션으로 옮깁니다. 새 요소는 컬럼 맨 위에 추가되므로 드래그하면 빠르게 정렬할 수 있습니다. 예시에서는 무료 상담 예약 버튼을 해당 텍스트 아래로 드래그합니다.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:04:42+0000'
      dateModified: '2026-10-24T17:19:22+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/editing/drag-and-drop'
      articleSection: '페이지 편집'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/editing/drag-and-drop'
      description: '요소, 행, 섹션을 드래그하여 원하는 위치에 배치할 수 있습니다. 컬럼 안에서 위아래로 이동하거나 다른 컬럼이나 섹션으로 옮깁니다. 새 요소는 컬럼 맨 위에 추가되므로 드래그하면 빠르게 정렬할 수 있습니다. 예시에서는 무료 상담 예약 버튼을 해당 텍스트 아래로 드래그합니다.'
      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
---
[도움말 센터](/ko/node/75)/[문서](/ko/hc/documentation) /[DXPR Builder 배우기](/ko/hc/documentation/learn-dxpr-builder) /[페이지 만들기](/ko/hc/documentation/learn-dxpr-builder/build) /[페이지 편집](/ko/hc/documentation/learn-dxpr-builder/editing) # 요소 제자리로 드래그.

 DXPR Builder 배우기페이지 만들기페이지 편집

   ## 이 가이드의 내용

 관련 가이드

- [요소 복사 및 붙여넣기](/ko/hc/documentation/learn-dxpr-builder/editing/copy-paste)
- [요소 선택하기](/ko/hc/documentation/learn-dxpr-builder/editing/selecting-elements)
- [로우 추가하기](/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)

요소, 행, 섹션을 드래그하여 원하는 위치에 배치할 수 있습니다. 컬럼 안에서 위아래로 이동하거나 다른 컬럼이나 섹션으로 옮깁니다. 새 요소는 컬럼 맨 위에 추가되므로 드래그하면 빠르게 정렬할 수 있습니다. 예시에서는 **무료 상담 예약** 버튼을 해당 텍스트 아래로 드래그합니다.

  ## 요소 드래그

1. 요소에 마우스를 올려 컨트롤 바를 표시합니다.
2. 드래그 핸들을 길게 누릅니다. 컨트롤 바 왼쪽에 있는 요소 이름이 적힌 점선 그립입니다.
3. 요소를 새 위치로 드래그합니다. 줄무늬 자리 표시자가 놓일 위치를 보여줍니다.
4. 마우스 버튼을 놓아 해당 위치에 놓습니다.
5. 툴바에서 **저장**을 클릭하여 페이지를 저장합니다.

예시에서는 각 요소에 스타일 패널의 위쪽 바깥 여백 48픽셀도 적용됩니다.

## 놓을 수 있는 위치

요소는 같은 컬럼 안의 두 요소 사이, 다른 컬럼, 다른 섹션에 바로 놓을 수 있습니다. 탭이나 접기 패널 같은 컨테이너 요소 안에도 들어갑니다. 같은 페이지의 모든 DXPR Builder 영역이 요소를 받아줍니다.

## 섹션, 행, 컬럼 이동

섹션과 행의 컨트롤 바에도 같은 핸들이 있습니다. 섹션을 페이지에서 위아래로 드래그하거나 행을 다른 섹션으로 드래그합니다. 컬럼은 행 안에 머무릅니다. 컬럼의 핸들을 좌우로 드래그하여 이웃 컬럼과 바꿉니다.

## 드래그 없이 이동

컨트롤 바에서 요소 이름을 클릭하여 선택합니다. Ctrl+위쪽 화살표 또는 Ctrl+아래쪽 화살표(Mac에서는 Cmd)를 눌러 한 칸씩 이동합니다. 컬럼은 Ctrl+왼쪽 화살표 또는 Ctrl+오른쪽 화살표를 누릅니다. **더보기** 메뉴에 **위로 이동**과 **아래로 이동**으로 같은 이동 메뉴가 있습니다.

## 표시 내용

드래그하는 동안 요소의 복사본이 포인터를 따라다니고 줄무늬 자리 표시자가 놓일 지점을 표시합니다. 놓고 나면 요소가 새 위치에 자리 잡고 컬럼의 나머지 부분이 그 주위로 모입니다. **저장** 버튼의 점은 변경 사항이 아직 저장되지 않았음을 나타냅니다.

## 요소가 움직이지 않는 경우

- **드래그해도 아무것도 움직이지 않습니다.** 요소 자체가 아니라 핸들을 눌러야 합니다. 요소 이름이 적힌 점선 그립을 길게 누릅니다.
- **원하는 위치가 화면 밖에 있습니다.** 페이지는 포인터가 창 가장자리에 가까울 때만 스크롤됩니다. 포인터를 위쪽이나 아래쪽 가장자리 가까이로 이동하고 기다립니다.
- **컬럼이 행을 벗어나지 않습니다.** 컬럼은 행 안에서만 자리를 바꿉니다. 대신 컬럼 안의 요소를 다른 행으로 드래그합니다.
- **위치 지정 레이어의 요소에 자리 표시자가 표시되지 않습니다.** 해당 요소는 캔버스에 자유롭게 배치됩니다. [위치 지정 레이어](/ko/hc/documentation/learn-dxpr-builder/layout/positioned-layers)를 참조하세요.
- **요소가 잘못된 위치에 놓였습니다.** Ctrl+Z(Mac에서는 Cmd+Z)를 눌러 놓기를 실행 취소합니다.

## 다음 단계

- [요소 복사 및 붙여넣기](/ko/hc/documentation/learn-dxpr-builder/editing/copy-paste): 요소를 이동하는 대신 복제합니다.
- [요소 선택](/ko/hc/documentation/learn-dxpr-builder/editing/selecting-elements): 컬럼, 행, 섹션의 핸들에 접근합니다.
- [행과 컬럼](/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): 행의 컬럼 레이아웃을 변경합니다.