워드프레스에서 컬러 텍스트 상자 만들기 [CSS]

경고나 주의 사항 등을 다른 텍스트와 구분하여 돋보이게 하고 싶은 경우 컬러 배경색이 적용된 텍스트 상자(글상자)를 이용할 수 있습니다. 워드프레스에서는 블록 에디터의 문단 블록에서 제공하는 배경색 옵션을 사용하거나 커스텀 CSS를 사용하여 컬러 텍스트 상자를 쉽게 만들 수 있습니다.

HTML과 CSS로 텍스트 상자를 만드는 방법은 매우 간단합니다. 기본적인 CSS만 알면 쉽게 만들 수 있습니다.

[ 이 글은 2022년 11월 25일에 최종 업데이트되었습니다. ]

업데이트: 블록 에디터 문단 블록의 배경색 옵션 사용하기

이 글을 작성한 이후에 블록 에디터 기능이 향상되어 블록 에디터(구텐베르크)의 문단 블록에서 제공하는 배경색 설정 옵션을 사용하여 배경색을 지정할 수 있습니다.

추가적인 스타일은 CSS로 조정이 가능합니다.

워드프레스에 테두리와 배경색이 있는 글상자 만들기

위의 글에 언급된 텍스트 상자를 워드프레스 포스트 작성 시에 적용하는 방법을 살펴보겠습니다. CSS를 조금 알면 어렵지 않게 응용할 수 있습니다.

다양한 글상자 중에서 "사방에 테두리가 있고 배경색이 있는 상자" 부분의 글상자 스타일을 적용해봅시다.

/* 테두리와 배경색이 있는 글상자 만들기 */
/* Text boxes with border and backgrounnd color */
.txtBox00bg, .txtBox01bg, .txtBox02bg, .txtBox03bg, .txtBox04bg { border-style: solid; border-width: 2px; padding: 12px; word-break: break-all; } .txtBox00bg { border-color: LightGray; background-color:rgba(211, 211, 211, 0.2); } 
.txtBox01bg { border-color: DodgerBlue; background-color:rgba(30, 144, 255, 0.2); } 
.txtBox02bg { border-color: LightSalmon; background-color:rgba(255, 160, 122, 0.2); } 
.txtBox03bg { border-color: Tomato; background-color:rgba(255, 99, 71, 0.2); } .txtBox04bg { border-color: Crimson; background-color:rgba(237, 20, 61, 0.2); }

// 출처: 'hee's walking' 티스토리 블로그

CSS 코드 추가하기

먼저 위의 CSS 코드를 사용 중인 워드프레스 테마의 차일드 테마 폴더 내의 스타일시트 파일(style.css)에 추가하거나 워드프레스 알림판 » 외모 (또는 테마 디자인) » 사용자 정의하기 » 추가 (또는 버전에 따라 CSS 추가하기) 아래에 추가하도록 합니다.

아바다, 엔폴드 등의 유료 테마에서는 테마 옵션 내에서 사용자 지정 CSS 코드를 추가할 수 있는 Custom CSS 섹션이 있을 수 있습니다. 워드프레스에서 CSS 코드를 추가하는 자세한 방법은 "워드프레스에서 CSS 추가하기"를 참고해보세요.

외모 > 사용자 정의하기 화면에서 추가 CSS를 클릭하면 CSS 코드를 추가할 수 있는 화면이 표시됩니다.

CSS 코드를 추가했다면, 이제 글(포스트)을 작성할 때 '단락' 블럭에 CSS 클래스를 추가하여 스타일을 적용할 수 있습니다.

구텐베르크 편집기 (워드프레스 5.0 이상 또는 Gutenberg 플러그인 설치 시)

구텐베르크 편집기에서는...

1. '단락' 블럭에 텍스트를 입력하고
2. 오른쪽의 블럭 설정 탭에서 고급으로 이동하여 Additional CSS Class(es) 필드에 CSS 클래스를 추가합니다.

위에 언급된 CSS 코드를 사용하는 경우 txtBox00bg, txtBox01bg, txtBox02bg, txtBox03bg, txtBox04bg 등의 클래스 중 하나를 Additional CSS Class(es) 필드(③)에 입력하면 됩니다.

※ '단락' 블럭 대신 '사용자 정의 HTML' 블럭을 선택하고 HTML 코드를 직접 추가하는 것도 가능합니다. 예시:

<p class="txtBox00bg">텍스트 상자 txtBox00bg</p>

※ 구텐베르크(블록 에디터)에서는 배경 색상을 지정하는 옵션이 추가되었습니다. 이제는 위의 방법을 사용하지 않고 곧바로 배경색을 지정할 수 있습니다.

고전 편집기

고전 편집기(Classic Editor)를 기본 에디터로 사용하는 경우 "텍스트 모드"에 <p>...</p> 태그에 클래스를 지정할 수 있습니다.

예를 들어, 다음과 같은 코드를 "텍스트" 모드에서 입력하면 각 문단(paragraph)에 대하여 해당 CSS 클래스에 지정된 스타일이 적용됩니다.

<p class="txtBox00bg">텍스트 상자 txtBox00bg</p>
<p class="txtBox01bg">텍스트 상자 txtBox01bg</p>
<p class="txtBox02bg">텍스트 상자 txtBox02bg</p>
<p class="txtBox03bg">텍스트 상자 txtBox03bg</p>
<p class="txtBox04bg">텍스트 상자 txtBox04bg</p>

텍스트 상자의 배경색과 테두리의 색상, 굵기, 텍스트 글자 크기 및 색상 등의 스타일을 원하는 대로 지정하여 응용할 수 있습니다.

※업데이트: 컬러 박스 스타일을 조금 바꾸어 보았습니다. 위의 예시대로 컬러 상자의 스타일을 지정하려면 다음과 같은 CSS 코드를 사용하면 됩니다.

/* 컬러 텍스트 박스 스타일 */

.txtBox00bg, .txtBox01bg, .txtBox02bg, .txtBox03bg, .txtBox04bg {
	    padding: 1.25em 1.125em;
    border-radius: .750em;
	word-break: break-all;	
}

.txtBox00bg { 
	background-color: #f2f4f6;
} 

.txtBox01bg { 
	background-color:rgba(30, 144, 255, 0.2); 
} 

.txtBox02bg { 
background-color: rgba(255, 160, 122, 0.2);
} 

.txtBox03bg { 
	background-color:rgba(255, 99, 71, 0.2);
} 

.txtBox04bg { background-color:rgba(237, 20, 61, 0.2);
}

상기는 예시일 뿐입니다. 적절히 응용하여 마음에 드는 스타일로 바꾸어 보시기 바랍니다.

이 글을 작성한 이후에 참고, 경고, Tip, 요약 등의 상자를 다른 방식으로 만들어 보았습니다. CSS와 JavaScript를 사용하여 다양하게 응용할 수 있습니다.

마치며

기본적인 사항이지만 이와 관련된 질문을 하시는 분이 간혹 계셔서 잠시 시간을 내어 정리해보았습니다. 이 방법을 응용하여 글상자에 원하는 스타일을 적용할 수 있습니다.

참고:

• TablePress 표 마음대로 주무르기
• 워드프레스 메뉴 항목이 클릭되지 않도록 설정하는 방법
• 워드프레스 소제목 스타일 변경하기(아바다, 엔폴드, 뉴스페이퍼 테마 外)