워드프레스 문단 배경색 지정 시 발생하는 과도한 여백 줄이기

워드프레스(테마: GeneratePress)에서 문단 작성 시 블록 옵션으로 색상(텍스트, 배경), 서체(크기 등), 고급(HTML 앵커, 추가 CSS 클래스) 항목을 지정할 수 있다. 그중에서도 문단의 배경 색상을 지정(편집기 > 설정 > 블록 > 색상 > 배경)하면 작성 중인 문단의 배경색이 지정한 색으로 변하면서 글 상자와 같은 구분된 블록을 만들 수 있다.

block option


아쉬운 점이 있다면 해당 문단에 과도한 내부 여백이 생겨버린다는 것. 구분된 느낌이 좋기는 하지만 너무 혼자 독립적이다. 상황에 따라서 넓은 여백이 나쁘지 않을 수도 있지만, 글 상자의 느낌으로 편하게 사용하고 싶을 때에는 부담스럽다. 데스크탑 버전에서 볼 때는 그나마 봐줄 만하지만, 모바일 버전으로 보게 되면 과도한 여백 때문에 디자인적으로도 맞지 않고 문단의 너비가 좁아지는 효과를 주어 글의 내용을 읽는 것도 불편하다. 회색 배경의 글 상자를 나름대로 자주 사용하는 입장에서는 난감하기 그지없다.

그래서 회색 배경의 글 상자가 필요한 경우 '사용자 정의 HTML' 항목을 만들어 아래 예시와 비슷하게 글 상자를 직접 만들어 사용했다.

<div style="background: #f2f2f2; padding: 1em;">기존에 만들어 썼던 글 상자</div>
기존에 만들어 썼던 글 상자 (위의 방법)


이렇게 사용하면 생각보다 크게 불편하지 않게 회색 바탕의 글 상자를 사용할 수 있다. 다만, 글을 작성하거나 수정을 해야 하는 경우에는 비주얼 편집기가 아니라 코드 편집기와 같은 느낌으로 고쳐야 하기 때문에 조금 불편할 수 있긴 하다. 종종 HTML 태그 등을 직접 입력해야 하는 상황도 있고. 물론 다양한 형태의 글 상자를 만들어 쓰는 경우에는 어느 정도 강제할 수밖에 없는 방법이라 필요한 경우라면 피할 이유는 없다.

그렇다고는 해도 워드프레스 편집기 설정에서 문단 배경색을 지정해 쉽게 사용할 수 있는 회색 바탕 글 상자를 굳이 어렵게 사용할 필요는 없기 때문에 CSS 수정을 통해 적당한 수준의 여백으로 조정해 주는 것이 유용해 보인다.


CSS 수정

적용 테마는 GeneratePress.

외모 > 사용자 정의하기 > 추가 CSS

block background css

p.has-background {
padding: 1em;
}

1em으로 표시한 부분은 본인이 사용하는 테마나 취향에 맞추어 수치 및 단위(rem, em, px 등)를 조정하자. 여백이 너무 없으면 답답해 보이기 때문에 0보다는 크게 주었다.

개인적으로는 상하 여백이 좀 더 좁은 게 좋아 보여서 아래 정도로 설정해 보았다.

p.has-background {
padding: 0.5em 1em;
}

참고로 '추가 CSS'에 입력하면 실시간 미리보기로는 보이지 않으나 설정을 저장한 후 확인해 보면 적용되어 있는 것을 알 수 있다.


CSS 설정 추가 전후 모습

block background before
기존: 기본 설정으로 문단 배경 설정 시 내부 여백이 많이 생김 (캡쳐)
block background after
CSS 수정 1: 불필요한 여백을 줄여 봄 (padding: 1em) (캡쳐)
블록 배경 CSS 적용 후 2
CSS 수정 2: 추가적으로 상하 여백을 줄임 (padding: 0.5em 1em) (캡쳐)

카테고리의 다른 글

  1. 워드프레스 사진 이미지 캡션 왼쪽 정렬하기 (GeneratePress)
  2. 티스토리 다음 유입 비중이 적은 이유는 (포탈 및 검색엔진 비중)
  3. 티스토리 본문 하단 페이지 번호 글자 크기 변경하기 (square 스킨)
  4. 티스토리 스퀘어 스킨 각주[footnote] 아래 간격 띄우기 (Square Final 1.1.1)
  5. 티스토리 본문 줄간격 바꾸기 (스킨 CSS 편집)

댓글 남기기