처음 워드프레스 구텐베르크 편집기를 사용하면 특정 글자색 변경이 조금 어렵습니다. 기본적으로 글자 배경 색상, 글자 크기, 글자 색상 등을 일괄적으로 변경할 수 있지만 부분 변경하는 방법을 찾기가 어렵습니다. 가장 쉽게 특정 글자색을 변경하는 방법을 알려드리겠습니다.
목차
1. 워드프레스 글자색 변경 방법
워드프레스 구텐베르크 편집기를 사용하여 블록 단위 글자 색상, 글자 배경 색상, 글자 크기 등을 변경하는 방법을 알아보겠습니다.
워드프레스 구텐베르크 편집기를 열면 아래와 같이 창이 나타나게 됩니다. 좌측은 내용을 작성하는 공간, 우측은 편집 및 정보를 입력하는 공간이 나타납니다.
일반적으로 블록의 글 및 배경을 편집하기 위해선 내가 편집할 블록을 선택하면 위 화면과 같이 좌측 블록을 편집할 수 있는 창이 활성화 됩니다. 확대하면 아래와 같습니다.
내가 편집할 블록을 선택하면 위와 같은 창이 활성화 됩니다.
1번 텍스트를 클릭하면 내가 선택한 블록의 텍스트 전체 색상을 변경할 수 있습니다.
A(1번) 텍스트를 클릭하면 B와 같은 창이 활성화 되고 여기서 색상을 선택할 수 있습니다. 색상을 변경하려면 B부분을 클릭합니다. B를 클릭하면 C 창이 활성화 되고 여기서 본인이 원하는 색상을 찾거나, 색상 코드를 넣어주시면 됩니다. 그러면 내가 선택한 블록의 모든 글자 색상이 변경됩니다.
2번 배경을 클릭하면 내가 선택한 블록의 배경 색상을 변경할 수 있습니다.
A(2번) 배경을 클릭하면 B와 같은 창이 활성화 되고 여기서 블록 배경 색상을 선택할 수 있습니다. 배경 색상을 변경하려면 B부분을 클릭한 후 C창이 활성화 되면 여기서 본인이 원하는 색상을 선택하거나, 색상 코드를 넣어주시면 됩니다.
3번 서체 크기 왼쪽 두줄 막대를 클릭하면 글자 크기를 선택할 수 있습니다. 숫자를 넣으면 숫자가 커질 수록 글자 크기가 크게 변경됩니다.
여기까지 블록 전체 글자 색상, 글자 크기, 배경 색상을 변경하는 방법을 알아봤습니다.
2. 특정 글자색 변경 방법
워드프레스 구텐베르크 편집기를 사용해서 특정 글자색을 위와 같은 방법으로 특정 글자를 드래그해서 색상을 변경하면 특정 글자만 변경되는 것이 아니라 블록 전체의 글자색이 변경됩니다.
그럼 어떻게 하면 특정 글자만 색상을 변경할 수 있을까요? 함께 알아보겠습니다.
2-1. 편집기 기본 아이콘으로 글자색 변경하기
구텐베르크 편집기를 이용하여 특정 글자색을 변경하는 방법을 알아보겠습니다.
먼저 1번과 같이 색상을 변경할 글자를 드래그합니다. 그리고 2번 방향표시 더보기 아이콘을 클릭하면 각 종 아이콘이 활성화됩니다. 여기서 3번 강조를 선택하면 색상을 선택할 수 있는 창이 활성화되고, 여기서 원하는 글자 및 배경 색상을 선택하시면 됩니다. 글자색을 진하게 하려면 드래그한 상태에서 B를 누르시면 됩니다.
추가로 활성화된 아이콘 중 A 표시는 형광 표시를 해주는 기능입니다. 색상은 변경이 불가능합니다.
2-2. html 코드로 글자색 변경 방법
html 코드를 활용해서 글자색을 변경하는 방법이 있습니다.
먼저 내가 부분 변경할 글자가 있는 블록을 선택한 후 1번 점3를 클릭합니다. 그리고 2번 HTML로 편집을 클릭해 줍니다. 그러면 html로 변경할 수 있도록 창이 아래와 같이 변경됩니다.
1번에서 html 코드를 사용할 수 있도록 P태그로 시작 창이 활성화 되었습니다. 내가 변경하고자 하는 글 위 그림과 같이 “포스팅하면”의 앞뒤로 html 코드를 입력해 주시면 됩니다.
<span style="color:red;">포스팅하면</span>색상값은 red라고 영문으로 표기해도 되고 색상코드 #FF0000(빨간색 코드)를 입력하셔도 됩니다. 본인이 원하는 색상값을 넣어주시면 됩니다.
글자를 진하게 하려면 아래와 같이 코드를 추가해 주시면 됩니다.
<span style="color:red; font-weight: bold;">포스팅하면</span>그리고 글자에 형광색으로 강조하고 싶으면 아래와 같이 코드를 추가해 주시면 됩니다.
<mark><span style="color:red; font-weight: bold;">포스팅하면</span></mark>이와같이 내가 필요한 코드를 작성 한 후 2번 비주얼로 편집을 클릭하시면 원래 입력 모드로 전환됩니다.
아래 그림은 위에서 말씀드린 모든 html코드를 사용하여 작성한 결과입니다.
이상 워드프레스에서 특정 글자색을 변경하는 방법을 알아봤습니다. 이를 활용하여 조금 더 다채로운 글쓰기를 하시기 바랍니다.
▶ 워드프레스를 글쓰기를 할 때 소제목 스타일 변경을 통해 글의 가독성을 높일 수 있습니다. 소제목 스타일 변경하는 방법이 궁금하시다면 제 블로그 소제목 스타일과 관련된 글을 꼭 읽어 보시기 바랍니다.
