로그인 회원가입
로그인 회원가입

디자인 시스템

이 사이트의 스타일은 세 층으로 이뤄져 있습니다. 기본 요소 스타일은 클래스를 붙이지 않은 HTML 태그(h2·p·input 등) 16개의 기본 모양, 디자인 토큰은 :root 에 정의된 값(색·글자 크기·간격·반경) 76개, 글로벌 스타일은 그 토큰을 조합해 블록에 붙이는 GenerateBlocks 클래스 108개입니다. 값을 바꾸면 이 화면도 같이 바뀝니다.

1. 기본 요소 스타일

타이포그래피 10 폼 요소 4 미디어·코드 3

HTML 태그 선택자에 거는 기본값 16개 — 클래스를 붙이지 않은 h2·p·input 이 어떻게 보일지 정합니다. 글 본문(.entry-content)은 그 안의 제목·문단·목록 간격까지 포함합니다. 플러그인이 찍는 마크업과 에디터의 기본 블록은 이 값을 그대로 따릅니다. 본문의 제목은 항상 h2 로 씁니다. GenerateBlocks → 글로벌 스타일의 Base 분류에서 관리합니다.

Typography (타이포그래피)

제목·문단·인용·글 본문 — 한글 기준 행간·자간

body크기 18px --text-md블록 기본 클래스 없음 — body 클래스는 워드프레스가 페이지마다 붙인다

본문 기본 글꼴과 크기입니다. 잉크프레임은 누구나 쉽게 배우고 성장할 수 있는 온라인 강의 플랫폼입니다.

h1크기 36px --heading-sm굵기 700행간 1.35 --heading-line-height-sm글자 #334456 --contrast-10모바일(≤767px)크기 30px --heading-2xs행간 1.45 --heading-line-height-2xs
h2크기 25px --text-2xl굵기 700행간 1.45 --heading-line-height-2xs글자 #334456 --contrast-10아래 여백 16px --space-md모바일(≤767px)크기 22px --text-xl
h3크기 20px --text-lg굵기 700행간 1.45 --heading-line-height-2xs글자 #334456 --contrast-10아래 여백 12px --space-xs
h4크기 18px --text-md굵기 600행간 1.45 --heading-line-height-2xs글자 #334456 --contrast-10아래 여백 12px --space-xs
h5크기 16px --text-sm굵기 600행간 1.7 --text-line-height-md글자 #334456 --contrast-10아래 여백 8px --space-3xs
h6크기 14px --text-xs굵기 600행간 1.7 --text-line-height-md글자 #334456 --contrast-10아래 여백 8px --space-3xs글 본문·플러그인이 찍는 맨 제목의 기본값. 본문의 제목은 항상 h2 로 쓴다(h1 은 페이지 제목 하나뿐, h3 이하는 h2 아래 하위 단계). 한글 기준 자간 -0.02em(h4 이하 -0.01em) · 행간 1.45. 줄바꿈은 브라우저 기본(한국어 제목에 text-wrap:balance 를 쓰지 않는다). 클래스가 붙은 제목은 그 클래스가 우선. (견본 제목은 문서 개요에서 빠지도록 role="presentation")

제목 1 — 페이지 제목 급 (36px · 모바일 30px)

제목 2 — 본문 제목 (25px · 모바일 22px)

제목 3 — 본문 하위 제목 (20px)

제목 4 — 소제목 (18px)

제목 5 — 작은 소제목 (16px)
제목 6 — 라벨 급 (14px)
p행간 1.7 --text-line-height-md한글 본문 기본값 — 행간 1.7(--text-line-height-md) · 자간 -0.01em. 줄바꿈은 브라우저 기본(text-wrap 을 쓰지 않는다). 문단 간격은 글 본문(.entry-content)에서 정한다

잉크프레임은 누구나 쉽게 배우고 성장할 수 있는 온라인 강의 플랫폼입니다. 한 번 배운 내용이 일과 삶에서 바로 쓰이도록, 실습과 결과물 중심으로 강의를 만듭니다.

blockquote안쪽 48px 0 48px 64px --space-3xl · --space-4xl블록 기본 클래스
.wp-block-quote 코어 인용
.wp-block-pullquote 코어 풀쿼트

배운 내용을 바로 일에 쓰는 것이 진짜 공부입니다.

— 잉크프레임 수강생
.entry-content
추가 타깃 1개 — 플러그인 마크업에도 같은 모양
  • .dynamic-entry-content

.dynamic-entry-content글 본문(글·상품 설명) 리듬 — 제목 위 여백 48px(h2)·32px(h3)·24px(h4 이하), 문단 아래 20px(목록이 이어지면 14px), 목록 들여쓰기 24px·항목 간격 8px·마커 --contrast-30, 강조 600. 맨 위 제목과 마지막 요소의 바깥 여백은 0

이런 분께 추천합니다

경험이 없어도 따라올 수 있도록 처음부터 차근차근 안내합니다.

  • 처음 시작하는 분
  • 혼자 연습하다 막혔던 분

이 강의에서 배우는 것

기초를 익히고 연습을 거쳐, 첫 결과물을 끝까지 완성합니다.

하위 제목

문단과 강조, 목록이 이어지는 글 본문의 리듬입니다.

Form (폼 요소)

입력·텍스트 영역·선택·버튼의 기본 모양

input크기 18px --text-md배경 #F9F8F4 --base-20
추가 타깃 2개 — 플러그인 마크업에도 같은 모양
  • input:is([type="text"],[type="email"],[type="password"],[type="search"],[type="url"],[type="tel"],[type="number"],[type="date"])
  • .woocommerce-cart table.cart td.actions .coupon .input-text:not(#_)
블록 기본 클래스
.wp-block-search__input 코어 검색
.gb-form-field-control GB 폼
textarea크기 18px --text-md행간 1.7 --text-line-height-md글자 #334456 --contrast-10배경 #F9F8F4 --base-20안쪽 12px 16px --space-xs · --space-md테두리 1px solid #838D94 --contrast-40반경 4px --border-radius-3xs블록 기본 클래스
.wp-block-post-comments-form textarea 코어 댓글 폼
.gb-form-field-control GB 폼
select크기 18px --text-md글자 #334456 --contrast-10배경 #F9F8F4 --base-20안쪽 0 16px --space-md테두리 1px solid #838D94 --contrast-40반경 4px --border-radius-3xs블록 기본 클래스
.wp-block-categories-dropdown select 코어 카테고리 드롭다운
.gb-form-field-control GB 폼
button크기 22px --text-xl굵기 500행간 1.5글자 #FCFAF0 --base-30배경 #334456 --accent-20모바일(≤767px)크기 18px --text-md아래 안쪽 8px --space-3xs블록 기본 클래스
.wp-element-button 코어 버튼 공통
.wp-block-button__link 코어 버튼
.wp-block-search__button 코어 검색

Media & Code (미디어·코드)

이미지·캡션·코드 블록

img반경 7px --border-radius-2xs블록 기본 클래스
.wp-image-{ID} 코어 이미지
.gb-media-{uid} GB 미디어 (블록마다 고유)
figure블록 기본 클래스
.wp-block-image 코어 이미지
figure figcaption
pre크기 16px --text-sm행간 1.7 --text-line-height-md글자 #334456 --contrast-10배경 #F9F8F4 --base-20안쪽 16px 20px --space-md · --space-lg테두리 0반경 7px --border-radius-2xs블록 기본 클래스
.wp-block-code 코어 코드
.wp-block-preformatted 코어 서식 있는 텍스트
pre — 코드 블록

2. 디자인 토큰

색상 14 타이포그래피 28 간격 13 테두리 반경 11 그림자 4

:root 의 CSS 변수 76개 — 디자인의 값. 블록과 클래스는 이 값을 var(--이름) 으로 참조합니다. GenerateBlocks → 디자인 토큰에서 관리합니다.

Color (색상)

글자·배경·테두리 색. 숫자가 작을수록 진하다

글자와 어두운 면

--contrast-10
#334456

--contrast-20
#4A4A4A

--contrast-30
#6F6F6F

--contrast-40
#838D94

--contrast-50
#DEDFD9

배경과 밝은 면

--base-20
#F9F8F4

--base-30
#FCFAF0

--base-40
rgba(255, 255, 255, 0)

브랜드 강조색

--accent-10
#263340

--accent-20
#334456

--accent-30
#E9EAE3

보조 강조색(주황)

--sub-10
#9A6200

--sub-20
#FAB437

--sub-30
#FFF7E0

Typography (타이포그래피)

글자 크기와 같은 단계의 행간 — 크기와 행간은 한 쌍으로 쓴다

제목

제목 가나다 Aa --heading-2xs · 1.875rem (30px) / --heading-line-height-2xs · 1.45

제목 가나다 Aa --heading-xs · 2rem (32px) / --heading-line-height-xs · 1.4

제목 가나다 Aa --heading-sm · 2.25rem (36px) / --heading-line-height-sm · 1.35

제목 가나다 Aa --heading-md · 2.5rem (40px) / --heading-line-height-md · 1.3

제목 가나다 Aa --heading-lg · 3.125rem (50px) / --heading-line-height-lg · 1.4

제목 가나다 Aa --heading-xl · 3.5rem (56px) / --heading-line-height-xl · 1.2

제목 가나다 Aa --heading-2xl · 4.375rem (70px) / --heading-line-height-2xl · 1.25

본문

본문 가나다 Aa --text-2xs · 0.75rem (12px) / --text-line-height-2xs · 1.85

본문 가나다 Aa --text-xs · 0.875rem (14px) / --text-line-height-xs · 1.8

본문 가나다 Aa --text-sm · 1rem (16px) / --text-line-height-sm · 1.75

본문 가나다 Aa --text-md · 1.125rem (18px) / --text-line-height-md · 1.7

본문 가나다 Aa --text-lg · 1.25rem (20px) / --text-line-height-lg · 1.6

본문 가나다 Aa --text-xl · 1.375rem (22px) / --text-line-height-xl · 1.6

본문 가나다 Aa --text-2xl · 1.5625rem (25px) / --text-line-height-2xl · 1.45

Spacing (간격)

패딩·마진·gap

--space-5xs · 0.25rem (4px)

--space-4xs · 0.375rem (6px)

--space-3xs · 0.5rem (8px)

--space-2xs · 0.625rem (10px)

--space-xs · 0.75rem (12px)

--space-sm · 0.875rem (14px)

--space-md · 1rem (16px)

--space-lg · 1.25rem (20px)

--space-xl · 1.875rem (30px)

--space-2xl · 2.5rem (40px)

--space-3xl · 3rem (48px)

--space-4xl · 4rem (64px)

--space-5xl · 7.5rem (120px)

Border Radius (테두리 반경)

버튼·카드·입력창의 모서리

--border-radius-3xs
0.25rem (4px)

--border-radius-2xs
0.4375rem (7px)

--border-radius-xs
0.625rem (10px)

--border-radius-sm
0.75rem (12px)

--border-radius-md
1.125rem (18px)

--border-radius-lg
1.25rem (20px)

--border-radius-xl
1.5rem (24px)

--border-radius-2xl
1.875rem (30px)

--border-radius-3xl
2rem (32px)

--border-radius-pill
9999px

--border-radius-circle
50%

Shadow (그림자)

메뉴·툴팁·대화상자·토스트처럼 떠 있는 층에만

--shadow-sm
5px 5px 0 var(–contrast-10)

--shadow-md
10px 10px 0 var(–contrast-10)

--shadow-lg
15px 15px 0 var(–contrast-10)

--shadow-sm-dark
5px 5px 0 #000000

3. 글로벌 스타일

섹션 18 페이지 헤더 3 레이아웃 21 카드 18 포스트 2 버튼 15 탭 4 검색 3 내비게이션 4 헤더 13 푸터 5 오버레이 패널 2

GenerateBlocks 글로벌 클래스 108개 — 토큰을 조합한 재사용 스타일. 블록에 클래스로 붙입니다. 에디터 분류(카테고리)별로 모았고, 왼쪽은 선택자, 오른쪽은 그 클래스를 실제로 적용한 미리 보기입니다.

Section (섹션)

섹션 컨테이너와 섹션 안의 제목·본문

.section
padding: var(--space-2xl)
.inner-section최대 폭 –gb-container-width --gb-container-width
.inner-section--lg최대 폭 80rem
.inner-section--sm최대 폭 60rem
.inner-section--xs최대 폭 20rem
.inner-section--lg — 80rem
.inner-section — max-width: var(--gb-container-width)
.inner-section--sm — max-width: 60rem
.inner-section--xs — 20rem
.section__title크기 50px --heading-lg굵기 700행간 1.4 --heading-line-height-lg글자 #4A4A4A --contrast-20아래 여백 30px --space-xl모바일(≤767px)크기 30px --heading-2xs행간 1.45 --heading-line-height-2xs
추가 타깃 1개 — 플러그인 마크업에도 같은 모양
  • h3.ld-course-title

.section__tagline크기 22px --text-xl굵기 400행간 1.6 --text-line-height-xl글자 #6F6F6F --contrast-30아래 여백 48px --space-3xl
.section__text크기 22px --text-xl행간 1.6 --text-line-height-xl모바일(≤767px)크기 20px --text-lg행간 1.6 --text-line-height-lg

섹션 제목

섹션 태그라인 — 제목을 보충하는 한 줄

섹션 본문 텍스트입니다. 섹션의 내용을 설명합니다.

.section__message크기 36px --heading-sm굵기 700행간 1.35 --heading-line-height-sm글자 #334456 --contrast-10아래 여백 16px --space-md모바일(≤767px)크기 30px --heading-2xs행간 1.45 --heading-line-height-2xs
.section__message-description크기 20px --text-lg굵기 400행간 1.6 --text-line-height-lg글자 #4A4A4A --contrast-20아래 여백 0404 · 검색 결과 없음 · 가입 완료 같은 안내 화면

죄송합니다. 존재하지 않는 페이지입니다.

주소가 바뀌었거나 삭제된 페이지일 수 있습니다. 홈에서 다시 찾아보세요.

.sub-section세로 간격 16px --space-md
.sub-section__header가로 간격 4px --space-5xs아래 여백 16px --space-md
.sub-section__title크기 30px --heading-2xs굵기 700행간 1아래 여백 1rem
.sub-section__title-count크기 14px --text-xs굵기 600행간 1글자 #4A4A4A --contrast-20배경 #F9F8F4 --base-20안쪽 0 6px --space-4xs반경 9999px --border-radius-pill
.sub-section__text크기 18px --text-md행간 1.7 --text-line-height-md글자 #4A4A4A --contrast-20아래 여백 0

하위 섹션 제목

12

하위 섹션 본문 텍스트입니다.

.section__title--display크기 70px --heading-2xl굵기 700행간 1.25 --heading-line-height-2xl글자 #334456 --contrast-10아래 여백 0모바일(≤767px)크기 40px --heading-md행간 1.3 --heading-line-height-md

미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스

.sub-section__title--lg크기 50px --heading-lg굵기 700행간 1.4 --heading-line-height-lg글자 #334456 --contrast-10아래 여백 30px --space-xl모바일(≤767px)크기 32px --heading-xs

미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스

Page Header (페이지 헤더)

페이지·아카이브 제목

.page-header__title크기 50px --heading-lg굵기 700모바일(≤767px)크기 32px --heading-xs행간 1.4 --heading-line-height-xs

페이지 제목

.page-header__tagline크기 20px --text-lg굵기 400행간 1.6 --text-line-height-lg글자 #4A4A4A --contrast-20아래 여백 0

페이지 태그라인

.archive__title크기 56px --heading-xl굵기 700행간 1.35 --heading-line-height-sm글자 #334456 --contrast-10아래 여백 0모바일(≤767px)크기 32px --heading-xs

아카이브 제목

Layout (레이아웃)

그리드·플렉스·정렬·여백 유틸리티

.grid--1가로 간격 16px --space-md세로 간격 16px --space-md
1fr
.grid--1-1가로 간격 40px --space-2xl세로 간격 40px --space-2xl
1fr
1fr
.grid--1-1-1가로 간격 40px --space-2xl세로 간격 120px --space-5xl
1fr
1fr
1fr
.grid--1-1-1-1가로 간격 30px --space-xl세로 간격 40px --space-2xl
1fr
1fr
1fr
1fr
.grid--1-3가로 간격 40px --space-2xl세로 간격 40px --space-2xl
1fr
3fr
.grid--3-1가로 간격 40px --space-2xl세로 간격 40px --space-2xl
3fr
1fr
.grid--1-1-2가로 간격 16px --space-md세로 간격 16px --space-md
1fr
1fr
2fr
.grid--1-3-1가로 간격 16px --space-md세로 간격 16px --space-md
1fr
3fr
1fr
.grid--1-2-1가로 간격 16px --space-md세로 간격 16px --space-md
1fr
2fr
1fr
.grid--2-1-1가로 간격 16px --space-md세로 간격 16px --space-md
2fr
1fr
1fr
.grid--2-1가로 간격 48px --space-3xl세로 간격 48px --space-3xl
2fr
1fr
.grid--1-1-1-1-1가로 간격 16px --space-md세로 간격 16px --space-md
1fr
1fr
1fr
1fr
1fr
.grid--1-4가로 간격 40px --space-2xl세로 간격 40px --space-2xl
1fr
4fr
.grid--1-5가로 간격 40px --space-2xl세로 간격 40px --space-2xl
1fr
5fr
.flex-row가로 간격 16px --space-md
1
2
3
.flex-column
1
2
3
.padding--md안쪽 16px --space-md
.padding--2xl안쪽 40px --space-2xl모바일(≤767px)안쪽 20px --space-lg
padding--md
padding--2xl
.vertical--center
1
2
두 줄
3
세
줄
.horizontal--center
추가 타깃 1개 — 플러그인 마크업에도 같은 모양
  • .woosw-btn
가운데 정렬
.width--full
추가 타깃 5개 — 플러그인 마크업에도 같은 모양
  • .single_add_to_cart_button
  • .woosw-btn:not(#_)
  • .amem-form-type-login .amem-submit-button
  • .amem-form-type-registration .amem-submit-button
  • .amem-form-type-account .amem-btn-delete
width: 100%

Card (카드)

목록에서 반복되는 카드의 조각들

.card배경 #F9F8F4 --base-20
.card__image최대 폭 100%아래 여백 16px --space-md
.card__category크기 16px --text-sm굵기 600글자 #334456 --contrast-10배경 #FFF7E0 --sub-30아래 여백 0px모바일(≤767px)크기 14px --text-xs안쪽 4px 10px --space-5xs · --space-2xs
.card__title크기 25px --text-2xl굵기 700행간 1.45 --text-line-height-2xl글자 #334456 --contrast-10아래 여백 0px모바일(≤767px)크기 16px --text-sm행간 1.45 --heading-line-height-2xs아래 안쪽 12px --space-xs
.card__meta-text크기 14px --text-xs굵기 500글자 #334456 --contrast-10아래 여백 0px
.card__text크기 18px --text-md행간 1.7 --text-line-height-md글자 #6F6F6F --contrast-30모바일(≤767px)크기 16px --text-sm행간 1.75 --text-line-height-sm
.card__regular-price
.card__sale-price크기 22px --text-xl굵기 700행간 1.6 --text-line-height-xl글자 #334456 --contrast-10아래 여백 0모바일(≤767px)크기 20px --text-lg카드 배치(layout)는 블록에서 정의 — 여기 배경·여백은 미리 보기용

마케팅

처음 배우는 회계 원리

김서연 · 12강

재무제표를 읽는 법부터 분개·결산까지 회계의 기본 흐름을 잡습니다.

99,000원

79,000원

.card__avatar
.card__social글자 #334456 --contrast-10
.card__tag크기 14px --text-xs굵기 500행간 1.75 --text-line-height-sm글자 #6F6F6F --contrast-30아래 여백 0
.card__product-cat
.card__product-tag크기 14px --text-xs굵기 500행간 1.75 --text-line-height-sm글자 #6F6F6F --contrast-30아래 여백 0
.card__brand크기 14px --text-xs굵기 600행간 1.75 --text-line-height-sm글자 #334456 --contrast-10아래 여백 0
#태그 상품 카테고리 상품 태그 브랜드
.card__status--not-started크기 14px --text-xs굵기 600행간 1.5글자 #4A4A4A --contrast-20배경 #F9F8F4 --base-20안쪽 4px 10px --space-5xs · --space-2xs테두리 1px solid #4A4A4A --contrast-20
추가 타깃 2개 — 플러그인 마크업에도 같은 모양
  • .learndash-wrapper .ld-status.ld-status-waiting:not(#_)
  • .order-status:is(.order-status--pending, .order-status--cancelled, .order-status--refunded, .order-status--failed, .order-status--checkout-draft)

.card__status--in-progress크기 14px --text-xs굵기 600행간 1.5글자 #9A6200 --sub-10배경 #FFF7E0 --sub-30안쪽 4px 10px --space-5xs · --space-2xs테두리 1px solid #FAB437 --sub-20
추가 타깃 2개 — 플러그인 마크업에도 같은 모양
  • .learndash-wrapper .ld-status.ld-status-progress:not(#_)
  • .order-status:is(.order-status--processing, .order-status--on-hold, .order-status--awaiting-vbank, .order-status--refund-request, .order-status--exchange-request, .order-status--cancel-request, .order-status--address-changed)

.card__status--completed크기 14px --text-xs굵기 600행간 1.5글자 #FCFAF0 --base-30배경 #FAB437 --sub-20안쪽 4px 10px --space-5xs · --space-2xs테두리 1px solid #FAB437 --sub-20
추가 타깃 2개 — 플러그인 마크업에도 같은 모양
  • .learndash-wrapper .ld-status.ld-status-complete:not(#_)
  • .order-status.order-status--completed
수강 전 수강 중 완료
.card__title--lg크기 32px --heading-xs굵기 700행간 1.4 --heading-line-height-xs글자 #334456 --contrast-10아래 여백 0모바일(≤767px)크기 25px --text-2xl행간 1.45 --text-line-height-2xl

미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스

Post (포스트)

단일 글 화면

.post__title크기 50px --heading-lg굵기 700행간 1.4 --heading-line-height-lg모바일(≤767px)크기 32px --heading-xs행간 1.4 --heading-line-height-xs

처음 강의를 고를 때 보면 좋은 세 가지

.post__image반경 4px --border-radius-3xs

Button (버튼)

주요 → 보조 → 3차 → 4차 액션 순

.primary-button--sm크기 18px --text-md굵기 500행간 1.5글자 #FCFAF0 --base-30배경 #334456 --accent-20모바일(≤767px)크기 16px --text-sm아래 안쪽 4px --space-5xs
추가 타깃 4개 — 플러그인 마크업에도 같은 모양
  • .learndash-wrapper .ld-content-actions .ld-content-action:last-child > .ld-button:not(.ld-button-transparent):not(#_):not(#_)
  • .woocommerce-orders-table .woocommerce-button.pay:not(#_):not(#_)
  • .woocommerce-table--order-details .woocommerce-button.pay:not(#_):not(#_)
  • nav[class*="gb-query-page-numbers-"] .page-numbers.current:not(#_)
수강 신청하기
.primary-button크기 22px --text-xl굵기 500행간 1.5글자 #FCFAF0 --base-30배경 #334456 --accent-20모바일(≤767px)크기 18px --text-md아래 안쪽 8px --space-3xs
추가 타깃 16개 — 플러그인 마크업에도 같은 모양
  • .single_add_to_cart_button:not(#_)
  • button.acf-btn
  • .ld-button:not(.ld-compact):not(.ld-button-alternate):not(.ld-button-transparent):not(.ld-button-reverse):not(#_)
  • .learndash_mark_complete_button:not(#_)
  • .btn-join:not(#_)
  • #btn-join:not(#_)
  • .wpProQuiz_button:not(#_)
  • .woocommerce .button.alt:not(#_)
  • .ld-dashboard-home-btn:not(#_)
  • .learndash-wrapper input[type="submit"]:not(#_)
  • .woocommerce button[name="save_address"]:not(#_)
  • .woocommerce button[name="save_account_details"]:not(#_)
  • .amem-submit-button:not(#_)
  • .woosw-item--atc .add_to_cart_button:not(#_)
  • .ld-dashboard-add-course:not(#_)
  • .ldd-bulk__btn--primary:not(#_):not(#_)
수강신청
.primary-button--lg크기 25px --text-2xl굵기 600행간 1.5글자 #FCFAF0 --base-30배경 #334456 --accent-20모바일(≤767px)크기 20px --text-lg아래 안쪽 12px --space-xs
추가 타깃 1개 — 플러그인 마크업에도 같은 모양
  • .learndash-wrapper .ld-alert .ld-button:not(#_):not(#_)
수강신청
.secondary-button--sm크기 18px --text-md굵기 500행간 1.5글자 #334456 --contrast-10배경 #F9F8F4 --base-20모바일(≤767px)크기 16px --text-sm아래 안쪽 4px --space-5xs
추가 타깃 5개 — 플러그인 마크업에도 같은 모양
  • .woocommerce table.shop_table .button:not(.alt):not(#_)
  • .woocommerce-Address-title a.edit:not(#_)
  • .learndash-wrapper .ld-content-actions .ld-content-action:first-child > .ld-button:not(.ld-button-transparent):not(#_):not(#_)
  • .ld-dashboard-show-more-button:not(#_)
  • .woosw-btn:not(#_)
나가기
.secondary-button크기 22px --text-xl굵기 500행간 1.5글자 #334456 --contrast-10배경 #F9F8F4 --base-20모바일(≤767px)크기 18px --text-md아래 안쪽 8px --space-3xs
추가 타깃 3개 — 플러그인 마크업에도 같은 모양
  • .ld-button.ld-button-reverse:not(#_)
  • .wpProQuiz_button2:not(#_)
  • .woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button):not([name="save_address"]):not([name="save_account_details"]):not(.account-delete):not(#_)
위시리스트에 담기
.secondary-button--lg크기 25px --text-2xl굵기 600행간 1.5글자 #334456 --contrast-10배경 #F9F8F4 --base-20모바일(≤767px)크기 20px --text-lg아래 안쪽 12px --space-xs
강의 둘러보기
.tertiary-button--sm크기 18px --text-md굵기 500행간 1.5글자 #334456 --contrast-10배경 #F9F8F4 --base-20모바일(≤767px)크기 16px --text-sm아래 안쪽 4px --space-5xs
추가 타깃 1개 — 플러그인 마크업에도 같은 모양
  • .ld-presenter-mode .ld-presenter-mode__button:not(#_)
회원가입
.tertiary-button크기 22px --text-xl굵기 500행간 1.5글자 #334456 --contrast-10배경 #F9F8F4 --base-20모바일(≤767px)크기 18px --text-md아래 안쪽 8px --space-3xs
추가 타깃 3개 — 플러그인 마크업에도 같은 모양
  • .glsr-button:not(#_)
  • .fluent-comments-block .flc_button:not(#_)
  • .wook_discuss_submit:not(#_):not(#_)
리뷰 등록
.tertiary-button--lg크기 25px --text-2xl굵기 600행간 1.5글자 #334456 --contrast-10배경 #F9F8F4 --base-20모바일(≤767px)크기 20px --text-lg아래 안쪽 12px --space-xs
수강 신청하기
.quaternary-button--sm크기 18px --text-md굵기 500행간 1.5글자 #334456 --contrast-10배경 rgba(255, 255, 255, 0) --base-40모바일(≤767px)크기 16px --text-sm아래 안쪽 4px --space-5xs
추가 타깃 7개 — 플러그인 마크업에도 같은 모양
  • .ld-item-list-item .ld-expand-button.ld-compact:not(#_)
  • .ld-expand-button:not(.ld-compact):not(.ld-button-alternate):not(#_)
  • .acf-field-amem-avatar input.amem-avatar-upload[type="file"]::file-selector-button
  • .woocommerce-orders-table .woocommerce-button.view:not(#_):not(#_)
  • .woocommerce-table--order-details .woocommerce-button:is(.view, .order-again):not(#_):not(#_)
  • nav[class*="gb-query-page-numbers-"] a.page-numbers:not(#_)
  • .ld-dashboard-export-btn:not(#_):not(#_)
자세히 보기
.quaternary-button크기 22px --text-xl굵기 500행간 1.5글자 #334456 --contrast-10배경 rgba(255, 255, 255, 0) --base-40모바일(≤767px)크기 18px --text-md아래 안쪽 8px --space-3xs
추가 타깃 3개 — 플러그인 마크업에도 같은 모양
  • .ldd-quick-actions__btn:not(#_)
  • .ldd-bulk__btn--secondary:not(#_):not(#_)
  • .ldd-bulk__btn--outline:not(#_):not(#_)
로그인
.quaternary-button--lg크기 25px --text-2xl굵기 600행간 1.5글자 #334456 --contrast-10배경 rgba(255, 255, 255, 0) --base-40모바일(≤767px)크기 20px --text-lg아래 안쪽 12px --space-xs
뉴스레터 가입
.text-button--sm크기 14px --text-xs굵기 500행간 1.5글자 #334456 --contrast-10배경 transparent안쪽 0테두리 0
추가 타깃 3개 — 플러그인 마크업에도 같은 모양
  • .account-delete a.amem-btn
  • .woocommerce-orders-table .woocommerce-button.cancel:not(#_):not(#_)
  • .woocommerce-table--order-details .woocommerce-button.cancel:not(#_):not(#_)
회원탈퇴
.text-button크기 18px --text-md굵기 600행간 1.5글자 #334456 --contrast-10배경 transparent안쪽 0테두리 0
수강 신청하기
.icon-button행간 0글자 #334456 --contrast-10배경 #F9F8F4 --base-20
추가 타깃 1개 — 플러그인 마크업에도 같은 모양
  • a.generate-back-to-top:not(#_)
글자 없는 원형 아이콘 버튼 — 캐러셀 화살표·위로 가기

Tabs (탭)

상품 상세 탭

.post-tabs배경 #FCFAF0 --base-30가로 간격 8px --space-3xs세로 간격 8px --space-3xs최대 폭 100%
.post-tabs__tab크기 20px --text-lg굵기 500행간 1.75 --text-line-height-sm글자 #334456 --contrast-10안쪽 8px 16px --space-3xs · --space-md모바일(≤767px)크기 16px --text-sm안쪽 8px 10px --space-3xs · --space-2xs
.post-tabs__tab-title아래 여백 0
.post-tabs__tab-count크기 14px --text-xs굵기 600행간 1글자 #334456 --contrast-10배경 #F9F8F4 --base-20안쪽 0 6px --space-4xs반경 9999px --border-radius-pill
추가 타깃 1개 — 플러그인 마크업에도 같은 모양
  • .facetwp-type-radio .facetwp-counter
position: sticky 라 스크롤하면 따라온다
강의 소개 3 커리큘럼 12 수강 후기 8

Navigation (내비게이션)

브레드크럼·드롭다운 메뉴

.breadcrumb크기 16px --text-sm굵기 500행간 1

홈 > 강의 > 현재 페이지

.dropdown-menu배경 #F9F8F4 --base-20안쪽 10px --space-2xs반경 7px --border-radius-2xs
.dropdown-menu__menu-item크기 18px --text-md행간 1.7 --text-line-height-md글자 #334456 --contrast-10안쪽 8px 12px --space-3xs · --space-xs반경 4px --border-radius-3xs
.current-menu-item > .gb-menu-link굵기 600글자 #334456 --contrast-10

미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스

Header (헤더)

서비스 헤더·사이트 헤더

.service-header안쪽 0px 30px 8px 20px --space-xl · --space-3xs · --space-lg
.service-header__inner최대 폭 –gb-container-width --gb-container-width
.service-header__title크기 32px --heading-xs굵기 700행간 1글자 #334456 --contrast-10아래 여백 0px모바일(≤767px)크기 32px --heading-xs
추가 타깃 1개 — 플러그인 마크업에도 같은 모양
  • .flex-row .service-header__title

.service-header__navi크기 36px --heading-sm
.service-header__navigation가로 간격 30px --space-xl
.service-header__navi-menu-container
.service-header__navi-menu안쪽 0가로 간격 30px --space-xl
.service-header__navi-menu-item

블로그

.service-header__navi-menu-toggle글자 #334456 --contrast-10배경 transparent
.service-header__navi-sub-menu배경 #FCFAF0 --base-30안쪽 10px --space-2xs테두리 1px solid #DEDFD9 --contrast-50반경 7px --border-radius-2xs세로 간격 6px --space-4xs
  • 하위 메뉴 1
  • 하위 메뉴 2
.service-header__logo글자 #334456 --contrast-10
.site-header__social글자 #334456 --contrast-10
.site-header__account-menu-item크기 1rem행간 1가로 간격 8px --space-3xs아이콘 옆 글자는 .gb-text{position:relative;top:0.12em} 로 내려 맞춘다 — Pretendard 한글은 줄 상자 안에서 위로 붙어 아이콘보다 약 2px 높게 보인다(2026-10-08)

Overlay Panel (오버레이 패널)

GB 오버레이 패널의 판과 닫기 버튼

.modal글자 #334456 --contrast-10배경 #F9F8F4 --base-20안쪽 40px --space-2xl반경 7px --border-radius-2xs
.modal__close글자 #6F6F6F --contrast-30배경 transparent안쪽 0테두리 0반경 50% --border-radius-circle
추가 타깃 1개 — 플러그인 마크업에도 같은 모양
  • .woosw-item--remove span:not(#_)
실제 패널은 GB 오버레이로 뜬다 — 여기선 판만

모달 제목

오버레이 패널 안의 내용입니다.