Bricks 2.0은 컨텍스트 간격 기능을 도입하여 내장 콘텐츠 내의 제목, 단락 및 목록과 같은 요소 사이의 세로 간격(여백)을 완벽하게 제어할 수 있도록 합니다.
문맥에 따른 간격은 다음 요소들 사이에 자동으로 적용됩니다:
- 서식 있는 텍스트 요소
- 게시물 콘텐츠 요소 (출처: WordPress)
- WooCommerce 내장 콘텐츠(결제 페이지 제외)
margin-block-startBricks는 기본적으로 문맥에 따라 제목과 단락과 같은 요소에 다양한 상단 여백( )을 적용하려고 시도합니다 .
이러한 기본 설정을 재정의하려면 브라우저 간격을 수동으로 제거하고, Bricks의 내장 스타일을 되돌린 다음, 자체 여백을 정의해야 했습니다.
컨텍스트 간격 기능을 사용하면 이 과정이 간소화됩니다. 이제 테마 스타일 → 컨텍스트 간격 에서 여백을 재설정하고 사용자 지정 간격 규칙을 시각적으로 정의할 수 있습니다 .
내장 콘텐츠의 스타일을 지정하든, 동적 레이아웃을 사용하든, 유틸리티 기반 래퍼를 만들든, 이 기능은 간격에 대한 일관되고 유연한 제어 기능을 제공합니다.
빌더 내에서 스타일 관리자 → 테마 스타일 → 컨텍스트 간격 에서 컨텍스트 간격을 활성화할 수 있습니다 .
기본 여백 제거 : 기본 여백을 제거할 HTML 태그(예: 제목, 단락, 목록 등)를 선택할 수 있습니다. 이렇게 하면 상속된 스타일이나 기본 스타일의 영향을 받지 않고 레이아웃 요구 사항에 맞는 깔끔한 간격 설정을 시작할 수 있습니다.
기본 패딩 제거ul : <p>, ol<p>, blockquote<p>, <p>와 같은 선택한 태그의 기본 패딩을 제거할 수 있습니다 button.
메모
`remove-default` 선택자는 선택한 그대로 출력됩니다. `<div>`, `<div>` p, ul`<div>` 와 같은 광범위한 태그 선택은 h1,h2,h3,h4,h5,h6간격 규칙에 사용되는 내장 콘텐츠 선택자뿐만 아니라 생성된 테마 스타일 CSS에서 일치하는 모든 요소를 재설정합니다. 재설정 범위를 더 좁히려면 보다 구체적인 사용자 지정 선택자를 사용하십시오.
메모
문맥 기반 간격: 요소 앞에 다른 요소가 있을 때만 여백을 적용합니다. 이렇게 하면 맨 위쪽에 불필요한 간격이 생기는 것을 방지하면서 요소 간의 간격을 일정하게 유지할 수 있습니다.
설정 개요
| 환경 | 설명 |
|---|---|
| 기본 여백 제거 | 선택하거나 수동으로 입력한 HTML 태그의 여백을 재설정합니다. |
| 기본 패딩 제거 | 선택하거나 수동으로 입력한 HTML 태그의 패딩을 초기화합니다. |
| 표제 | 다른 요소가 앞에 오는 경우, 해당 요소 에 h1상단 여백을 적용합니다 .h6 |
| 절 | p다른 요소가 앞에 오는 경우 해당 요소 에 상단 여백을 적용합니다 . |
| 폴백 간격 | 제목, 단락 또는 대상 요소와 일치하지 않는 모든 요소 또는 해당 대상에 간격 값이 정의되지 않은 경우에 적용됩니다. |
| 추가 목표 요소 | ul<p> , <body> 또는 기타 사용자 지정 선택자 와 같은 요소에 대한 간격 규칙을 정의할 수 있습니다 blockquote. 블록 여백(상단, 하단)과 인라인 패딩(좌측, 우측)을 설정할 수 있습니다. |
| 내부 간격을 적용하세요 | `<>`와 같은 래퍼 선택자를 대상으로 지정하여 레이아웃의 다른 부분으로 컨텍스트 간격을 확장합니다 .contextual-spacing. |
추가 목표 요소
추가 대상 요소 반복기를 사용하여 문맥 간격을 제목과 단락뿐만 아니라 더 많은 요소로 확장할 수 있습니다.
미리 정의된 요소 중에서 선택할 수 있습니다.
- 순서 없는 목록(ul)
- 순서가 있는 목록(ol)
- 목록 항목(li)
- 그림 (그림)
- 인용구 (blockquote)
.my-class또는 , code, 또는 와 같은 사용자 지정 선택기를 직접 입력할 수도 있습니다 div.
각각에 대해 다음을 설정할 수 있습니다.
- 상단 및 하단 여백(
margin-block) - 시작 및 끝 패딩(
padding-inline)
이렇게 하면 모든 유형의 콘텐츠에서 간격이 일관되게 유지됩니다.