---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/editing/selecting-elements'
title: '요소 선택하기 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:04:50+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '페이지의 모든 부분에는 자체 컨트롤 바가 있습니다. 요소, 컬럼, 행, 섹션이 각각 해당됩니다. 마우스를 올리면 각 컨트롤 바에 접근할 수 있으며, 레이어 패널에서 원하는 수준을 선택할 수도 있습니다. 동영상에서는 텍스트와 버튼이 있는 2컬럼 행을 만들고 모든 수준을 살펴봅니다.'
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: '페이지의 모든 부분에는 자체 컨트롤 바가 있습니다. 요소, 컬럼, 행, 섹션이 각각 해당됩니다. 마우스를 올리면 각 컨트롤 바에 접근할 수 있으며, 레이어 패널에서 원하는 수준을 선택할 수도 있습니다. 동영상에서는 텍스트와 버튼이 있는 2컬럼 행을 만들고 모든 수준을 살펴봅니다.'
      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:50+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/selecting-elements'
      articleSection: '페이지 편집'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/editing/selecting-elements'
      description: '페이지의 모든 부분에는 자체 컨트롤 바가 있습니다. 요소, 컬럼, 행, 섹션이 각각 해당됩니다. 마우스를 올리면 각 컨트롤 바에 접근할 수 있으며, 레이어 패널에서 원하는 수준을 선택할 수도 있습니다. 동영상에서는 텍스트와 버튼이 있는 2컬럼 행을 만들고 모든 수준을 살펴봅니다.'
      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/inline-text-editing)
- [요소 더보기 메뉴 사용](/ko/hc/documentation/learn-dxpr-builder/editing/context-menus)
- [키보드 단축키](/ko/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts)

페이지의 모든 부분에는 자체 컨트롤 바가 있습니다. 요소, 컬럼, 행, 섹션이 각각 해당됩니다. 마우스를 올리면 각 컨트롤 바에 접근할 수 있으며, 레이어 패널에서 원하는 수준을 선택할 수도 있습니다. 동영상에서는 텍스트와 버튼이 있는 2컬럼 행을 만들고 모든 수준을 살펴봅니다.

  ## 2컬럼 행 만들기

1. 콘텐츠 영역에서 **+**를 클릭하고 **레이아웃** 탭에서 **섹션**을 선택합니다.
2. 섹션의 **+**를 클릭하고 **행**을 선택합니다. 동일한 컬럼 두 개가 포함되어 있습니다.
3. 왼쪽 컬럼에서 **+**를 클릭하고 **콘텐츠** 탭에서 **텍스트**를 선택합니다.
4. 제목과 한 줄 텍스트를 입력한 뒤 **저장**을 클릭합니다.
5. 오른쪽 컬럼에서 **+**를 클릭하고 **버튼**을 선택합니다.
6. 입력란에 **제목**을 입력하고 **링크**를 설정한 뒤 **저장**을 클릭합니다.

## 마우스 오버로 각 수준에 접근

1. 버튼에 마우스를 올립니다. 컨트롤 바에 요소 이름과 **더보기** 버튼이 표시됩니다.
2. 포인터를 컬럼 가장자리로 이동합니다. 컨트롤 바에 **컬럼**이라고 표시됩니다.
3. 행에 마우스를 올립니다. 컨트롤 바에 **행**이라고 표시되며 컬럼 레이아웃 아이콘이 함께 표시됩니다.
4. 섹션에 마우스를 올립니다. 가장 바깥 컨트롤 바에 **섹션**이라고 표시됩니다.

표시되는 컨트롤 바는 포인터 아래 가장 안쪽 부분의 것입니다. 컨트롤 바를 클릭하면 해당 부분이 선택되고 외곽선이 표시됩니다. 키보드 단축키(예: **Ctrl+C**)는 선택된 부분에 적용되며, 선택된 부분이 없으면 포인터 아래 부분에 적용됩니다. 선택을 해제하려면 콘텐츠 바깥의 빈 곳을 클릭합니다.

## 레이어 패널에서 수준 선택

1. DXPR 툴바에서 **더보기**를 열고 **레이어 패널**을 선택합니다.
2. 트리에서 레이어를 클릭합니다. 페이지가 해당 부분으로 스크롤되고 강조 표시됩니다.
3. 레이어의 점 세 개를 클릭하면 컨트롤 바와 같은 메뉴가 열립니다.
4. 패널을 닫고 **저장**을 클릭합니다.

**Ctrl+Shift+J**(Mac에서는 **Cmd+Shift+J**)를 누르면 패널이 열리고 닫힙니다.

## 표시 내용

페이지는 중첩된 수준으로 구성되며, 순서는 항상 **섹션**, **행**, **컬럼**, 요소입니다. 각 수준의 컨트롤 바에는 해당 수준의 작업을 담은 **더보기** 버튼이 있습니다. 레이어 패널에는 같은 수준이 트리로 표시되므로 마우스를 올리기 어려운 부분도 한 번의 클릭으로 선택할 수 있습니다.

## 각 요소의 컨트롤 바 또는 한 줄 표시

| 옵션 | 표시 내용 |
|---|---|
| **각 요소마다** | 모든 요소에 자체 컨트롤 바가 표시됩니다. 중첩된 요소는 편집 중에 여유 공간이 추가됩니다. |
| **한 줄** | 가리키는 요소 위에 한 줄로 표시되는 컨트롤 바: **섹션**, **행**, **컬럼**, **버튼**. 편집 중에도 페이지가 게시된 레이아웃을 유지합니다. |

표시 방식이 **한 줄**인 경우 컨트롤 바에 마우스를 올리면 페이지의 해당 부분이 강조 표시됩니다. 좁은 화면에서는 바깥 컨트롤 바가 줄에서 벗어납니다. 해당 수준에 접근하려면 컨테이너 가장자리에 마우스를 올립니다.

1. DXPR 툴바에서 **더보기**를 열고 **에디터 설정**을 선택하거나 **Ctrl+;**(Mac에서는 **Cmd+;**)을 누릅니다.
2. 항목 **컨트롤 바**에서 **각 요소마다** 또는 **한 줄**을 선택합니다.
3. 선택한 뒤 **저장**을 클릭합니다. 페이지가 즉시 변경됩니다.

**Ctrl+Shift+B**(Mac에서는 **Cmd+Shift+B**)를 누르면 대화상자 없이 두 방식을 전환합니다. 선택 사항은 사용자 계정에 저장되므로 다른 브라우저에서도 유지됩니다. 계정 편집 페이지의 **DXPR Builder**에서도 변경할 수 있습니다. **기본값**이라고 표시된 옵션이 사이트의 선택 사항입니다. 관리자가 나중에 기본값을 변경해도 사이트 설정을 계속 따르려면 해당 옵션을 선택합니다.

## 컨트롤 바가 표시되지 않는 경우

- **컨트롤 바가 나타나지 않습니다.** 페이지가 미리보기 상태입니다. 보기 메뉴(DXPR 툴바의 **눈 모양 아이콘**)를 열고 **편집**을 선택합니다.
- **컨트롤 바가 잘못된 부분의 것입니다.** 포인터가 하위 요소 위에 있습니다. 컨테이너 가장자리의 여백으로 이동하거나 **레이어 패널**에서 부분을 선택합니다.
- **텍스트를 클릭하면 텍스트 편집기가 열립니다.** 선택이 아니라 인라인 편집입니다. 텍스트 바깥을 클릭한 뒤 텍스트의 컨트롤 바를 대신 클릭합니다.

## 다음 단계

- [제자리에서 텍스트 편집](/ko/hc/documentation/learn-dxpr-builder/editing/inline-text-editing): 페이지에서 바로 단어를 변경합니다.
- [컨텍스트 메뉴](/ko/hc/documentation/learn-dxpr-builder/editing/context-menus): **더보기** 메뉴의 모든 작업.
- [키보드 단축키](/ko/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts): 마우스 없이 선택된 부분에 적용.