---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/editing/element-picker'
title: '요소 찾기 및 추가 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:04:46+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '추가하는 모든 요소는 요소 선택 도구에서 가져옵니다. 요소 선택 도구는 다섯 개의 탭(레이아웃, 콘텐츠, Drupal 블록, Drupal 뷰, 저장된 템플릿)으로 구성된 대화상자입니다. 이 페이지에서는 각 탭의 구성과 요소를 빠르게 찾는 방법을 설명합니다. 예시에서는 각 탭을 살펴보고 콘텐츠 탭에서 버튼을 추가합니다.'
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: '추가하는 모든 요소는 요소 선택 도구에서 가져옵니다. 요소 선택 도구는 다섯 개의 탭(레이아웃, 콘텐츠, Drupal 블록, Drupal 뷰, 저장된 템플릿)으로 구성된 대화상자입니다. 이 페이지에서는 각 탭의 구성과 요소를 빠르게 찾는 방법을 설명합니다. 예시에서는 각 탭을 살펴보고 콘텐츠 탭에서 버튼을 추가합니다.'
      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:46+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/element-picker'
      articleSection: '페이지 편집'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/editing/element-picker'
      description: '추가하는 모든 요소는 요소 선택 도구에서 가져옵니다. 요소 선택 도구는 다섯 개의 탭(레이아웃, 콘텐츠, Drupal 블록, Drupal 뷰, 저장된 템플릿)으로 구성된 대화상자입니다. 이 페이지에서는 각 탭의 구성과 요소를 빠르게 찾는 방법을 설명합니다. 예시에서는 각 탭을 살펴보고 콘텐츠 탭에서 버튼을 추가합니다.'
      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/drag-and-drop)
- [페이지에서 텍스트 편집](/ko/hc/documentation/learn-dxpr-builder/editing/inline-text-editing)

추가하는 모든 요소는 요소 선택 도구에서 가져옵니다. 요소 선택 도구는 다섯 개의 탭(레이아웃, 콘텐츠, Drupal 블록, Drupal 뷰, 저장된 템플릿)으로 구성된 대화상자입니다. 이 페이지에서는 각 탭의 구성과 요소를 빠르게 찾는 방법을 설명합니다. 예시에서는 각 탭을 살펴보고 **콘텐츠** 탭에서 버튼을 추가합니다.

  ## 선택 도구 열기

1. 빈 콘텐츠 영역에서 **요소 추가**를 클릭하고 **레이아웃** 탭에서 **섹션**을 선택합니다.
2. 섹션의 **+**를 클릭하면 선택 도구가 다시 열립니다. 여기서 선택한 항목은 이 섹션 맨 위에 추가됩니다.

## 다섯 개의 탭 살펴보기

1. 탭 **레이아웃**을 클릭합니다. 섹션, 행, 탭, 접기 패널, 캐러셀, 위치 지정 레이어가 있습니다.
2. 탭 **콘텐츠**를 클릭합니다. 텍스트, 미디어, 인터랙티브 요소가 있으며 **검색** 상자가 있습니다.
3. 탭 **Drupal 블록**을 클릭합니다. 사이트의 블록이 있으며 **카테고리별 필터**와 검색 상자가 있습니다.
4. 탭 **Drupal 뷰**를 클릭합니다. 활성화된 뷰의 모든 디스플레이가 있으며 **태그별 필터**와 검색 상자가 있습니다.
5. 탭 **저장된 템플릿**을 클릭합니다. 개인 및 공용 템플릿이 있으며 **사용자별 필터**, **유형별 필터**, 검색 상자가 있습니다.

다음 중 **레이아웃**을 제외한 모든 탭에는 **검색** 상자가 있습니다. 이름을 일부 입력하여 해당 탭을 필터링합니다.

## 요소 추가

1. 다시 **콘텐츠** 탭에서 **버튼**을 선택합니다. 설정 대화상자가 바로 열립니다.
2. 입력란에 **제목**을 입력하고 **링크**를 설정한 뒤 **유형**은 기본 상태로 두고 **저장**을 클릭합니다.
3. 툴바에서 **저장**을 클릭합니다.

## 콘텐츠 요소

| 요소 | 용도 |
|---|---|
| 알림 | Bootstrap 알림 메시지 |
| 인용문 | 스타일 인용문 |
| 버튼 | 링크가 있는 스타일 버튼 |
| 카드 | 헤더, 제목, 콘텐츠가 있는 카드 |
| 서클 카운터 | 원형 진행 애니메이션 |
| 카운트다운 타이머 | 날짜 및 시간 카운트다운 |
| 숫자 카운터 | 애니메이션 카운트 숫자 |
| HTML | 원시 HTML 코드 |
| 아이콘 | 아이콘 라이브러리의 아이콘 |
| 이미지 | 링크와 대체 텍스트가 있는 단일 이미지 |
| 이미지 캐러셀 | 회전 이미지 갤러리 |
| 점보트론 | 제목과 리드 줄이 있는 큰 배너 |
| 링크 | 스타일 링크 |
| 지도 | Google 지도 임베드 |
| 마퀴 | 스크롤 이미지 스트립 |
| 패널 | 제목이 있는 테두리 패널 |
| 진행률 표시줄 | 애니메이션 진행 표시 |
| 구분선 | 가로선 |
| 텍스트 | 인라인 편집이 가능한 리치 텍스트 |
| 로컬 동영상 | 자체 호스팅 동영상 파일 |
| 동영상 | 임베드 동영상(YouTube, Vimeo) |
| 소셜 링크 | 소셜 미디어 아이콘 링크 |

## 표시 내용

대부분의 요소는 선택하는 즉시 설정 대화상자를 엽니다. 카드, 구분선, 패널은 페이지에 바로 추가되며, 섹션, 행, 탭, 접기 패널도 마찬가지입니다. 캐러셀과 위치 지정 레이어는 먼저 설정을 엽니다. 새 요소는 클릭한 섹션이나 컬럼 맨 위에 추가되므로, 더 아래에 있어야 하면 드래그하여 내립니다.

## 요소가 표시되지 않는 경우

- **탭에 요소가 없습니다.** 사용자 프로필에서 숨겨져 있습니다. 관리자가 다음 프로필의 **요소**에서 선택합니다. **DXPR Studio** > **DXPR Builder** > **사용자 프로필**(`/admin/dxpr_studio/dxpr_builder/profile`). 프로필에서는 일부 요소 이름이 다릅니다. **구분선**은 Separator, **숫자 카운터**는 Counter, **카운트다운 타이머**는 Countdown timer, **인용문**은 Blockquote입니다.
- **새 블록이나 뷰 디스플레이가 표시되지 않습니다.** 프로필의 **모든 블록 선택/해제** 또는 **모든 뷰 선택/해제** 상자가 선택되어 있지 않으면 사용자 프로필에 새 블록과 디스플레이가 자동으로 추가되지 않습니다. 관리자가 같은 프로필의 **블록**이나 **뷰**에서 선택합니다.
- **Drupal 블록 탭이 없습니다.** 빌더는 Drupal의 **블록 콘텐츠** 모듈이 켜져 있을 때만 블록을 나열합니다. **확장**(`/admin/modules`)에서 활성화합니다.
- **저장된 템플릿이 비어 있습니다.** 아직 저장된 항목이 없습니다. 요소의 **더보기** 메뉴에서 **템플릿으로 저장**을 선택합니다. 자세한 내용은 [사용자 템플릿](/ko/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates)을 참조하세요.

## 다음 단계

- [요소 제자리로 드래그](/ko/hc/documentation/learn-dxpr-builder/editing/drag-and-drop): 새 요소를 있어야 할 위치로 이동합니다.
- [페이지에서 텍스트 편집](/ko/hc/documentation/learn-dxpr-builder/editing/inline-text-editing): 대화상자 없이 텍스트를 입력하고 서식을 지정합니다.
- [요소](/hc/documentation/learn-dxpr-builder/elements): 모든 요소의 기능과 설정 방법을 설명합니다.