워드프레스에서 CSS로 콜아웃 박스 만들기 (참고, 경고, Tip 상자)

이 워드프레스 블로그에서는 자바스크립트와 CSS를 활용하여 참고, 경고, 팁(Tip) 등의 콜라웃 박스를 표시해왔습니다. 자바스크립트를 사용하면 수월하게 HTML 구조를 바꿀 수 있지만 사이트 속도에 약간의 영향을 미칠 수 있습니다. 그래서 상자 레이아웃을 최대한 유지하면서 자바스크립트를 제거하고 CSS로만 구현하도록 바꾸었습니다.

워드프레스에서 CSS로 참고, 경고, Tip 등 콜아웃 박스 만들기

참고나 경고 등을 나타내기 위해 박스 형태로 만들면 가독성이 증가합니다. 중요한 사항을 아래 그림과 같이 상자로 표시하면 효과를 높일 수 있습니다.

이러한 박스를 일컫는 용어가 무엇인지 챗GPT에 물어보니 다음과 같은 용어를 추천하네요.

• 콜아웃 박스(Callout Box): 본문에서 특정 내용을 강조하거나 시선을 끌기 위한 박스
• 인포 박스(Info Box): 설명, 안내, 보충 정보를 제공하는 박스
• 노트 박스(Note Box): 참고 사항이나 부연 설명을 담는 박스
• 팁 박스(Tip Box): 유용한 팁이나 요령을 강조하는 박스
• 경고 박스(Warning Box): 주의 사항이나 위험 요소를 알리는 박스
• 알림 박스(Alert Box): 중요한 메시지나 알림을 표시하는 박스
• 인용 박스(Blockquote): 인용문이나 참고 문구를 강조하는 박스
• 카드(Card): 콘텐츠를 독립적인 단위로 묶는 UI 컴포넌트
• 패널(Panel): 관리자 화면이나 설정 영역에서 사용하는 구획 박스

영어로는 '콜아웃 박스'라는 용어가 일반적으로 사용되다고 합니다.

저는 자바스크립트(Javascript)와 CSS를 사용하여 이와 같은 기능을 구현해왔습니다만, JS는 가능하면 사용하지 않는 것이 바람직합니다.

JS를 CSS 방식으로 변경하면 '속도', '안정성', '관리' 측면에서 유리합니다.

• 사이트 속도 향상 (LCP 개선): 자바스크립트를 다운로드하고 해석하는 과정 없이, 브라우저가 CSS만 읽으면 즉시 디자인을 그릴 수 있어 로딩 속도가 빨라집니다.
• 레이아웃 이동(CLS) 방지: JS 방식은 페이지가 뜬 뒤에 모양을 바꾸므로 화면이 덜컥거리는 현상(CLS)이 생길 수 있지만, CSS는 처음부터 완성된 형태로 로딩되어 화면이 안정적입니다.
• 유지보수 용이성: 복잡한 로직이나 함수를 신경 쓸 필요 없이, 스타일 코드만 수정하면 디자인을 바꿀 수 있어 관리가 훨씬 쉽습니다.
• 깜빡임 현상(FOUC) 제거: 스타일이 적용되지 않은 못생긴 텍스트가 찰나의 순간 보였다가 바뀌는 현상이 사라집니다.
• SEO(검색엔진 최적화) 친화적: 검색엔진 봇이 자바스크립트를 실행하지 않아도 콘텐츠와 디자인 구조를 즉시 명확하게 파악할 수 있습니다.

기존의 JS와 CSS는 제거하고, 완전히 새롭게 CSS를 만들어서 이러한 콘텐츠 박스를 표시하도록 바꾸었습니다.

참고 박스 예시:

경고 박스 예시:

박스 라벨은 '주의'로 되어 있지만, CSS에서 '경고'나 'Warning' 등 다른 문구로 바꿀 수 있습니다.

Tip 박스 예시:

배경색, 라벨 텍스트, 상단 아이콘 등은 자유롭게 변경할 수 있습니다.

콜아웃 박스 CSS 예시

상기와 같은 콜아웃 박스를 구현하고 싶은 경우 다음과 같은 CSS 코드를 차일드 테마의 스타일시트 파일에 추가하거나 워드프레스 관리자 페이지의 모양 » 사용자 정의 » 추가 CSS에 추가할 수 있습니다.

/* =========================================
   WordPress Callout Boxes (Note, Tip, Warning)
   ========================================= */

/* 1. 박스 컨테이너 공통 스타일 */
.single [class*="txtBox"] {
	position: relative;
	display: block;
	margin: 2.5em 0 1.5em;
	
	/* 박스 내부 여백: 헤더 높이 + 여유 공간 */
	padding: 70px 25px 25px 25px; 
	
	background-color: #fff !important;
	border-radius: 12px;
	
	/* 테두리 설정: 상좌우 얇게 + 하단 포인트 컬러 굵게 */
	border: 1px solid #eee;
	border-bottom: 5px solid var(--solid-color);
	
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	
	font-size: 1em;
	line-height: 1.7;
	word-break: keep-all;
	box-sizing: border-box;
}

/* 2. 상단 헤더 바 (제목 배경) */
.single [class*="txtBox"]::before {
	content: attr(data-title);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	
	background: var(--header-bg);
	border-radius: 10px 10px 0 0;
	color: #fff;
	font-weight: 700;
	font-size: 1.1em;
	letter-spacing: 0.05em;
	
	display: flex;
	align-items: center;
	padding-left: 65px;
	box-sizing: border-box;
	z-index: 1;
}

/* 3. 헤더 아이콘 (원형 배경) - 공통 기본값 */
.single [class*="txtBox"]::after {
	content: var(--icon-char);
	position: absolute;
	top: 10px;
	left: 15px;
	width: 30px;
	height: 30px;
	
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	color: #fff;
	text-align: center;
	line-height: 30px;
	font-family: sans-serif;
	font-weight: bold;
	font-size: 18px;
	z-index: 2;
}

/* 4. 리스트(ol, ul) 레이아웃 보정 */
.single ol[class*="txtBox"],
.single ul[class*="txtBox"] {
	list-style-position: outside;
	padding-left: 3.5em;
}
.single ol[class*="txtBox"] li,
.single ul[class*="txtBox"] li {
	margin-bottom: 8px;
}


/* =========================================
   각 박스별 설정 (3종류)
   ========================================= */

/* [참고] txtBox00bg - 파란색 (Info 'i' 스타일) */
.single .txtBox00bg {
	--header-bg: linear-gradient(135deg, #5C6BC0, #3949AB);
	--solid-color: #3949AB;
	--icon-char: "i"; 
}
.single .txtBox00bg::before { content: "참고"; }
/* 'i' 아이콘 전용 스타일 조정 */
.single .txtBox00bg::after {
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-weight: 900;
	font-size: 26px;
	width: 40px;
	height: 40px;
	line-height: 42px;
	top: 5px;
	left: 12px;
}

/* [Tip] txtBox01bg - 하늘색 */
.single .txtBox01bg {
	--header-bg: linear-gradient(135deg, #29B6F6, #0288D1);
	--solid-color: #0288D1;
	--icon-char: "!";
}
.single .txtBox01bg::before { content: "Tip"; }

/* [주의/경고] txtBox02bg - 붉은색 */
.single .txtBox02bg {
	--header-bg: linear-gradient(135deg, #EF5350, #C62828);
	--solid-color: #C62828;
	--icon-char: "!";
}
.single .txtBox02bg::before { content: "주의"; }


/* 5. 내부 링크 스타일 */
.single [class*="txtBox"] a {
	color: #333;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: rgba(0,0,0,0.3);
	transition: color 0.2s;
}
.single [class*="txtBox"] a:hover {
	color: #000;
}

/* 6. 모바일 대응 */
@media screen and (max-width: 768px) {
	.single [class*="txtBox"] {
		padding: 65px 20px 20px 20px;
		margin: 2em 0 1em;
	}
	.single [class*="txtBox"]::before {
		font-size: 1em;
		padding-left: 60px;
	}
	.single ol[class*="txtBox"],
	.single ul[class*="txtBox"] {
		padding-left: 2.5em;
	}
}

콜아웃 박스 적용 방법

상기 코드는 워드프레스 기본 편집기인 블록 에디터(구텐베르크)에서만 테스트했습니다. 고전 편집기(클래식 에디터)에서 작동하는지 여부는 확인하지 않았습니다.

다음과 같은 방법으로 박스 스타일을 적용할 수 있습니다.

1. 블록 에디터 화면에서 박스 스타일을 적용할 문단(paragraph)을 선택합니다.
2. 왼쪽의 블록 설정을 선택합니다.
3. '고급'을 클릭합니다.
4. 추가 CSS 클래스에 적절한 CSS 클래스를 입력합니다.

다음과 같은 CSS 클래스를 입력할 수 있습니다.

• 참고: txtBox00bg
• 경고: txtBox02bg
• 팁(Tip): txtBox01bg

상기 CSS 코드를 챗GPT나 제미나이(Gemini) 등 AI에 넣고 원하는 스타일로 수정을 요청할 수 있습니다.

상용구 프로그램을 사용하여 쉽게 CSS 클래스 추가하기

CSS 클래스를 직접 입력하기 보다는 상용구 프로그램을 사용하여 상용구로 지정해 놓으면 CSS 클래스를 오타 없이 빠르게 입력이 가능합니다.

예를 들어, 다음과 같이 상용구를 지정하는 것을 생각해볼 수 있습니다.

참고; → txtBox00bg
팁; →  txtBox01bg
경고; → txtBox02bg

무료 상용구 프로그램으로 BeefText가 있습니다. 저는 이 프로그램을 사용하는데, 잘 활용하면 생산성이 크게 향상될 수 있습니다.😊

• 무료 상용구 프로그램 BeefText

다른 방법으로 '패턴'으로 저장하는 것도 생각해볼 수 있습니다.

• 워드프레스 블록 에디터 패턴(재사용 가능 블록) 활용하기

마치며

이상으로 워드프레스에서 간단한 CSS 코드를 사용하여 콜아웃 박스(참고, 경고, Tip 상자)를 구현하는 방법에 대하여 살펴보았습니다.

티스토리에서도 비슷하게 구현이 가능하겠지만, 티스토리의 경우 HTML 모드로 전환해야 하기 때문에 번거로울 수 있습니다. 티스토리에서는 쉬운 방법으로 자바스크립트와 CSS를 사용하여 비슷하게 구현이 가능합니다.

참고

• 워드프레스 버튼 스타일 예시 (+CSS 및 적용 방법)
• 가성비 좋은 해외 공유호스팅 ChemiCloud 워드프레스 호스팅 서울 서버 리전 추가 (+ 가입 방법)
• 워드프레스에 SNS 스레드 공유 버튼 표시하기 (플러그인 미사용)