---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/layout/tabs-element'
title: '탭 패널 추가하기 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:56:06+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  관련 콘텐츠 여러 블록을 한곳에 두고 한 번에 하나만 보여주고 싶을 때
  Tabs를 사용합니다. 완성되면 탭 라벨 행이 생기고, 방문자는 라벨을 클릭하여
  해당 콘텐츠를 봅니다. 예제에서는 서비스마다 탭 하나씩인 에이전시 페이지를
  만듭니다. 질문과 답변에는 collapse panel이 보통 더 잘 읽힙니다.
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: |-
        관련 콘텐츠 여러 블록을 한곳에 두고 한 번에 하나만 보여주고 싶을 때
        Tabs를 사용합니다. 완성되면 탭 라벨 행이 생기고, 방문자는 라벨을 클릭하여
        해당 콘텐츠를 봅니다. 예제에서는 서비스마다 탭 하나씩인 에이전시 페이지를
        만듭니다. 질문과 답변에는 collapse panel이 보통 더 잘 읽힙니다.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:56:06+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/tabs-element'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/layout/tabs-element'
      description: |-
        관련 콘텐츠 여러 블록을 한곳에 두고 한 번에 하나만 보여주고 싶을 때
        Tabs를 사용합니다. 완성되면 탭 라벨 행이 생기고, 방문자는 라벨을 클릭하여
        해당 콘텐츠를 봅니다. 예제에서는 서비스마다 탭 하나씩인 에이전시 페이지를
        만듭니다. 질문과 답변에는 collapse panel이 보통 더 잘 읽힙니다.
      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/collapsibles-element)
- [캐러셀 레이아웃 추가하기](/ko/hc/documentation/learn-dxpr-builder/layout/carousel-layout)
- [AI 텍스트 검토하고 유지하기](/ko/hc/documentation/learn-dxpr-builder/layout/nesting)

관련 콘텐츠 여러 블록을 한곳에 두고 한 번에 하나만 보여주고 싶을 때 Tabs를 사용합니다. 완성되면 탭 라벨 행이 생기고, 방문자는 라벨을 클릭하여 해당 콘텐츠를 봅니다. 예제에서는 서비스마다 탭 하나씩인 에이전시 페이지를 만듭니다. 질문과 답변에는 [collapse panel](/ko/hc/documentation/learn-dxpr-builder/layout/collapsibles-element)이 보통 더 잘 읽힙니다.

## 탭 패널 추가하기

1. 컬럼에 마우스를 올리고 컨트롤 표시줄의 **+**를 클릭하거나, 빈 컬럼 가운데의 **+**를 클릭하여 요소 선택기를 엽니다.
2. 탭 **Layout**에서 항목 **Tabs**를 클릭합니다. 탭 하나가 **Title** 라벨과 함께 나타납니다.
3. 탭 패널에 마우스를 올리고 **More > Settings**를 엽니다. **Tab title**에 이름을 입력하고 **Save**를 클릭합니다.
4. 패널 안의 **+**를 클릭하여 **Text** 요소 같은 콘텐츠를 추가합니다.
5. 탭을 추가하려면 탭 라벨에 마우스를 올리고 **Tabs** 컨트롤 표시줄에서 **Add tab**을 클릭합니다. 새 탭은 다른 탭 앞에 맨 먼저 추가됩니다. 이름을 지정하고 같은 방식으로 채웁니다.

  ## 표시 내용

열린 탭의 콘텐츠 위에 탭 라벨 행이 있습니다. Preview와 게시된 페이지에서는 라벨을 클릭하면 해당 탭의 콘텐츠가 표시되고 나머지는 숨겨집니다. 각 탭은 자체 요소를 가지므로 한 탭에는 텍스트를, 다른 탭에는 카드 묶음을 넣을 수 있습니다. 너비가 768픽셀 미만인 화면에서는 탭이 쌓인 제목으로 바뀌어 접기 패널처럼 열립니다.

## 탭 설정하기

요소 **Tabs**에는 설정이 세 개 있습니다. **More > Settings**를 **Tabs** 컨트롤 표시줄에서 엽니다. 탭 라벨에 마우스를 올리면 표시됩니다.

| Setting | What it does | Default |
|---|---|---|
| **Tab direction** | 라벨 위치입니다. **Default**(콘텐츠 위), **Left**, **Right** | Default |
| **Style** | 라벨 모양입니다. **Default**(라벨 아래 선), **Modern**(둥근 카드), **Accordion**(구분선이 있는 제목) 중 선택합니다. | Default |
| **Mobile friendly** | 너비가 768픽셀 미만인 화면에서 탭을 접을 수 있는 제목으로 표시합니다. | On |

각 탭에는 패널의 **More > Settings** 아래에 자체 설정이 있습니다. **Tab title**은 라벨 텍스트입니다. **Tab description**은 열린 탭의 라벨 아래에 표시되는 짧은 줄(선택 사항)입니다.

## 탭 관리하기

- **Reorder**: 탭 라벨을 라벨 사이 새 위치로 드래그합니다. 콘텐츠도 함께 이동합니다.
- **Rename**: 탭 패널에 마우스를 올리고 **More > Settings**를 열어 **Tab title**을 변경한 뒤 **Save**를 클릭합니다.
- **Remove**: 탭 패널에 마우스를 올리고 **More**를 열어 **Delete**를 선택합니다. 탭 안의 모든 항목이 함께 제거됩니다.

라벨은 한 단어에서 세 단어로 유지하고 탭은 다섯 개 정도로 유지하여 라벨이 한 줄에 들어가게 합니다.

## 표시되지 않는 경우

- **새 탭이 마지막이 아니라 첫 번째에 있습니다.** **Add tab**은 항상 새 탭을 맨 앞에 추가합니다. 라벨을 원하는 위치로 드래그합니다.
- **설정에 Tab title과 Tab description만 표시됩니다.** 탭 하나의 설정을 연 것입니다. 탭 라벨에 마우스를 올려 **Tabs** 컨트롤 표시줄을 표시한 뒤 그곳에서 **More > Settings**를 엽니다.
- **휴대전화에서는 탭 대신 쌓인 헤더가 표시됩니다.** **Mobile friendly**가 기본값으로 켜져 있습니다. 모든 화면 너비에서 탭을 유지하려면 **Tabs** 설정에서 끕니다.
- **피커의 Layout 탭에 Tabs이 없습니다.** DXPR Builder 사용자 프로필에서 빠져 있습니다. 관리자가 프로필의 **Elements** 아래에서 **Tabs**를 `/admin/dxpr_studio/dxpr_builder/profile` 경로에서 체크합니다.

## 다음 단계

- [Adding a Collapsible Panel](/ko/hc/documentation/learn-dxpr-builder/layout/collapsibles-element): 한 번에 하나씩 열리는 질문과 답변을 쌓습니다.
- [Adding a Carousel Layout](/ko/hc/documentation/learn-dxpr-builder/layout/carousel-layout): 같은 종류의 콘텐츠를 슬라이드 차례로 보여줍니다.
- [Nesting](/ko/hc/documentation/learn-dxpr-builder/layout/nesting): 탭 안에 로우와 컬럼을 넣어 더 풍부한 레이아웃을 만듭니다.