블로그 본문에 글을 쓸 때 강조하고 싶은 곳이 있으면 굵은 볼드체(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으로 하고 속성을 주면 잘 적용된다. 결론적으로 볼드체와 이탤릭체 하이라이트는 한번 설정해두면 본문과 페이지 영역 모두 적용 가능하다. 단, 지금 사용하는 테마에 따라 클래스 이름이 달라질 수 있으니 개발자 검사를 먼저 진행하는 것을 추천한다.
워드프레스 마스터 가이드
구텐베르크 에디터 글자 스타일 설정 방법
워드프레스 페이지로 공지사항 만드는 방법 안내
워드프레스 본문 페이지 링크 글자 highlight 효과 적용 방법
GeneratePress 마케터 테마 선택 이유와 설치 방법
