블로그 본문에 글을 쓸 때 강조하고 싶은 곳이 있으면 굵은 볼드체(B)나 기울어진 이탤릭체(I)를 사용하는 것도 좋은 방법이다. 이때 배경색을 지정하면 마치 형광펜처럼 강조 효과를 높일 수 있는데 간단한 설정을 통해 하이라이트 효과를 구현할 수 있다.
보통 글 본문에서 중요한 곳을 마우스로 드래그를 한 다음, 볼드체를 지정하면 위처럼 나올 것이다. 네이버나 티스토리의 경우 글쓰기 에디터에 배경색 지정 옵션이 있지만, 워드프레스는 블록에디터와 클래식에디터 둘 다 없어서 CSS 기능을 활용해야 한다.
* 블록에디터 화면 오른쪽 Block – Color에 배경색 옵션이 있지만, 해당 문단 전체 색이 지정된다.
크롬 창 개발자 검사를 해보니 볼드체 클래스 이름은 strong으로 나왔고 속성 값을 입력했더니 위처럼 살구색 배경색이 잘 설정되었다. GeneratePress 테마 기준으로 워드프레스 대시보드 – Appearance – Customize – Additional CSS에 와서 코드를 입력하고 저장하면 된다.
블로그 개발자도구 검사로 CSS 요소 확인하는 방법
예시)
– 볼드체 영역 모서리 둥글기 : border-radius : 5px;
– 볼드체 영역 주변 여백 : padding : 0(상하) 5px(좌우);
– 볼드체 영역 배경색 : Background :#ffe2c0;
참고)
– padding 값을 높이면 글 줄 바꿈이 일어날 때 볼드체끼리의 간격을 줄일 수 있지만, 서로
– 앞서 본문 글 링크에 하이라이트를 설정해서 볼드체도 간격을 똑같이 맞추려면 line-height 값을 동일하게 설정하면 된다. 위의 예시는 2.1인데 line-height 값을 높일수록 볼드체가 포함된 본문 글 사이 간격도 넓어져서 설정 완료 전에 미리보기 모습을 확인하는 것이 좋다.
이어서 이탤릭체는 클래스 이름을 em으로 하고 속성을 주면 잘 적용된다. 결론적으로 볼드체와 이탤릭체 하이라이트는 한번 설정해두면 본문과 페이지 영역 모두 적용 가능하다. 단, 지금 사용하는 테마에 따라 클래스 이름이 달라질 수 있으니 개발자 검사를 먼저 진행하는 것을 추천한다.
관련 글
익숙해지면 좋은 구텐베르크 블록 에디터 글 쓰는 법 안내
구텐베르크 에디터 글자 스타일 설정 방법
워드프레스 페이지로 공지사항 만드는 방법 안내
GeneratePress 마케터 테마 선택 이유와 설치 방법
워드프레스 본문 페이지 링크 글자 highlight 효과 적용 방법
