---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/responsive-design'
title: '휴대전화에 맞는 레이아웃 만들기 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T01:37:48+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  페이지는 휴대전화와 태블릿에 스스로 적응합니다. 칸이 넓은 화면에서는 나란히, 작은 화면에서는 쌓입니다. 이 페이지에서는 직접 조정하는 법을 보여줍니다. 화면 크기별로 칸 레이아웃을 정하고, 넓은 화면에서는 순서를 뒤집으며, 일부 기기에서만 요소를 보여줍니다. 예시에서는 네 칸 행을 태블릿에서 2×2로 바꿉니다.
  이 비디오는 휴대전화에서 사진을 숨긴 뒤 창을 좁혀 사라지는 모습을 보여줍니다.
tags:
  - Ontwerpgidsen
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: |-
        페이지는 휴대전화와 태블릿에 스스로 적응합니다. 칸이 넓은 화면에서는 나란히, 작은 화면에서는 쌓입니다. 이 페이지에서는 직접 조정하는 법을 보여줍니다. 화면 크기별로 칸 레이아웃을 정하고, 넓은 화면에서는 순서를 뒤집으며, 일부 기기에서만 요소를 보여줍니다. 예시에서는 네 칸 행을 태블릿에서 2×2로 바꿉니다.
        이 비디오는 휴대전화에서 사진을 숨긴 뒤 창을 좁혀 사라지는 모습을 보여줍니다.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T01:37:48+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/design/responsive-design'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/responsive-design'
      description: |-
        페이지는 휴대전화와 태블릿에 스스로 적응합니다. 칸이 넓은 화면에서는 나란히, 작은 화면에서는 쌓입니다. 이 페이지에서는 직접 조정하는 법을 보여줍니다. 화면 크기별로 칸 레이아웃을 정하고, 넓은 화면에서는 순서를 뒤집으며, 일부 기기에서만 요소를 보여줍니다. 예시에서는 네 칸 행을 태블릿에서 2×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
---
[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) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # 휴대전화에 맞는 레이아웃 만들기.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [로우 추가하기](/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)
- [Mobile editing](/hc/documentation/learn-dxpr-builder/editing/mobile-editing)
- [섹션을 끝까지 펼치기](/ko/hc/documentation/learn-dxpr-builder/design/full-width-layouts)

페이지는 휴대전화와 태블릿에 스스로 적응합니다. 칸이 넓은 화면에서는 나란히, 작은 화면에서는 쌓입니다. 이 페이지에서는 직접 조정하는 법을 보여줍니다. 화면 크기별로 칸 레이아웃을 정하고, 넓은 화면에서는 순서를 뒤집으며, 일부 기기에서만 요소를 보여줍니다. 예시에서는 네 칸 행을 태블릿에서 2×2로 바꿉니다.

이 비디오는 휴대전화에서 사진을 숨긴 뒤 창을 좁혀 사라지는 모습을 보여줍니다.

  ## 시작하기 전에

- 페이지에 네 칸이 같은 행이 필요합니다. [행과 칸](/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)(을)를 보세요.

## 화면 크기별 레이아웃 고르기

1. 행에 마우스를 올리고 제어 막대의 격자 아이콘을 클릭하세요. 레이아웃 대화 상자가 **Medium devices (≥ 768px)** 패널과 함께 열립니다.
2. 이제 **Add screen size**(을)를 클릭하세요. 두 번째 패널이 열리며 **Extra small (< 576px)**(으)로 설정됩니다.
3. 해당 패널의 드롭다운에서 다음을 고르세요: **Small devices (≥ 576px)**.
4. 이제 **Custom Layout**(을)를 클릭하고 `1/2 + 1/2 + 1/2 + 1/2`(을)를 입력한 뒤 **Save**(을)를 클릭하세요.
5. 다음을 클릭하세요: 도구 모음의 **Save**.

4개의 절반은 네 칸을 모두 유지하고 한 줄에 두 칸씩 배치합니다. 두 칸이 같은 타일은 모든 화면 크기에서 행을 두 칸으로 줄입니다.

## 결과 화면

데스크톱에서는 네 칸이 여전히 한 줄에 놓입니다. 브라우저 창을 768픽셀 아래로 좁히면 2×2로 감싸집니다. 576픽셀 아래에서는 편집기에서 보이는 순서대로 한 줄에 하나씩 쌓입니다.

레이아웃은 해당 화면 크기부터 위로 적용되며, 더 큰 화면 크기에 자체 레이아웃이 있을 때까지 이어집니다. 모든 새 행은 **Medium devices (≥ 768px)**용 레이아웃 하나로 시작하므로, 휴대전화와 작은 태블릿에서는 칸이 쌓입니다. 패널의 **Remove screen size**(은)는 해당 레이아웃을 다시 삭제합니다.

## 넓은 화면에서 순서 뒤집기

행의 **More** 메뉴를 열고 **Settings**(을)를 고른 뒤 **Mirror row**(을)를 켜세요. 768픽셀부터는 칸이 역순으로 표시되고, 더 작은 화면에서는 편집기 순서대로 쌓입니다.

사진과 텍스트가 번갈아 나오는 행에 쓰세요. 편집기에서는 사진을 먼저 두세요. 휴대전화에는 텍스트 위에 사진이 표시되고, 두 번째 행마다 뒤집으면 데스크톱에는 사진이 오른쪽에 표시됩니다.

## 화면 크기별 요소 표시 또는 숨기기

1. 요소의 **More** 메뉴를 열고 **Settings**(을)를 고르세요.
2. 칩을 고르세요. 위치: **HTML classes** 아래 **Responsive Visibility** 그룹. 예: **Hidden on extra small devices, phones (<576px)**.
3. 다음을 클릭하세요: **Save**.

각 **Hidden on** 칩은 하나의 화면 크기에서만 요소를 숨깁니다. 각 **Visible on** 칩은 해당 크기에서만 보여주고 나머지에서는 모두 숨깁니다.

## 화면 크기

| 레이아웃 대화 상자의 레이블 | 화면 너비 |
|---|---|
| **Extra small (< 576px)** | 세로 방향 휴대전화 |
| **Small devices (≥ 576px)** | 큰 휴대전화, 작은 태블릿 |
| **Medium devices (≥ 768px)** | 태블릿 |
| **Large devices (≥ 992px)** | 노트북 |
| **Extra large (≥ 1200px)** | 데스크톱 |
| **Extra extra large (≥ 1400px)** | 대형 데스크톱 |

다음 요소에는 자체 토글이 있습니다: **Positioned layers** 요소의 **Responsive** 토글(기본적으로 꺼짐). 켜면 캔버스 높이와 텍스트가 창 너비에 맞춰 조정되어 구성이 비율을 유지합니다.

## 변경 사항이 보이지 않는 경우

- **태블릿에서도 칸이 계속 쌓입니다.** 행에 해당 화면 크기용 레이아웃이 없어 768픽셀 아래에서 칸이 쌓입니다. 행의 격자 아이콘을 열고 **Add screen size**(을)를 클릭한 뒤 **Small devices (≥ 576px)**(을)를 고르세요.
- **모든 화면 크기에서 요소가 사라졌습니다.** 두 개의 **Visible on** 칩이 있어서 서로 보여주는 곳을 숨깁니다. 하나만 유지하거나 숨길 크기마다 **Hidden on** 칩을 하나씩 쓰세요.
- **휴대전화에서는 Mirror row가 동작하지 않습니다.** **Mirror row**(은)는 768픽셀부터 동작합니다. 휴대전화에서 순서를 바꾸려면 대신 편집기에서 칸을 옮기세요.

## 다음 단계

- [행과 칸](/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): 여기에서 반응형으로 만드는 행을 만드세요.
- [휴대전화나 태블릿에서 페이지 편집](/hc/documentation/learn-dxpr-builder/editing/mobile-editing): 작은 화면에서 페이지를 확인하고 고치세요.
- [섹션을 끝까지 펼치기](/ko/hc/documentation/learn-dxpr-builder/design/full-width-layouts): 콘텐츠 너비를 정하세요.