---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns'
title: '로우 추가하기 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:55:51+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  로우는 섹션을 컬럼으로 나누므로 콘텐츠를 나란히 놓을 수
  있습니다. 세 가지 서비스, 텍스트 옆의 사진, 기사 옆의 사이드바가
  그 예입니다. 열두 가지 프리셋 중에서 분할을 고르고 휴대전화에는
  별도 레이아웃을 지정할 수 있습니다. 로우 추가는 이 페이지에서
  설명합니다. 컬럼 안의 로우는
  Nesting을 참조합니다.

  로우 추가하기
  예제에서는 팀이 제공하는 서비스마다 하나씩, 세 컬럼의 로우를
  섹션에 추가합니다.
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: |-
        로우는 섹션을 컬럼으로 나누므로 콘텐츠를 나란히 놓을 수
        있습니다. 세 가지 서비스, 텍스트 옆의 사진, 기사 옆의 사이드바가
        그 예입니다. 열두 가지 프리셋 중에서 분할을 고르고 휴대전화에는
        별도 레이아웃을 지정할 수 있습니다. 로우 추가는 이 페이지에서
        설명합니다. 컬럼 안의 로우는
        Nesting을 참조합니다.

        로우 추가하기
        예제에서는 팀이 제공하는 서비스마다 하나씩, 세 컬럼의 로우를
        섹션에 추가합니다.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:55:51+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/rows-and-columns'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns'
      description: |-
        로우는 섹션을 컬럼으로 나누므로 콘텐츠를 나란히 놓을 수
        있습니다. 세 가지 서비스, 텍스트 옆의 사진, 기사 옆의 사이드바가
        그 예입니다. 열두 가지 프리셋 중에서 분할을 고르고 휴대전화에는
        별도 레이아웃을 지정할 수 있습니다. 로우 추가는 이 페이지에서
        설명합니다. 컬럼 안의 로우는
        Nesting을 참조합니다.

        로우 추가하기
        예제에서는 팀이 제공하는 서비스마다 하나씩, 세 컬럼의 로우를
        섹션에 추가합니다.
      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

- [AI 텍스트 검토하고 유지하기](/ko/hc/documentation/learn-dxpr-builder/layout/nesting)
- [섹션 추가하기](/ko/hc/documentation/learn-dxpr-builder/layout/sections)
- [휴대전화에 맞는 레이아웃 만들기](/ko/hc/documentation/learn-dxpr-builder/design/responsive-design)

로우는 섹션을 컬럼으로 나누므로 콘텐츠를 나란히 놓을 수 있습니다. 세 가지 서비스, 텍스트 옆의 사진, 기사 옆의 사이드바가 그 예입니다. 열두 가지 프리셋 중에서 분할을 고르고 휴대전화에는 별도 레이아웃을 지정할 수 있습니다. 로우 추가는 이 페이지에서 설명합니다. 컬럼 안의 로우는 [Nesting](/ko/hc/documentation/learn-dxpr-builder/layout/nesting)을 참조합니다.

## 로우 추가하기

예제에서는 팀이 제공하는 서비스마다 하나씩, 세 컬럼의 로우를 섹션에 추가합니다.

1. 섹션에서 **+**를 클릭하여 요소 선택기를 엽니다.
2. 항목 **Row**를 **Layout** 탭에서 고릅니다. 동일한 컬럼 두 개가 딸려 옵니다.
3. 로우 컨트롤 표시줄의 격자 아이콘(**Column layout**)을 클릭하고 세 개의 동일한 컬럼 같은 컬럼 프리셋을 고른 뒤 **Save**를 클릭합니다.
4. 컬럼 안의 **+**를 클릭하여 콘텐츠를 추가합니다.
5. 도구 모음에서 **Save**를 클릭하여 페이지를 저장합니다.

  격자 아이콘은 로우의 드래그 핸들 바로 뒤에 있습니다. 프리셋을 클릭하면 즉시 컬럼이 바뀝니다. **Cancel**을 클릭하면 이전 레이아웃으로 돌아갑니다.

## 표시 내용

세 서비스가 나란히 표시되며, 각 컬럼은 섹션 너비의 3분의 1을 차지합니다. 너비가 768픽셀 미만인 화면에서는 컬럼이 쌓입니다. 각 컬럼이 전체 너비를 차지하며, 페이지에서의 순서대로 표시됩니다.

컬럼은 콘텐츠만큼만 높으므로 짧은 컬럼은 이웃보다 먼저 끝납니다. 컬럼에 배경 색상이 들어가면 눈에 띕니다. **Equal-height columns**으로 높이를 맞춥니다.

## 로우 설정하기

### 컬럼 레이아웃

격자 아이콘을 클릭하면 자체 레이아웃이 있는 화면 크기마다 패널이 열립니다. 모든 패널에 다음 열두 가지 프리셋이 타일로 표시됩니다.

| Preset | Layout |
|---|---|
| 1/1 | 전체 너비 컬럼 하나입니다. |
| 1/2 + 1/2 | 동일한 컬럼 두 개입니다. |
| 1/3 + 1/3 + 1/3 | 동일한 컬럼 세 개입니다. |
| 1/4 + 1/4 + 1/4 + 1/4 | 동일한 컬럼 네 개입니다. |
| 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | 동일한 컬럼 여섯 개입니다. |
| 1/4 + 1/2 + 1/4 | 좁게, 넓게, 좁게입니다. |
| 1/6 + 4/6 + 1/6 | 좁게, 매우 넓게, 좁게입니다. |
| 1/4 + 3/4 | 왼쪽 4분의 1, 오른쪽 4분의 3입니다. |
| 3/4 + 1/4 | 왼쪽 4분의 3, 오른쪽 4분의 1입니다. |
| 2/3 + 1/3 | 왼쪽은 넓게, 오른쪽은 좁게입니다. |
| 1/3 + 2/3 | 왼쪽은 좁게, 오른쪽은 넓게입니다. |
| 5/12 + 7/12 | 왼쪽은 약간 좁게, 오른쪽은 약간 넓게입니다. |

다른 분할에는 **Custom Layout**을 클릭하고 너비를 분수로 입력합니다(예: `1/6 + 5/6`). 합이 1을 초과하는 너비는 새 줄로 넘어갑니다. 대화상자를 다시 열면 **Custom Layout**이 표시되고 레이아웃이 나옵니다(예: **Custom Layout (1/6 + 5/6)**).

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

첫 번째 패널인 **Medium devices (≥ 768px)**는 태블릿 이상에서의 레이아웃을 정합니다. 휴대전화도 변경하려면 대화상자 맨 위의 **Add screen size**를 클릭합니다. **Extra small (< 576px)** 패널이 열립니다. 필요하면 목록에서 다른 크기를 고른 뒤 프리셋을 고릅니다. **Remove screen size**는 패널을 다시 삭제합니다.

### 로우 및 컬럼 설정

로우 컨트롤 표시줄에서 **More** > **Settings**를 엽니다. 컬럼 설정은 컬럼 표시줄에서 엽니다.

| Setting | Element | What it does | Default |
|---|---|---|---|
| **Equal-height columns** | Row | 모든 컬럼을 가장 높은 컬럼의 높이까지 늘이니다. | Off |
| **Mirror row** | Row | 768픽셀 이상에서 컬럼을 역순으로 표시합니다. 쌓인 컬럼은 페이지 순서를 유지합니다. | Off |
| **Vertical centering** | Column | 자신보다 높은 컬럼 안에서 콘텐츠를 중앙에 배치합니다. | Off |

**Mirror row**는 로우가 번갈아 나오는 페이지에 적합합니다. 왼쪽에 사진, 다음에는 오른쪽에 사진이 오고, 휴대전화에서는 항상 사진이 먼저 표시됩니다.

### 컬럼 이동 및 제거

컬럼을 핸들로 드래그하거나 표시줄의 **More** > **Move Left** 또는 **Move Right**를 사용합니다. 컬럼에는 **Delete**가 없습니다. 대신 컬럼이 더 적은 프리셋을 고릅니다. 이렇게 하면 콘텐츠가 절대 사라지지 않고 남은 마지막 컬럼으로 이동합니다.

## 표시되지 않는 경우

- **컬럼의 세로 가운데 정렬이 적용되지 않습니다.** 컬럼은 콘텐츠만큼만 높으므로 중앙에 배치할 여백이 없습니다. 로우 설정에서 **Equal-height columns**를 켭니다.
- **휴대전화에서 컬럼이 쌓입니다.** 768픽셀 미만에서는 기본 동작입니다. 격자 아이콘을 클릭한 뒤 **Add screen size**를 클릭하고 **Extra small (< 576px)**용 프리셋을 고릅니다.
- **텍스트가 다른 컬럼으로 넘어갔습니다.** 컬럼이 더 적은 프리셋을 골랐고, 제거된 컬럼의 콘텐츠가 마지막 컬럼으로 이동했습니다. **Ctrl+Z**(Mac에서는 **Cmd+Z**)를 눌러 변경을 실행 취소합니다.
- **컬럼의 More 메뉴에 Delete가 없습니다.** 컬럼은 레이아웃을 통해 제거합니다. 로우의 격자 아이콘을 클릭하고 컬럼이 더 적은 프리셋을 고릅니다.

## 다음 단계

- [Nesting](/ko/hc/documentation/learn-dxpr-builder/layout/nesting): 컬럼 안에 로우를 넣어 더 세밀한 그리드를 만듭니다.
- [Sections](/ko/hc/documentation/learn-dxpr-builder/layout/sections): 컬럼 주변 띠에 별도 배경을 지정합니다.
- [Responsive design](/ko/hc/documentation/learn-dxpr-builder/design/responsive-design): 레이아웃이 화면 크기마다 어떻게 적응하는지 알아봅니다.