워드프레스(테마: GeneratePress)에서 문단 작성 시 블록 옵션으로 색상(텍스트, 배경), 서체(크기 등), 고급(HTML 앵커, 추가 CSS 클래스) 항목을 지정할 수 있다. 그중에서도 문단의 배경 색상을 지정(편집기 > 설정 > 블록 > 색상 > 배경)하면 작성 중인 문단의 배경색이 지정한 색으로 변하면서 글 상자와 같은 구분된 블록을 만들 수 있다.
아쉬운 점이 있다면 해당 문단에 과도한 내부 여백이 생겨버린다는 것. 구분된 느낌이 좋기는 하지만 너무 혼자 독립적이다. 상황에 따라서 넓은 여백이 나쁘지 않을 수도 있지만, 글 상자의 느낌으로 편하게 사용하고 싶을 때에는 부담스럽다. 데스크탑 버전에서 볼 때는 그나마 봐줄 만하지만, 모바일 버전으로 보게 되면 과도한 여백 때문에 디자인적으로도 맞지 않고 문단의 너비가 좁아지는 효과를 주어 글의 내용을 읽는 것도 불편하다. 회색 배경의 글 상자를 나름대로 자주 사용하는 입장에서는 난감하기 그지없다.
그래서 회색 배경의 글 상자가 필요한 경우 '사용자 정의 HTML' 항목을 만들어 아래 예시와 비슷하게 글 상자를 직접 만들어 사용했다.
<div style="background: #f2f2f2; padding: 1em;">기존에 만들어 썼던 글 상자</div>
이렇게 사용하면 생각보다 크게 불편하지 않게 회색 바탕의 글 상자를 사용할 수 있다. 다만, 글을 작성하거나 수정을 해야 하는 경우에는 비주얼 편집기가 아니라 코드 편집기와 같은 느낌으로 고쳐야 하기 때문에 조금 불편할 수 있긴 하다. 종종 HTML 태그 등을 직접 입력해야 하는 상황도 있고. 물론 다양한 형태의 글 상자를 만들어 쓰는 경우에는 어느 정도 강제할 수밖에 없는 방법이라 필요한 경우라면 피할 이유는 없다.
그렇다고는 해도 워드프레스 편집기 설정에서 문단 배경색을 지정해 쉽게 사용할 수 있는 회색 바탕 글 상자를 굳이 어렵게 사용할 필요는 없기 때문에 CSS 수정을 통해 적당한 수준의 여백으로 조정해 주는 것이 유용해 보인다.
CSS 수정
적용 테마는 GeneratePress.
모양 > 사용자 정의 > 추가 CSS
p.has-background {
padding: 1em;
}1em으로 표시한 부분은 본인이 사용하는 테마나 취향에 맞추어 수치 및 단위(rem, em, px 등)를 조정하자. 여백이 너무 없으면 답답해 보이기 때문에 0보다는 크게 주었다.
개인적으로는 상하 여백이 좀 더 좁은 게 좋아 보여서 아래 정도로 설정해 보았다.
p.has-background {
padding: 0.5em 1em;
}참고로 '추가 CSS'에 입력하면 실시간 미리보기로는 보이지 않으나 설정을 저장한 후 확인해 보면 적용되어 있는 것을 알 수 있다.
CSS 설정 추가 전후 모습
