워드프레스 7.1 탭(Tabs) 블록 사용법

워드프레스 7.1에는 탭(Tabs) 블록과 오디오 재생목록(Playlist) 블록, 이렇게 두 가지 블록이 새롭게 추가되었습니다. 그중에서도 탭 블록은 요금제 비교, 제품 정보, FAQ처럼 정리가 필요한 콘텐츠를 깔끔하게 보여줄 수 있어 활용도가 높습니다. 이번 글에서는 워드프레스 7.1의 탭 블록을 사용하는 방법을 자세히 살펴보겠습니다.

탭(Tabs) 블록 활용하기

탭 블록을 잘 활용하면 복잡한 콘텐츠를 깔끔하고 알기 쉽게 보여줄 수 있습니다.

예를 들어, 상품 요금제를 탭으로 구현하면 한꺼번에 너무 많은 정보를 보여주기 보다는 요금제 이름 탭을 클릭하면 해당 요금제에 대한 정보만 볼 수 있습니다.

다음은 서울 리전을 도입해 우리나라 내에서도 속도가 빠르면서 가성비까지 갖춘 케미클라우드(ChemiCloud)의 워드프레스 요금제를 탭으로 소개하는 예시입니다. (블로그를 시작하는 단계이거나 방문자 수가 그리 많지 않을 경우 케미클라우드가 저렴하면서 속도면에서 좋은 옵션일 수 있습니다. 방문자 수가 많거나 여러 개의 사이트를 안정적으로 운영하고 싶은 경우에는 이 블로그가 현재 호스팅되고 있는 클라우드웨이즈를 고려할 수 있습니다.😄)

제품 정보를 나열하는 용도로도 활용할 수 있습니다. 다음은 최근 삼성에서 출시한 갤럭시 폴드8의 제품 정보를 탭으로 표시한 예시입니다.

참고로 갤럭시 Z 폴드8/ Z 플립8을 구매하면 제미나이 6개월을 무료로 이용할 수 있습니다.😄 지난 7월 28일 사전 예약이 오픈될 때 폴드8을 구입했는데, 현재 전세계적으로 폴드8이 인기를 끌고 있네요.

• 갤럭시 Z 폴드8/ Z 플립8 구매 시 제미나이 6개월 무료

특히 FAQ를 카테고리별로 나눠서 보여주고 싶을 때 탭을 활용하면, 한 페이지에 모든 답변이 길게 나열되는 것을 막고 훨씬 깔끔하게 정리할 수 있습니다.

다음은 워드프레스 관련 질문을 카테고리별로 나누어서 탭으로 표시하는 예시입니다.

👉 워드프레스 블록 에디터에서는 토글/아코디언 블록도 지원합니다.

토글과 아코디언 차이점

토글에서는 개별 항목이 독립적으로 작동하지만, 아코디언은 한 번에 하나의 항목만 펼쳐지고 다른 항목을 클릭하면 펼쳐진 항목은 접히게 됩니다.

• 구텐베르크 편집기: 세부 사항/요약 블록 (토글/아코디언 기능)

블록 에디터에서 탭(Tab) 블록 사용하기 (워드프레스 7.1 이상)

워드프레스 7.1에서 블록 에디터의 탭(Tab) 블록이 추가되었습니다. 이제 엘리멘터와 같은 페이지 빌더를 사용하지 않고도 워드프레스 기본 기능으로 탭을 사용할 수 있게 되었습니다.😀

탭을 사용하려면 워드프레스 버전이 7.1 이상이어야 하고 블록 에디터(구텐베르크)가 기본 편집기여야 합니다. 워드프레스 5.0부터는 블록 에디터가 기본 편집기로 채택되어 있습니다.

탭을 추가하려면 블록 에디터에서 블록 삽입기 아이콘을 클릭합니다.

상기 그림과 같이 블록 삽입하기 아이콘을 클릭하면 아래와 같이 탭 목록이 표시됩니다. 검색에서 직접 검색하거나 디자인 섹션의 탭들 블록을 선택합니다.

쉬운 방법으로 아무 내용도 없는 문단(단락) 블록에서 "/탭들"을 입력하여 탭 블록이 선택할 수 있습니다(워드프레스 블록 에디터 키보드 단축키 사용 방법 참고).

👉 Tabs가 '탭들'로 번역되어 있습니다. 그냥 '탭'으로 번역하면 자연스러운데, 한국어 번역에 대해 잘 모르는 분이 번역했거나 자동번역기로 번역한 것이 아닌가 생각됩니다.

아래 그림과 같이 탭 블록이 삽입됩니다. 탭 제목(Tab Title)을 지정하고 탭 콘텐츠를 입력할 수 있습니다.

이미지, 표(테이블) 등 다른 요소들을 탭 콘텐츠로 추가가 가능합니다. 탭을 여러 개 표시하려는 경우 상단의 탭 추가/탭 제거 옵션을 사용하여 탭을 추가하거나 제거할 수 있습니다.

개별 탭에 텍스트/이미지/표 등 다양한 요소를 사용하여 콘텐츠를 입력해보시기 바랍니다.

탭을 클릭하면 오른쪽에 블록 설정이 표시됩니다. 탭 제목의 서체(텍스트) 색상과 배경색을 지정할 수 있습니다.

CSS를 사용하여 탭 스타일을 원하는 대로 지정하는 것도 고려할 수 있습니다.

저는 두 가지 스타일을 CSS로 구현하여 사용하고 있습니다. '탭들' 블록에 tab-1 또는 tab-2 클래스를 지정하고 다음과 같은 코드를 모양 » 사용자 정의 » 추가 CSS에 추가하면 상기와 같은 스타일(상기 스타일은 tab-1 클래스)로 탭을 표시할 수 있습니다.

/* 탭 블록 */
/* ============================================
   공통 구조
   ============================================ */
.tab-1,
.tab-2 {
	margin: 1.5em 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.tab-1 .wp-block-tab-list,
.tab-2 .wp-block-tab-list {
	display: flex;
	align-items: stretch;
	gap: 6px;
	padding: 10px;
	border-bottom: 1px solid;
}

.tab-1 .wp-block-tab-list button[role="tab"],
.tab-2 .wp-block-tab-list button[role="tab"] {
	box-sizing: border-box;
	padding: 9px 18px;
	border: 1px solid transparent;
	border-radius: 7px;
	font-weight: 500;
	font-size: 0.95em;
	line-height: 1.4;
	letter-spacing: -0.01em;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	background-image: none;
	background-clip: padding-box;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* 코어 활성 탭 인디케이터 제거 — 하단 흰 줄 / 모서리 삐져나옴의 원인 */
.tab-1 .wp-block-tab-list button[role="tab"]::after,
.tab-1 .wp-block-tab-list button[role="tab"]::before,
.tab-2 .wp-block-tab-list button[role="tab"]::after,
.tab-2 .wp-block-tab-list button[role="tab"]::before {
	display: none !important;
	content: none !important;
}

.tab-1 .wp-block-tab-panel,
.tab-2 .wp-block-tab-panel {
	padding: 24px 20px;
	line-height: 1.7;
}

.tab-1 .wp-block-tab-panel p:last-child,
.tab-2 .wp-block-tab-panel p:last-child {
	margin-bottom: 0;
}

.tab-1 .wp-block-tab-panel:not([hidden]),
.tab-2 .wp-block-tab-panel:not([hidden]) {
	animation: tabFadeIn 0.25s ease;
}

@keyframes tabFadeIn {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ============================================
   tab-1 : 딥 블루 계열
   ============================================ */
.tab-1 {
	border: 1px solid #d3ddea;
}

.tab-1 .wp-block-tab-list {
	background: #eef2f8;
	border-bottom-color: #d3ddea;
}

.tab-1 .wp-block-tab-list button[role="tab"] {
	background-color: #c2d3e8 !important;
	color: #274b6d !important;
	opacity: 0.75;
}

.tab-1 .wp-block-tab-list button[role="tab"]:hover {
	opacity: 1;
}

.tab-1 .wp-block-tab-list button[role="tab"][aria-selected="true"] {
	background-color: #1c4870 !important;
	color: #ffffff !important;
	border-color: #14324f;
	opacity: 1;
}

/* ============================================
   tab-2 : 웜 크림 + 코럴 포인트
   ============================================ */
.tab-2 {
	border: 1px solid #ece3d6;
}

.tab-2 .wp-block-tab-list {
	background: #faf6f0;
	border-bottom-color: #ece3d6;
}

.tab-2 .wp-block-tab-list button[role="tab"] {
	background-color: #f1e7d9 !important;
	color: #7a6a55 !important;
	opacity: 0.8;
}

.tab-2 .wp-block-tab-list button[role="tab"]:hover {
	opacity: 1;
}

.tab-2 .wp-block-tab-list button[role="tab"][aria-selected="true"] {
	background-color: #e8875a !important;
	color: #ffffff !important;
	border-color: #c96b41;
	opacity: 1;
}

상기 코드를 챗GPT나 제미나이 등 AI에 입력하고 원하는 스타일로 바꾸어 달라고 하면 코드를 변경해줄 것입니다.

탭 블록에 사용자 지정 CSS 클래스 입력하기

탭 블록에 CSS 클래스를 입력하려면 탭을 선택한 상태에서 툴바의 "상위 블록 선택" 아이콘을 클릭합니다.

블록 설정에서 고급을 클릭하고 추가 CSS 클래스 필드에 CSS 클래스(예: tab-1)를 입력합니다.

참고

• 엘리멘터의 새로운 기능 - 아토믹 탭
• 클라우드웨이즈 서버 OS 업그레이드 방법