--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/element-settings/spacing' title: '요소 안팎에 간격 추가 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:05:43+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 색상 박스 안에서 텍스트에 여유를 주거나 위 문단에서 버튼을 밀어냅니다. 안쪽 여백은 요소 가장자리 안쪽의 공간이며 바깥 여백은 바깥쪽의 공간입니다. 둘 다 스타일 패널 위쪽의 박스 모델에서 설정합니다. 테마와 새 섹션에는 자체 간격이 있습니다. 이 페이지에서는 사용자가 설정한 값이 어떻게 적용되는지 보여줍니다. 동영상에서는 버튼에 24px 위쪽 바깥 여백을 줍니다. tags: - 'Style your elements' 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: |- 색상 박스 안에서 텍스트에 여유를 주거나 위 문단에서 버튼을 밀어냅니다. 안쪽 여백은 요소 가장자리 안쪽의 공간이며 바깥 여백은 바깥쪽의 공간입니다. 둘 다 스타일 패널 위쪽의 박스 모델에서 설정합니다. 테마와 새 섹션에는 자체 간격이 있습니다. 이 페이지에서는 사용자가 설정한 값이 어떻게 적용되는지 보여줍니다. 동영상에서는 버튼에 24px 위쪽 바깥 여백을 줍니다. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:05:43+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/element-settings/spacing' articleSection: '요소 스타일 지정' - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/element-settings/spacing' description: |- 색상 박스 안에서 텍스트에 여유를 주거나 위 문단에서 버튼을 밀어냅니다. 안쪽 여백은 요소 가장자리 안쪽의 공간이며 바깥 여백은 바깥쪽의 공간입니다. 둘 다 스타일 패널 위쪽의 박스 모델에서 설정합니다. 테마와 새 섹션에는 자체 간격이 있습니다. 이 페이지에서는 사용자가 설정한 값이 어떻게 적용되는지 보여줍니다. 동영상에서는 버튼에 24px 위쪽 바깥 여백을 줍니다. 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/element-settings) # 요소 안팎에 간격 추가. DXPR Builder 배우기페이지 만들기요소 스타일 지정 ## 이 가이드의 내용 관련 가이드 - [타이포그래피](/ko/hc/documentation/learn-dxpr-builder/element-settings/typography) 색상 박스 안에서 텍스트에 여유를 주거나 위 문단에서 버튼을 밀어냅니다. 안쪽 여백은 요소 가장자리 안쪽의 공간이며 바깥 여백은 바깥쪽의 공간입니다. 둘 다 **스타일** 패널 위쪽의 박스 모델에서 설정합니다. 테마와 새 섹션에는 자체 간격이 있습니다. 이 페이지에서는 사용자가 설정한 값이 어떻게 적용되는지 보여줍니다. 동영상에서는 버튼에 24px 위쪽 바깥 여백을 줍니다. ## 시작하기 전에 - DXPR Builder에서 페이지를 엽니다. 요소를 가리키면 **더보기**가 있는 컨트롤 바가 표시됩니다. 빌더가 처음이면 [첫 페이지](/ko/hc/documentation/learn-dxpr-builder/getting-started/first-page)를 참조하세요. - **저장**을 대화상자에서 클릭하면 변경이 에디터에 유지됩니다. 콘텐츠 위 빌더 툴바에서 **저장**을 클릭하면 페이지가 저장되고 "Saved field"가 표시됩니다. - **박스 모델을 사용합니다.** 한 페이지의 한 간격을 수정합니다. - **테마 또는 클래스를 사용합니다.** 반복되는 간격에 사용합니다. 예를 들어 모든 섹션 사이의 간격입니다. - **크기 체계를 유지합니다.** 모든 간격을 몇 가지 크기에서 가져오면 페이지가 안정적으로 보입니다. | 크기 | 용도 | |---|---| | 8px | 그룹 안의 작은 간격(예: 아이콘과 라벨) | | 16px | 관련 항목 사이 | | 24px | 콘텐츠 블록 사이 | | 32px | 카드 또는 강조 상자 안 | | 48px | 섹션 사이 | ## 레시피: 버튼 주변 여유 1. 다음 **버튼**을 가리키고 **더보기**를 클릭한 뒤 **설정**을 엽니다. 2. 다음 **스타일** 패널을 열고 박스 모델의 바깥 링인 **바깥 여백**의 위쪽을 클릭합니다. 잠금 장치는 열린 상태로 시작하므로 이쪽만 바뀝니다. 3. 단위 버튼에 **PX**가 표시되는지 확인합니다. 값 필드에 24를 입력하고 Enter를 누릅니다. 이제 해당 쪽에 24px로 표시되며 버튼이 아래로 이동합니다. 4. 대화상자에서 **저장**을 클릭한 뒤 툴바에서 **저장**을 클릭합니다. 버튼에서는 바깥 여백이 버튼 자체에 적용되므로 공간이 가장자리 바로 앞에서 시작합니다. ## 레시피: 더 높은 섹션 새 섹션은 **수직 안쪽 여백 크기 5(py-5)** 클래스에서 위쪽과 아래쪽 안쪽 여백을 가져오며 박스 모델보다 우선합니다. 먼저 해당 클래스를 제거합니다. 대화상자 제목이 행이나 컬럼이 아니라 섹션인지 확인합니다. 1. 다음 **섹션**을 가리키고 **더보기**를 클릭한 뒤 **설정**을 엽니다. 2. 다음 **일반** 패널에서 **HTML 클래스**를 찾아 **수직 안쪽 여백 크기 5(py-5)** 칩의 ×를 클릭합니다. 섹션의 위쪽과 아래쪽 공간이 줄어듭니다. 해당 칩이 없으면 이 단계를 건너뜁니다. 3. 다음 **스타일** 패널을 엽니다. **안쪽 여백**의 위쪽을 클릭하고 96을 입력한 뒤 Enter를 누릅니다. 4. 다음도 **안쪽 여백**의 아래쪽에 똑같이 합니다. 양쪽 모두 96px로 표시되며 섹션이 더 높아집니다. 5. 대화상자에서 **저장**을 클릭한 뒤 툴바에서 **저장**을 클릭합니다. ## 표시 내용 설정한 각 쪽은 박스 모델에 값이 표시됩니다(예: 24px). 버튼은 24px 아래에 위치하며 섹션에는 콘텐츠 위아래에 96px의 여유가 있습니다. ## 박스 모델의 작동 방식 ```text +----------------- Margin ------------------+ | +-------------- Border ---------------+ | | | +----------- Padding ------------+ | | | | | | | | | | | width × height | | | | | | | | | | | +--------------------------------+ | | | +-------------------------------------+ | +-------------------------------------------+ ``` - 각 링에는 네 쪽이 있습니다. 각 쪽에는 값이 표시됩니다(예: 24px). 설정되지 않은 쪽에는 "-"가 표시됩니다. - 쪽을 클릭하면 슬라이더, 값 필드, 단위 버튼이 있는 작은 선택 도구가 열립니다. 단위는 **PX** 또는 **%**이며 **테두리**는 px만 사용합니다. - 값을 입력하고 Enter를 누르거나 슬라이더를 끕니다. 위쪽 및 아래쪽 화살표 키는 값을 1씩 변경합니다. Escape를 누르면 선택 도구가 닫힙니다. - 쪽 설정을 해제하려면 값 필드를 비우고 Enter를 누릅니다. 해당 쪽에 "-"가 표시되며 테마가 다시 결정합니다. 바깥 여백의 범위는 -200~200, 안쪽 여백은 0~200, 테두리는 0~50입니다. 너비와 높이는 0~2000입니다. 음수 바깥 여백은 요소를 이웃 쪽으로 당깁니다. 범위를 벗어난 입력값은 가장 가까운 한도로 잘립니다. ### 잠금 장치 각 링의 이름 옆에는 잠금 장치가 있습니다. **바깥 여백**, **테두리**, **안쪽 여백**입니다. 잠금 장치가 닫혀 있으면 한쪽에 설정한 값이 네 쪽 모두에 적용됩니다. 열려 있으면 각 쪽이 자체 값을 유지합니다. 잠금 장치를 닫아도 기존 값은 바뀌지 않으며 다음에 설정하는 값만 복사됩니다. ### 백분율, 크기, 화면 너비 백분율 값은 요소의 부모 너비 중 차지하는 비율이며 위쪽과 아래쪽도 마찬가지입니다. 따라서 위쪽 안쪽 여백 10%는 좁은 컬럼보다 넓은 컬럼에서 더 높습니다. 박스 모델의 가운데에는 너비 × 높이가 있습니다. 이미지나 지도처럼 크기를 자체 결정하는 요소는 이 두 상자를 무시합니다. 박스 모델에는 화면 크기별 값이 없습니다. 휴대폰보다 큰 화면에 더 많은 안쪽 여백을 주려면 Bootstrap 클래스를 대신 사용합니다. 예를 들어 `py-3 py-lg-5`는 작은 화면에서 16px, 너비 992px부터 48px을 적용합니다. 입력 방법은 [HTML ID와 클래스](/ko/hc/documentation/learn-dxpr-builder/element-settings/custom-css)를 참조하세요. ## 사용자 값과 테마 간격의 관계 - **새 섹션에는 안쪽 여백이 포함됩니다.** 에디터에서 추가한 섹션에는 **수직 안쪽 여백 크기 5(py-5)** 클래스가 적용되며 위쪽과 아래쪽에 3rem(약 48px)이 생깁니다. 해당 클래스에는 `!important`가 표시되어 있어 위쪽 및 아래쪽 **안쪽 여백**보다 우선합니다. 왼쪽과 오른쪽 안쪽 여백은 계속 작동합니다. - **간격 클래스가 우선합니다.** **HTML 클래스**의 Bootstrap 간격 클래스(예: **위쪽 바깥 여백 크기 3(mt-3)**)는 같은 쪽의 사용자 값보다 우선합니다. - **컬럼은 간격을 유지합니다.** Bootstrap은 각 컬럼의 왼쪽과 오른쪽에 12px의 안쪽 여백을 줍니다. 컬럼의 왼쪽 또는 오른쪽 **안쪽 여백**은 이를 대체하므로 콘텐츠가 다음 컬럼과 더 이상 정렬되지 않습니다. - **문단은 자체 간격을 유지합니다.** 테마는 각 문단과 제목 아래에 공간을 둡니다. 박스 모델은 요소 전체에 작용하므로 해당 공간을 바꾸지 않습니다. - **이웃 요소의 바깥 여백은 보통 겹칩니다.** 한 요소가 다른 요소 위에 있으면 첫 번째 요소의 아래쪽 바깥 여백과 두 번째 요소의 위쪽 바깥 여백이 간격을 공유합니다. 더 큰 쪽이 적용되며 합산되지 않습니다. ## 표시되지 않는 경우 - **섹션의 위쪽 또는 아래쪽 안쪽 여백이 적용되지 않습니다.** **수직 안쪽 여백 크기 5(py-5)** 클래스가 우선합니다. **HTML 클래스**에서 해당 칩을 제거합니다. - **바깥 여백 또는 안쪽 여백 값이 적용되지 않습니다.** 같은 쪽의 Bootstrap 간격 클래스가 우선합니다. 해당 칩을 제거하거나 클래스만 사용합니다. - **안쪽 여백이 표시되지 않습니다.** 요소에 배경이나 테두리가 없어 공간이 보이지 않습니다. 조정하는 동안 **배경** 색상을 선택합니다. - **값이 200으로 바뀌었습니다.** 안쪽 여백과 바깥 여백은 200에서, 테두리는 50에서 멈춥니다. 더 작은 값이나 백분율을 사용합니다. - **휴대폰에서 페이지가 답답합니다.** 같은 픽셀 값이 모든 화면에 적용됩니다. 더 작은 값, 백분율, 반응형 클래스를 사용합니다. - **두 간격이 합산되지 않았습니다.** 쌓인 바깥 여백은 겹치며 더 큰 쪽이 적용됩니다. 전체 간격을 두 요소 중 하나에 지정합니다. - **컬럼이 더 이상 정렬되지 않습니다.** 컬럼의 측면 **안쪽 여백**이 그리드 간격을 대체했습니다. 해당 쪽을 다시 비웁니다. ## 다음 단계 - [타이포그래피](/ko/hc/documentation/learn-dxpr-builder/element-settings/typography). 간격을 준 상자 안의 텍스트 크기와 색상을 지정합니다.