워드프레스에서 본문의 특정 텍스트 색상을 변경하는 방법들
워드프레스에서 글의 특정 부분(몇 자)의 색깔을 바꾸려는데 블록으로 변하는 현상 때문에 어려움을 겪으시는군요. 이는 워드프레스의 구텐베르크(Gutenberg) 블록 에디터의 기본 동작 방식 때문입니다. 구텐베르크는 모든 콘텐츠를 ‘블록’ 단위로 관리하기 때문에, 텍스트의 일부만 선택하여 스타일을 변경하려고 하면 해당 텍스트를 새로운 블록으로 인식하거나, 블록 전체에 스타일이 적용되려는 경향이 있습니다.
하지만 걱정하지 마세요! 특정 텍스트의 색깔을 바꾸는 방법은 여러 가지가 있습니다.
1. 구텐베르크 기본 기능 활용 (부분 텍스트 선택)
가장 일반적이고 쉬운 방법입니다.
- 텍스트 블록 선택: 색깔을 바꾸고 싶은 텍스트가 있는 단락 블록을 클릭합니다.
- 부분 텍스트 선택: 색깔을 바꾸고 싶은 ‘몇 자’ 또는 ‘단어’를 마우스로 드래그하여 선택합니다.
- 하이라이트 메뉴 확인: 텍스트를 선택하면 작은 툴바가 나타납니다. 여기에 ‘강조 표시’ 또는 ‘텍스트 색상’ 아이콘(보통 A자 모양)이 있을 수 있습니다.
- 색상 변경: 해당 아이콘을 클릭하여 원하는 색상을 선택합니다. (스크린샷에서 ‘색상’ 섹션 아래 ‘텍스트’ 옵션이 바로 이 기능입니다.)
- 팁: 만약 원하는 색상이 없다면, ‘사용자 정의 색상’ 또는 ‘사용자 지정 색상’ 옵션을 찾아 직접 색상 코드를 입력하거나 색상 팔레트에서 선택할 수 있습니다.
2. 클래식 에디터 블록 활용 (HTML 모드)
만약 구텐베르크 에디터가 익숙하지 않거나 좀 더 세밀한 제어를 원한다면, ‘클래식 에디터’ 블록을 추가하여 HTML 모드로 직접 코드를 입력하는 방법도 있습니다.
- 클래식 에디터 블록 추가: 새 블록을 추가할 때 ‘클래식’ 또는 ‘클래식 에디터’를 검색하여 추가합니다.
- HTML 모드 전환: 클래식 에디터 블록 안에서 상단 툴바의 ‘텍스트’ 탭(또는
< >모양의 HTML 버튼)을 클릭하여 HTML 모드로 전환합니다. - 직접 코드 입력: 색깔을 바꾸고 싶은 텍스트를
<span>태그로 감싸고style속성을 사용하여 색상을 지정합니다.HTML<p>이것은 <span style="color: #FF0000;">빨간색 텍스트</span>입니다.</p>#FF0000은 빨간색의 16진수 색상 코드입니다. 원하는 색상 코드를 찾아 사용하세요.
3. 사용자 정의 CSS 추가 (고급 사용자용)
특정 스타일을 반복적으로 사용하거나, 테마의 기본 CSS를 변경하고 싶을 때 유용합니다.
- CSS 클래스 추가: 구텐베르크 에디터에서 텍스트 블록을 선택한 후, 오른쪽 사이드바의 ‘블록’ 탭에서 ‘고급’ 섹션을 펼칩니다. 여기에 ‘추가 CSS 클래스’ 필드가 있습니다.
- 클래스 이름 입력: 예를 들어,
my-red-text와 같은 클래스 이름을 입력합니다. - 사용자 정의 CSS 추가: 워드프레스 관리자 페이지에서 ‘외모’ > ‘사용자 정의하기’ > ‘추가 CSS’로 이동합니다. 여기에 다음 코드를 추가합니다.
- .my-red-text {
- color: #FF0000; /* 빨간색 */
- }
- 이제 해당 클래스를 추가한 모든 텍스트 블록에 이 스타일이 적용됩니다.
결론::
가장 쉽고 권장하는 방법은 1번, ‘구텐베르크 기본 기능 활용’입니다. 스크린샷에서 보이는 것처럼, 텍스트 블록을 선택한 후 원하는 텍스트만 드래그하여 선택하면 오른쪽에 ‘색상’ 옵션이 활성화될 것입니다. 여기서 ‘텍스트’ 아래의 색상 팔레트나 사용자 정의 색상 옵션을 사용하여 원하는 색깔로 변경하시면 됩니다.
만약 이 방법으로도 원하는 대로 되지 않는다면, 사용하시는 워드프레스 테마나 설치된 다른 플러그인과의 충돌 문제일 수도 있으니, 해당 테마나 플러그인의 지원 문서를 확인하거나 비활성화 테스트를 해보는 것도 방법입니다.