요소 안팎에 간격 추가.

색상 박스 안에서 텍스트에 여유를 주거나 위 문단에서 버튼을 밀어냅니다. 안쪽 여백은 요소 가장자리 안쪽의 공간이며 바깥 여백은 바깥쪽의 공간입니다. 둘 다 스타일 패널 위쪽의 박스 모델에서 설정합니다. 테마와 새 섹션에는 자체 간격이 있습니다. 이 페이지에서는 사용자가 설정한 값이 어떻게 적용되는지 보여줍니다.

동영상에서는 버튼에 24px 위쪽 바깥 여백을 줍니다.

시작하기 전에

• DXPR Builder에서 페이지를 엽니다. 요소를 가리키면 더보기가 있는 컨트롤 바가 표시됩니다. 빌더가 처음이면 첫 페이지를 참조하세요.
• 저장을 대화상자에서 클릭하면 변경이 에디터에 유지됩니다. 콘텐츠 위 빌더 툴바에서 저장을 클릭하면 페이지가 저장되고 "Saved field"가 표시됩니다.
• 박스 모델을 사용합니다. 한 페이지의 한 간격을 수정합니다.
• 테마 또는 클래스를 사용합니다. 반복되는 간격에 사용합니다. 예를 들어 모든 섹션 사이의 간격입니다.
• 크기 체계를 유지합니다. 모든 간격을 몇 가지 크기에서 가져오면 페이지가 안정적으로 보입니다.

레시피: 버튼 주변 여유

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의 여유가 있습니다.

박스 모델의 작동 방식

+----------------- 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와 클래스를 참조하세요.

사용자 값과 테마 간격의 관계

• 새 섹션에는 안쪽 여백이 포함됩니다. 에디터에서 추가한 섹션에는 수직 안쪽 여백 크기 5(py-5) 클래스가 적용되며 위쪽과 아래쪽에 3rem(약 48px)이 생깁니다. 해당 클래스에는 !important가 표시되어 있어 위쪽 및 아래쪽 안쪽 여백보다 우선합니다. 왼쪽과 오른쪽 안쪽 여백은 계속 작동합니다.
• 간격 클래스가 우선합니다. HTML 클래스의 Bootstrap 간격 클래스(예: 위쪽 바깥 여백 크기 3(mt-3))는 같은 쪽의 사용자 값보다 우선합니다.
• 컬럼은 간격을 유지합니다. Bootstrap은 각 컬럼의 왼쪽과 오른쪽에 12px의 안쪽 여백을 줍니다. 컬럼의 왼쪽 또는 오른쪽 안쪽 여백은 이를 대체하므로 콘텐츠가 다음 컬럼과 더 이상 정렬되지 않습니다.
• 문단은 자체 간격을 유지합니다. 테마는 각 문단과 제목 아래에 공간을 둡니다. 박스 모델은 요소 전체에 작용하므로 해당 공간을 바꾸지 않습니다.
• 이웃 요소의 바깥 여백은 보통 겹칩니다. 한 요소가 다른 요소 위에 있으면 첫 번째 요소의 아래쪽 바깥 여백과 두 번째 요소의 위쪽 바깥 여백이 간격을 공유합니다. 더 큰 쪽이 적용되며 합산되지 않습니다.

표시되지 않는 경우

• 섹션의 위쪽 또는 아래쪽 안쪽 여백이 적용되지 않습니다. 수직 안쪽 여백 크기 5(py-5) 클래스가 우선합니다. HTML 클래스에서 해당 칩을 제거합니다.
• 바깥 여백 또는 안쪽 여백 값이 적용되지 않습니다. 같은 쪽의 Bootstrap 간격 클래스가 우선합니다. 해당 칩을 제거하거나 클래스만 사용합니다.
• 안쪽 여백이 표시되지 않습니다. 요소에 배경이나 테두리가 없어 공간이 보이지 않습니다. 조정하는 동안 배경 색상을 선택합니다.
• 값이 200으로 바뀌었습니다. 안쪽 여백과 바깥 여백은 200에서, 테두리는 50에서 멈춥니다. 더 작은 값이나 백분율을 사용합니다.
• 휴대폰에서 페이지가 답답합니다. 같은 픽셀 값이 모든 화면에 적용됩니다. 더 작은 값, 백분율, 반응형 클래스를 사용합니다.
• 두 간격이 합산되지 않았습니다. 쌓인 바깥 여백은 겹치며 더 큰 쪽이 적용됩니다. 전체 간격을 두 요소 중 하나에 지정합니다.
• 컬럼이 더 이상 정렬되지 않습니다. 컬럼의 측면 안쪽 여백이 그리드 간격을 대체했습니다. 해당 쪽을 다시 비웁니다.

다음 단계

• 타이포그래피. 간격을 준 상자 안의 텍스트 크기와 색상을 지정합니다.