글자와 어두운 면

배경과 밝은 면

브랜드 강조색

보조 강조색(주황)

제목

본문

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

input추가 타깃: input:is([type="text"],[type="email"],[typ…블록 기본 클래스
.wp-block-search__input 코어 검색
.gb-form-field-control GB 폼

h1
h2
h3
h4
h5
h6글 본문·플러그인이 찍는 맨 제목의 기본값 — GP 기본(h2 35px/400)을 토큰 스케일로 대체. 클래스가 붙은 제목은 그 클래스가 우선

button블록 기본 클래스
.wp-element-button 코어 버튼 공통
.wp-block-button__link 코어 버튼
.wp-block-search__button 코어 검색

img블록 기본 클래스
.wp-image-{ID} 코어 이미지
.gb-media-{uid} GB 미디어 (블록마다 고유)

figure블록 기본 클래스
.wp-block-image 코어 이미지

pre블록 기본 클래스
.wp-block-code 코어 코드
.wp-block-preformatted 코어 서식 있는 텍스트

pre — 코드 블록

.section

.inner-section
.inner-section--sm
.inner-section--xs

.section__title
.section__tagline
.section__text

.section__message
.section__message-description404 · 검색 결과 없음 같은 안내 화면

.sub-section
.sub-section__header
.sub-section__title
.sub-section__title-count
.sub-section__text

.page-header__title

.page-header__tagline

.archive__title

.grid--1

.grid--1-1

.grid--1-1-1

.grid--1-1-1-1

.grid--1-3

.grid--3-1

.grid--1-1-2

.grid--1-3-1

.grid--1-2-1

.grid--2-1-1

.grid--2-1

.grid--1-1-1-1-1

.grid--1-4

.grid--1-5

.flex-row

.flex-column

.padding--md
.padding--2xl

.vertical--center

.horizontal--center추가 타깃: .woosw-btn

.width--full추가 타깃: .single_add_to_cart_button, .woosw-btn:not(#_)

.bordered

.card
.card__image
.card__category
.card__title
.card__meta-text
.card__text
.card__regular-price
.card__sale-price카드 배치(layout)는 블록에서 정의 — 여기 배경·여백은 미리 보기용

프로그래밍

ChatGPT로 배우는 자바스크립트 기초

김서연 · 12강

강의 소개 문구가 들어가는 자리입니다.

₩99,000

₩79,000

.card__avatar
.card__social

.card__tag
.card__product-cat
.card__product-tag
.card__brand

.card__status--not-started추가 타깃: .learndash-wrapper .ld-status.ld-status-wa…
.card__status--in-progress추가 타깃: .learndash-wrapper .ld-status.ld-status-pr…
.card__status--completed추가 타깃: .learndash-wrapper .ld-status.ld-status-co…

.post__title

.post__image

.primary-button--sm추가 타깃: .learndash-wrapper .ld-content-actions .ld…

.primary-button추가 타깃: .single_add_to_cart_button:not(#_), button.acf-btn, .ld-button:not(.ld-compact):not(.ld-button… 등

.primary-button--lg추가 타깃: .learndash-wrapper .ld-alert .ld-button:no…

.secondary-button--sm추가 타깃: .woocommerce table.shop_table .button:not(…, .woocommerce-Address-title a.edit:not(#_), .learndash-wrapper .ld-content-actions .ld…

.secondary-button추가 타깃: .ld-button.ld-button-reverse:not(#_), .wpProQuiz_button2:not(#_), .woocommerce .button:not(.alt):not(.single… 등

.secondary-button--lg

.tertiary-button--sm추가 타깃: .ld-presenter-mode .ld-presenter-mode__but…

.tertiary-button추가 타깃: .glsr-button:not(#_), .fluent-comments-block .flc_button:not(#_), .wook_discuss_submit:not(#_):not(#_)

.tertiary-button--lg

.quaternary-button--sm추가 타깃: .ld-item-list-item .ld-expand-button.ld-co…, .ld-expand-button:not(.ld-compact):not(.ld…

.quaternary-button

.quaternary-button--lg

.text-button

.post-tabs
.post-tabs__tab
.post-tabs__tab-title
.post-tabs__tab-countposition: sticky 라 스크롤하면 따라온다

.search__inside-wrapper추가 타깃: .wp-block-search__inside-wrapper
.search__input추가 타깃: .wp-block-search .wp-block-search__input
.search__button추가 타깃: .wp-block-search__button

.breadcrumb

.dropdown-menu
.dropdown-menu__menu-item

.service-header
.service-header__inner
.service-header__title추가 타깃: .service-header .flex-row .service-header_…
.service-header__navi
.service-header__navigation
.service-header__navi-menu-container
.service-header__navi-menu
.service-header__navi-menu-item

.service-header__navi-menu-toggle

.service-header__navi-sub-menu

.service-header__logo

.site-header__social

.site-header__account-menu-item

.footer-navi
.footer-navi__title
.footer__link

.site-footer__social

.modal
.modal__close추가 타깃: .woosw-item–remove span:not(#_)실제 패널은 GB 오버레이로 뜬다 — 여기선 판만