워드프레스 글쓰기에서 여백 추가하는 방법

2019. 12. 2. 07:21 | 댓글 3

워드프레스에서 글을 작성할 때 문단 사이에 여백을 추가하고 싶은 경우가 있을 수 있습니다. 몇 가지 방법으로 문단 사이에 공백을 추가할 수 있습니다.

최신 워드프레스에서는 간단히 '여백 설정' 레이아웃 요소를 사용하면 편리하게 여백을 넣을 수 있습니다.

워드프레스 여백 설정 요소

새로운 요소 추가 아이콘(더하기 아이콘)을 클릭하고 레이아웃 요소 > 여백 설정 요소를 선택하면 문단 사이에 여백을 추가할 수 있습니다.

오른쪽의 블럭 설정의 '여백 설정'에서 높이를 픽셀 단위로 지정할 수 있습니다. 기본 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

참고:


  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    공수래공수거

    워프 사용하시는 분들에게 좋은 가이드가 되겠네요.
    즐거운 한주 되시기 바랍니다.

  2. thumbnail
    Deborah

    오 아주 좋은데요. 잘 배웠습니다.