HTML/CSS Foundation Quest

Tracks

1. 01🏗️HTML 기본기

   0/5 lessons

   Semantic markup, document 구조, 그리고 첫 반사 자리에서 <div> 를 은퇴시키자는 주장

   어떤 framework 도 HTML 을 숨겨주기 전에, HTML 이 *무엇을 위해* 있는지부터 알아야 해. 이 트랙은 mental model 을 다시 세워 — HTML element 는 의미를 가진 명사야, 스타일 입힌 사각형이 아니라. Semantic markup 이 있어야 접근성이 굴러가고, screen reader 가 읽을 게 생기고, 검색 엔진이 구조를 잡고, 점점 더 — React component 가 자연스러운 모양을 가져. 레슨 5 개. 끝나면 <div> 는 가장 마지막에 꺼내는 도구지 첫 도구가 아니야.

   Lesson list (5)

   • 01
     'Semantic HTML' 이 진짜로 뜻하는 것~12 min · semantic-html, accessibility, mental-model
   • 02
     Document: 페이지의 척추~12 min · document-structure, doctype, head, viewport
   • 03
     텍스트 element: 헤딩, 단락, 리스트, 인용~12 min · text, headings, lists, blockquote, inline-semantics
   • 04
     앵커와 이미지: 웹의 결합 조직~12 min · anchors, links, images, alt-text, responsive-images, picture
   • 05
     <div> 는 첫 도구가 아니라 마지막 도구야~12 min · div, span, aria, custom-elements, mental-model

   ✓퀴즈 · 4 문제→

2. 02♿폼과 접근성

   0/4 lessons

   폼은 접근성이 살거나 죽는 자리야. 폼을 맞게 하면 나머지가 따라와.

   웹은 공공재지 그래픽 포트폴리오가 아니야. 이 트랙은 접근성을 baseline 으로 다뤄 — 도덕적·법적 바닥, 마지막에 뿌리는 업그레이드가 아니라. 폼을 제대로 지어: label, fieldset, 맞는 input type, native 어휘가 동날 때만 ARIA, 그리고 진짜로 굴러가는 키보드 네비. 레슨 4 개. 끝나면 retrofit 없이 WCAG 를 통과하는 폼을 바로 만들 수 있어.

   Lesson list (4)

   • 01
     폼 해부학: <form>, <fieldset>, <label>, <input>, <button>~12 min · forms, label, fieldset, anatomy
   • 02
     Input type: 질문마다 맞는 도구~11 min · input-types, mobile-keyboards, validation
   • 03
     ARIA Baseline: 실제로 쓸 작은 실용 subset~12 min · aria, screen-reader, labels, live-regions
   • 04
     키보드와 focus: 한 손으로 웹 전체~12 min · keyboard, focus, tabindex, focus-visible, skip-link

   ✓퀴즈 · 4 문제→

3. 03🎯Selector 와 Cascade

   0/5 lessons

   CSS 가 어느 규칙이 이길지 어떻게 고르고, 너의 !important 가 왜 일어났는지

   CSS 는 알고리즘을 이해할 때까지 신비로워. 다섯 입력이 어느 규칙이 어느 element 에 적용될지 결정해: 어느 selector 가 매치하는지, 각자 얼마나 specific 한지, 어디서 왔는지, 뭐가 상속되는지, 그리고 :is(), :where(), :has(), cascade layer 같은 모던 override. 이 트랙이 알고리즘을 보이게 해. 끝나면 DevTools 안 열고도 남이 쓴 스타일시트 읽고 승자를 예측할 수 있어.

   Lesson list (5)

   • 01
     Selector 동물원: 필요한 모든 패턴~13 min · selectors, pseudo-classes, combinators, attribute-selectors
   • 02
     Specificity: 동점을 결정하는 숫자 점수~12 min · specificity, cascade, important
   • 03
     Cascade 전체: Origin, Layer, Specificity, Source 순서~12 min · cascade, origin, user-stylesheet, ua-default
   • 04
     상속: 뭐가 흘러내리고 뭐가 안 흐르고 어떻게 조향할지~11 min · inheritance, css-properties, inherit, unset, revert
   • 05
     :is(), :where(), :has() — 규칙을 다시 쓴 selector 들~12 min · is, where, has, modern-css, logical-selectors

   ✓퀴즈 · 4 문제→

4. 04📐Box Model 과 layout 기본

   0/4 lessons

   보이지 않는 박스, 벗어날 수 없는 흐름, 그리고 Flexbox 가 마침내 은퇴시킨 옛 패턴

   페이지의 모든 element 가 박스야. 박스는 content, padding, border, margin 을 가지고 — 그 넷이 어떻게 상호작용하는지가 layout 이 맞을지 결정해. Flexbox 나 Grid 잡기 전에 밑단 알아야 해: box-sizing, display 모드, normal flow, positioning, stacking context, 그리고 은퇴시키려고 이름만 부르는 옛 어휘 (float, clear, table-display). 레슨 4 개. 끝나면 어떤 layout 이든 마법 안 불러내고 원시 용어로 묘사할 수 있어.

   Lesson list (4)

   • 01
     Box Model: Content, Padding, Border, Margin~11 min · box-model, box-sizing, margin-collapse, width
   • 02
     display 와 normal flow: element 가 스스로 배치되는 방법~11 min · display, block, inline, flow, formatting-context
   • 03
     position, z-index, 그리고 stacking context~12 min · position, absolute, fixed, sticky, z-index, stacking-context
   • 04
     옛 어휘: float, clear, table-display, 그리고 이게 은퇴된 이유~11 min · float, clear, table-display, legacy

   ✓퀴즈 · 4 문제→

5. 05🪄Flexbox

   0/4 lessons

   1 차원 layout. 일급 연산으로서의 정렬. 80% 의 경우 잡게 되는 도구.

   Flexbox 는 CSS hack 세 시대를 은퇴시킨 layout primitive. 자식을 단일 축 (row 또는 column) 따라 배치하고, 양 방향에 진짜 정렬 주고, 동등 크기, gap spacing, 모바일에서 재정렬을 쉽게 만들어. 레슨 4 개. 끝나면 navbar, modal, sticky footer, 동등 너비 버튼 행, 그리고 "이거 수직 가운데 정렬" 질문 전체가 잘 이름 지어진 property 몇 개로 줄어들어.

   Lesson list (4)

   • 01
     Flexbox mental model: 한 번에 한 축~12 min · flexbox, main-axis, cross-axis, flex-direction, flex-wrap
   • 02
     정렬과 justification: justify-content, align-items, align-self~11 min · justify-content, align-items, align-self, alignment
   • 03
     flex-grow, flex-shrink, flex-basis: sizing 세쌍둥이~11 min · flex-grow, flex-shrink, flex-basis, flex-shorthand
   • 04
     Production 의 Flexbox: 매일 쓸 패턴~11 min · patterns, navbar, modal, sticky-footer, truncation

   ✓퀴즈 · 4 문제→

6. 06🧱CSS Grid

   0/4 lessons

   2 차원 layout, 명명된 영역, 그리고 Flexbox 가 닿지 못하는 패턴

   Grid 는 row 와 column 을 동시에 생각하는 layout primitive. 페이지 레벨 layout, 사진 grid, 대시보드 타일, 셀 정밀도 위치 필요한 어디든 써. 레슨 4 개. 끝나면 매거진 스타일 layout, 반응형 이미지 갤러리, 대시보드 grid, overlap 패턴이 모두 선언 몇 개로 줄어들어.

   Lesson list (4)

   • 01
     Grid 의 mental model: row 와 column~12 min · grid, tracks, lines, fr, repeat, minmax
   • 02
     grid-template-areas: ASCII 아트로서의 layout~11 min · grid-template-areas, named-areas, grid-area
   • 03
     암묵적 vs 명시적 Grid: 트랙이 자동으로 나타날 때~11 min · implicit-grid, grid-auto-rows, grid-auto-flow, dense
   • 04
     Flexbox 가 (깨끗하게) 못 하는 layout: Grid 가 제 값 하는 자리~12 min · grid, overlap, full-bleed, subgrid, patterns

   ✓퀴즈 · 4 문제→

7. 07⚡Responsive 와 모던 CSS

   0/5 lessons

   Media query, container query, custom property, cascade layer, native nesting, :has() — 2026 툴박스

   이게 2026 CSS 가 2018 CSS 와 다르게 느껴지는 트랙. Container query 가 component 를 viewport 가 아니라 컨테이너에 적응. Cascade layer 가 override 를 의도적으로 순서. Native nesting 이 많은 사용 사례에서 Sass 제거. Custom property 가 풀 디자인 시스템 도구. :has() 가 또 한 레이어의 JavaScript 제거. 레슨 5 개. 끝나면 '이거에 framework 필요' 본능 전체를 obsolete 시킨 feature 들을 내면화했어.

   Lesson list (5)

   • 01
     Media Query: viewport, 디바이스, 사용자 선호에 적응~12 min · media-queries, responsive, mobile-first, prefers-color-scheme
   • 02
     Container Query: 컨테이너에 적응하는 component~12 min · container-queries, responsive, component-driven
   • 03
     Custom Property: live, scoped, 상속 가능한 디자인 토큰~12 min · custom-properties, variables, design-tokens, property
   • 04
     Cascade Layer 와 Native Nesting: 내장된 순서와 locality~12 min · cascade-layers, layer, native-nesting, modern-css
   • 05
     실전 :has(): JavaScript 없는 부모-상태 스타일링~12 min · has, parent-selector, modern-css, less-js

   ✓퀴즈 · 4 문제→

8. 08🎓에필로그: foundation 이 향하는 곳

   0/3 lessons

   Tailwind, JavaScript, framework — 이 foundation 이 그 다음 모든 걸 어떻게 지원하는지

   Foundation 이 목적지가 아냐. HTML 과 CSS 가 웹 스택의 나머지로 어떻게 feed 되는지 framing 하는 짧은 레슨 셋: utility composition 으로서의 Tailwind, CSS 가 못 닿는 동적 layer 로서의 JavaScript, React/Next.js/build 도구 너머로 가는 quest 모양 길. 레슨 셋. 끝나면 너가 어디 있는지뿐만 아니라 어디로 걸어갈지도 알아.

   Lesson list (3)

   • 01
     Tailwind: 같은 primitive 위에 지어진 utility-first CSS~10 min · tailwind, utility-first, framework
   • 02
     JavaScript Bridge: 행동이 시작되는 자리~10 min · javascript, behavior, progressive-enhancement
   • 03
     다음은 어디로: foundation 이 지어졌어, 이제 그 위에 지어~10 min · next-steps, quest-path, shipping

   ✓퀴즈 · 3 문제→