---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/troubleshooting/elements-look-wrong'
title: '요소가 잘못 표시되거나 작동합니다 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:17:36+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  가장 자주 발생하는 요소 문제를 해결합니다. 시작하기 전에 새 빈 페이지에서 요소를 테스트하여 주변 콘텐츠의 영향을 배제합니다.
  일부 기기에서 숨기면 로우 레이아웃이 깨집니다
  다음 Responsive Visibility 옵션(HTML classes 아래)은 Bootstrap 디스플레이 클래스입니다(예: d-none d-md-block). 로우에 적용하면 로우 자체 레이아웃을 대체하므로 컬럼이 쌓입니다. 클래스는 컬럼이나 로우를 감싸는 섹션에 적용합니다.
tags:
  - 'Fix a problem'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T14:17:36+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: '요소가 잘못 표시되거나 작동합니다'
      description: |-
        가장 자주 발생하는 요소 문제를 해결합니다. 시작하기 전에 새 빈 페이지에서 요소를 테스트하여 주변 콘텐츠의 영향을 배제합니다.
        일부 기기에서 숨기면 로우 레이아웃이 깨집니다
        다음 Responsive Visibility 옵션(HTML classes 아래)은 Bootstrap 디스플레이 클래스입니다(예: d-none d-md-block). 로우에 적용하면 로우 자체 레이아웃을 대체하므로 컬럼이 쌓입니다. 클래스는 컬럼이나 로우를 감싸는 섹션에 적용합니다.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:17:36+0000'
      dateModified: '2026-10-24T14:17:36+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/troubleshooting/elements-look-wrong'
      articleSection: '문제 해결'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/troubleshooting/elements-look-wrong'
      description: |-
        가장 자주 발생하는 요소 문제를 해결합니다. 시작하기 전에 새 빈 페이지에서 요소를 테스트하여 주변 콘텐츠의 영향을 배제합니다.
        일부 기기에서 숨기면 로우 레이아웃이 깨집니다
        다음 Responsive Visibility 옵션(HTML classes 아래)은 Bootstrap 디스플레이 클래스입니다(예: d-none d-md-block). 로우에 적용하면 로우 자체 레이아웃을 대체하므로 컬럼이 쌓입니다. 클래스는 컬럼이나 로우를 감싸는 섹션에 적용합니다.
      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/manage) /[문제 해결](/ko/hc/documentation/learn-dxpr-builder/troubleshooting) # 요소가 잘못 표시되거나 작동합니다.

 DXPR Builder 배우기사이트 관리문제 해결

   ## 이 가이드의 내용

가장 자주 발생하는 요소 문제를 해결합니다. 시작하기 전에 새 빈 페이지에서 요소를 테스트하여 주변 콘텐츠의 영향을 배제합니다.

## 일부 기기에서 숨기면 로우 레이아웃이 깨집니다

다음 **Responsive Visibility** 옵션(**HTML classes** 아래)은 Bootstrap 디스플레이 클래스입니다(예: `d-none d-md-block`). 로우에 적용하면 로우 자체 레이아웃을 대체하므로 컬럼이 쌓입니다. 클래스는 컬럼이나 로우를 감싸는 섹션에 적용합니다.

## 콘솔에 Bootstrap에 jQuery 4 미만 버전이 필요하다고 표시됩니다

테마에서 Bootstrap 3 또는 4 JavaScript를 로드하는데, 이는 최신 Drupal 11 릴리스에 포함된 jQuery 4에서 실행되지 않습니다. DXPR Builder 자체는 jQuery를 사용하지 않습니다.

1. 테마에서 Bootstrap 3 또는 4 JavaScript 로드를 중단합니다.
2. 테마에서 Bootstrap 5를 로드하지 않으면 **DXPR Studio** > **DXPR Builder** > **General Settings** > **Bootstrap**으로 이동하여 **Sideload Bootstrap files**를 **Bootstrap 5**로 설정합니다.

**Note:** 모듈은 Bootstrap 5만 지원합니다. Bootstrap 3 또는 4 기반 테마는 마이그레이션이 필요합니다.

## 태블릿 너비에서 컬럼이 어긋납니다

그리드는 12컬럼이므로 5개 컬럼을 균등하게 배치할 수 없습니다. 로우의 그리드 아이콘을 클릭하고 다음과 같은 프리셋을 선택합니다: **1/4 + 1/4 + 1/4 + 1/4** 또는 **1/3 + 1/3 + 1/3**. 태블릿에 별도 레이아웃을 적용하려면 **Add screen size**를 클릭한 뒤 목록에서 크기를 선택합니다.

## Link 요소 안의 링크가 작동하지 않습니다

Link 요소 자체가 `a` 태그이므로 브라우저에서는 링크 안에 링크를 넣을 수 없습니다. Button 요소를 사용하거나 링크가 포함된 Text 요소를 사용합니다.

## 앵커 링크가 고정 헤더 아래에 도착합니다

1. **General Settings**로 이동하여 **Advanced Settings**를 엽니다.
2. **Scroll offset selector**를 고정 헤더의 CSS 선택자로 설정합니다. 기본값은 DXPR Theme 헤더에 적용됩니다.
3. 대상 요소에 **HTML ID**를 지정합니다(위치: **General** 패널).

## 동영상이 자동으로 시작되지 않습니다

브라우저는 소리 나는 동영상을 자동 시작하지 않습니다. Local video 설정에서 **Start playing automatically** 옆의 **Muted**를 체크한 뒤 저장합니다.

## 페이지 안의 블록에 편집 컨트롤이 없습니다

빌더 페이지 안에 배치된 DXPR Builder 블록은 자체 에디터 없이 표시되므로 그곳에서 콘텐츠를 변경할 수 없습니다. 테마 영역에서 해당 블록이 있는 다음 위치에서 블록을 편집합니다: **Structure** > **Block layout**. 또는 HTML 요소를 대신 사용합니다.

## View의 노출된 필터가 작동하지 않습니다

에디터에 “Turn on Ajax on this view to use exposed filters.” 메시지가 표시됩니다. 빌더 내부의 필터는 AJAX를 통해서만 작동합니다.

1. View를 편집하고 **Advanced**를 엽니다.
2. **Use AJAX**를 **Yes**로 설정한 뒤 View를 저장합니다.
3. 모든 캐시를 지웁니다.

## Text 요소에서 스크립트 태그가 사라집니다

빌더는 HTML 요소를 제외한 모든 요소에서 `<script src>` 태그를 제거합니다. 삽입 코드와 스크립트는 HTML 요소에 넣습니다. **Apply text format filters to frontend content** 설정이 켜져 있으면 필드의 텍스트 형식에서도 해당 태그를 허용해야 합니다.

## Content Security Policy 때문에 에디터가 차단됩니다

빌더 콘텐츠는 인라인 `style` 속성에 스타일을 유지하며, **Asset source**를 **Cloud**로 설정하면 에디터 스크립트가 `https://cdn2.dxpr.com`에서 로드됩니다. `'unsafe-inline'`을 `style-src`에서 허용하고, `https://cdn2.dxpr.com`을 `script-src`와 `style-src`에서 허용합니다.

## 수정 확인하기

저장한 뒤 **View mode**를 **Preview**로 설정하여 요소를 확인하고, 비공개 창에서 익명 방문자로도 확인합니다.

## 다음 단계

[Content elements](/hc/documentation/learn-dxpr-builder/elements)에서 각 요소의 설정을 확인합니다.