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

0

경고나 주의 사항 등을 다른 텍스트와 구분하여 돋보이게 하고 싶은 경우 컬러 배경색이 적용된 텍스트 상자(글상자)를 이용할 수 있습니다.

HTML과 CSS로 텍스트 상자를 만드는 방법은 매우 간단합니다. 기본적인 CSS만 알면 쉽게 만들 수 있습니다. 다음 글에서 기본적이지만 다양한 텍스트 상자 만들기 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 추가하기 아래에 추가하도록 합니다. (워드프레스 버전이 5.0보다 낮은 경우 '테마 디자인' 대신 '외모' (Appearance)가 표시됩니다.)

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

워드프레스에 CSS 코드 추가하기
테마 디자인 > 사용자 정의하기를 클릭하면 "추가 CSS" 메뉴가 맨 아래에 표시된다.

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

워드프레스에 사용자 정의 CSS 코드 추가하기

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

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

워드프레스 글 작성 시 블럭에 CSS 클래스 추가하기

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

  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>

예시:

글상자 스타일 0 - txtBox00bg

글상자 스타일 1 - txtBox01bg

글상자 스타일 2 - txtBox02bg

글상자 스타일 3 - txtBox03bg

글상자 스타일 4 - txtBox04bg

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

마치며

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

참고:

댓글 남기기

댓글을 입력해주세요!
이름을 입력해주세요