워드프레스에서 글을 작성할 때 문단 사이에 여백을 추가하고 싶은 경우가 있을 수 있습니다. 몇 가지 방법으로 문단 사이에 공백을 추가할 수 있습니다.
최신 워드프레스에서는 간단히 '여백 설정' 레이아웃 요소를 사용하면 편리하게 여백을 넣을 수 있습니다.
새로운 요소 추가 아이콘(더하기 아이콘)을 클릭하고 레이아웃 요소 > 여백 설정 요소를 선택하면 문단 사이에 여백을 추가할 수 있습니다.
오른쪽의 블럭 설정의 '여백 설정'에서 높이를 픽셀 단위로 지정할 수 있습니다. 기본 100으로 설정되어 있습니다. 적당히 조정하도록 합니다.
글 미리보기를 해보면 위의 그림과 여백이 지정되어 있음을 살펴볼 수 있습니다.
만약 고전 편집기를 사용하는 경우에는 직접 html 코드를 삽입하여 여백을 추가할 수 있습니다. 여백을 추가할 일이 많으면 숏코드를 만들 수 있습니다.
다음과 같은 코드를 테마의 함수 파일에 추가합니다. (차일드 테마를 만들어 작업하도록 합니다.)
add_shortcode( 'divider', 'shortcode_insert_divider' );
function shortcode_insert_divider( ) {
return '<div class="divider"></div>';
}
그런 다음과 비슷한 CSS 코드를 스타일시트 파일에 추가하도록 합니다.
.divider {
margin: 1em 0;
overflow: hidden;
width: 100%;
}
위의 코드는 예시일 뿐이며 CSS 코드는 적절히 수정하여 원하는 스타일로 만들도록 합니다. CSS 코드를 추가하는 방법은 다음 글을 참고해보세요.
이제 여백을 추가하고 싶은 곳에 다음과 같은 숏코드를 입력합니다.
[divider]
구텐베르크 에디터에는 '분리자' 요소도 있습니다. 분리자(Divider)는 말 그대로 섹션을 분리해주는 역할을 합니다.
심플한 분리자를 추가하려는 경우 이용할 수 있습니다. 디자인이 들어가는 분리자를 만들고 싶은 경우 구글에서 'divider css'로 검색하면 다양한 소스를 찾아볼 수 있습니다.
▷ 예시: 25 Creative CSS Divider Examples With Tutorials (Code Snippets) & Previews 2019