이 학습 사이트의 모든 페이지가 공유하는 common.css의 색상 변수·폰트·클래스를 한눈에 정리했습니다. 아래 미리보기는 실제 공용 CSS로 렌더된 것이라, 보이는 그대로 챕터에서 쓰면 됩니다.
이 시스템은 색을 직접 쓰지 않고 변수로 씁니다. 예를 들어 글자색은 #e6edf3이 아니라 var(--text)라고 써요.
그래서 라이트/다크 모드나 테마를 바꾸면 색이 자동으로 따라 바뀝니다. 여러분이 챕터를 만들 때는 아래 클래스 이름만 골라 쓰면, 색·간격·폰트가 알아서 통일돼요.
:root의 변수로 정의 → ②클래스(.compare-box 등)가 그 변수를 참조 → ③여러분은 클래스만 붙임. 색을 바꾸고 싶으면 변수 하나만 고치면 전 페이지에 반영돼요.글자에 쓰는 3단계 밝기. 중요할수록 밝게, 부가 설명일수록 흐리게.
페이지 → 패널 → 카드 → 코드창 순으로 층을 나눕니다.
각 색이 "뜻"을 가집니다. 파랑=강조/링크, 초록=성공/정답, 노랑=주의, 빨강=에러.
--day는 과목/챕터의 대표색입니다. 뱃지·섹션 아이콘·스텝 활성·번외편 등이 이 색을 따라가요. 과목마다 아래 팔레트 중 하나를 --day로 지정합니다. (이 페이지는 --teal로 설정돼 있어요.)
--day-bg), 테두리(--day-bd), 아주 옅은 배경(--day-bg-soft)이 세트로 있어요. 뱃지·박스 배경에 이 옅은 버전을 씁니다. (예: 초록 계열은 --success-bg, --success-bd)| 변수 | 용도 | 기본값 |
|---|---|---|
--font-sans | 본문 한글 (기본 글꼴) | Apple SD Gothic Neo 계열 |
--font-mono | 코드·소스 (고정폭) | JetBrains Mono 계열 |
--font-title | 제목 | 한글 본문과 동일 |
--font-inline-code | 문장 속 인라인 코드 | 고정폭 |
--fs-body | 본문 글자 크기 | 13.5px |
--fs-title | 섹션 제목 | 17px |
--fs-subhead | 소제목·형광펜 초록제목 | 14px |
--fs-code | 코드창 소스 | 12.5px |
--fs-inline | 인라인 코드 | 12px |
--fs-badge | 뱃지 안 코드 | 11.5px |
--lh-body | 본문 행간 | 1.9 |
--lh-code | 코드 행간 | 1.7 |
.hljs-*(highlight.js)와 .token.*(Prism) 클래스가 위 변수를 참조해서 적용합니다. 라이트/테마 전환 시 값이 자동으로 바뀝니다.어디에: 모든 페이지 맨 위. 브랜드명(.nav-brand), 뱃지(.nav-badge), 오른쪽 버튼(.nav-actions·.tag-btn)을 담습니다. 이 페이지 맨 위 "🎨 공통 스타일…" 바가 실제 예시.
어디에: 모든 콘텐츠를 감싸는 폭 880px 중앙 컨테이너. 지금 이 카드들도 전부 .wrap 안에 있어요. 표·박스가 .wrap 안에 있어야 기본 표 스타일이 먹습니다.
어디에: 각 챕터 맨 위 인사말 영역. 큰 아이콘(.hero-icon) + 제목(h1) + 설명(p) + 칩(.day-chip). 이 페이지 상단 "🎨 공통 스타일 시스템 설명서"가 그 예시.
어디에: 챕터 본문의 각 STEP/주제 하나. 머리(.section-head)에 아이콘(.section-icon + 색: .blue/.green/.purple/.pink/.teal), 라벨(.section-num), 제목(.section-title), 부제(.section-sub)가 들어갑니다.
어디에: 설명 문단마다. .p strong은 밝은 강조로 자동 처리돼요.
이건 .p 단락이에요. 안에서 strong은 밝게 강조되고, .p code는 인라인 코드로 보입니다.
어디에: 문장 중간에 코드 조각을 넣을 때. <code class="ic">className</code> 형태.
class 대신 className을 씁니다.어디에: 섹션 위에 "이번에 배울 것" 같은 알약 라벨.
어디에: 핵심 개념 설명, A vs B 비교. 초록 제목(.cmp-h), 하단 비유줄(.bi), 소제목(.sub)을 함께 씁니다.
코드도 넣을 수 있어요.
🍽️ .bi 는 하단에 점선으로 구분된 비유/한줄정리 자리예요.
어디에: 짧은 팁·주의·참고. 종류에 따라 .tip(초록)·.warn(노랑)·.info(파랑)·.new(--day색)를 붙이고 .note-icon 이모지를 앞에 둡니다.
어디에: 본문 흐름을 안 끊는 심화·곁가지 내용. <details>로 접었다 펴며, 안의 소제목(.subhead)·용어제목(.term-h)은 보라 알약으로 나옵니다.
어디에: 여러 용어를 한 번에 펼쳐 보는 노란 접이식 박스. 각 용어는 .term-item으로 나누고 제목은 .term-h(주황 알약).
어디에: 본문 흐름을 안 끊고 "더 자세한 설명"을 접어뒀다 펼칠 때. 제목(<summary>)을 누르면 펼쳐지고, 내용이 길면 우측 아래 ▲ 접기로 바로 닫아요(닫히면서 제목 위치로 살짝 스크롤). 페이지 대표색(--day)의 점선 박스이고, .bonus·.terms와 달리 인라인 스타일이라 클래스 없이 어디서든 붙여 쓸 수 있어요.
<details style="…--day-bd 점선…"><summary>제목</summary><div>내용 + ▲접기</div></details>어디에: 예제 코드. <pre class="language-jsx"><code class="language-jsx">…</code></pre>. 안의 <·>·{는 <·>·{로 이스케이프해야 합니다.
const name = "지훈";
const el = <h1>안녕, {name}!</h1>;어디에: 여러 파일을 탭으로 전환해 보여주는 코드 패널. .src-tabs > .src-tab(.active) + .src-pane(.active) 구조. 파일 여러 개를 한 위젯에 담을 때.
어디에: 폴더/파일 트리를 <pre>로 그릴 때. 강조는 .hot(--day색)·.star(파랑)·.dim(흐림). .ft-legend는 트리 아래 범례.
src/ ├─ App.jsx ├─ components/ │ └─ Button.jsx └─ index.css
어디에: 코드블록 위 작은 파일명/라벨.
어디에: 비교·정리 표. <div class="tbl-wrap"><table>…. 첫 열은 자동으로 줄바꿈 안 함. (.wrap 안이면 table만 써도 같은 스타일.)
| HTML | JSX |
|---|---|
| class | className |
| for | htmlFor |
어디에: 실행 흐름을 위→아래 단계로. .flow-step(핵심 단계는 .key=초록) 사이에 .flow-arrow.
어디에: 코드 한 줄씩 뜯어 설명할 때. 왼쪽 뱃지(.k) + 설명(.d).
어디에: 박스 안 아스키/고정폭 도식(.compare-box .dia 또는 .bonus .dia). 토큰 색은 .dia-kw·.dia-id·.dia-num·.dia-op, 인덱스 강조는 .idx(빨강).
| 접두사 | 무엇 |
|---|---|
.tp-* | 우측 테마 편집 패널 (폰트·크기·색·테마 조절). 우상단 버튼으로 열림. |
.cp-* | 패널 안 컬러피커 (팔레트·슬라이더·입력). |
.cs-* | 왼쪽 코드 미러 패널 (본문 코드창을 복제해 옆에 띄움). |
.pop-trigger·.term-pop | 용어 뱃지 클릭 팝오버. 뱃지(.k.pop-trigger)를 누르면 설명 카드가 뜸. |
.vref-* | 변수 추적용 강조(개발 참고용). |