HTML/CSS 시리즈 전체 목차 | 웹 프론트엔드 기초부터 실전까지

2026년 4월 21일 · 4분 읽기 · 수정 2026년 4월 21일 초급 가이드

이 글의 핵심

HTML/CSS 시리즈 전체 목차: 웹 개발 기초부터 실전까지 8개 주제로 프론트엔드 완전 정복.

시리즈 소개: HTML/CSS 학습 완전 로드맵

HTML은 문서의 구조와 의미를, CSS는 시각적 표현과 배치를 담당합니다. 두 기술은 모든 프론트엔드 스택의 뿌리이며, JavaScript, React, Vue 등을 배우기 전에 반드시 익혀야 하는 기반입니다. 이 시리즈는 “태그를 외우는 수준”이 아니라, 렌더링 파이프라인, 레이아웃 설계 사고, 접근성·반응형까지 실무에서 통하는 흐름으로 정리했습니다.

이 로드맵에서 다루는 범위

입문에서는 도구·문법·HTML과 CSS의 역할을 익혀 혼자서도 정적 페이지를 쓸 수 있게 합니다. 구조 단계는 시맨틱, DOM, 스타일 규칙을 묶어 유지보수에 견디는 마크업·스타일로 나아갑니다. 레이아웃은 박스, Position, Flex, Grid로 복잡한 UI 뼈대를 잡고, 응용은 반응형·애니메이션·품질까지 더해 제품 수준의 화면 감각을 담습니다.

처음 웹사이트 만들었을 때, IE6…

학원·동아리에서 처음 index.html을 열었을 때, 집 PC의 Internet Explorer 6과의 사이는 좋지 않았다. 크롬(또는 옛말의 파이어폭스)에선 괜찮아 보이던 건데, IE6에선 float이 한 줄씩 밀리고, 투명 PNG는 테두리가 회색으로 먹고, 해킹(clearfix, *zoom:1 같은 것)을 붙이지 않으면 끝이 없었다. 그 시절 전체 레이아웃을 float로 뜯어고치던 방식은, 지금 Flex/Grid가 자리를 잡은 이상 역사 속으로 넘기는 편이 맞다고 본다. (레거시 유지보수가 아니라면, 새 프로젝트에서 float만으로 2·3칼을 짜는 건 비추다. 정렬·흐름은 Flex, 격자는 Grid 쪽이 정신 건강에 이롭다.)

왜 HTML/CSS를 먼저 배워야 하는가

접근성(A11y), 검색 엔진(SEO), 성능(렌더링·리페인트)은 모두 마크업과 스타일 설계에 달려 있습니다.
JavaScript는 DOM을 “조작”하지만, DOM이 건강하지 않으면 유지보수와 접근성 비용이 기하급수로 늘어납니다.
Tailwind, Bootstrap 등은 결국 CSS의 단축 키에 가깝습니다. 기초가 있으면 프레임워크 문서를 “번역”하지 않고 의도를 읽을 수 있습니다.

이 시리즈로 잡는 사고 모델(학습 전체를 관통)

웹 UI는 “태그를 나열”하는 작업이 아니라, 의미 → 구조(DOM) → 박스(레이아웃) → 뷰포트(반응형) → 체감(애니메이션) 순으로 층을 쌓는 과정에 가깝습니다. HTML은 읽힐 문서이자 스크린리더·크롤러가 이해하는 트리의 기반이고, CSS는 그 트리를 가시성·배치·상태(:hover, @media)로 해석한 결과입니다. 같은 div라도 “역할”을 주는지(<button>), 의미를 드러내는지(<nav>)에 따라 접근성 경로가 달라집니다.

초심자에게 가장 흔한 막힘은 “속성은 안다. 그런데 왜 이렇게 그려질까?”입니다. 이 시리즈는 각 편마다 브라우저가 무엇을 먼저 결정하는지를 염두에 두고 설명합니다. 예를 들어 박스의 너비는 box-sizing과 부모·플로트·플렉스·그리드 맥락에 같이 엮이고, position: absolute는 “화면”이 아니라 containing block이 기준이라는 점이 있습니다. 이 개념은 이후 #05~#08에서 겹침, 정렬, 반응형, GPU 합성으로 이어질 때 반복해 닿습니다.

학습 루프 권장: 글 1편 → 바로 30~60분 미니 구현 → DevTools로 Computed와 Flex/Grid 오버레이로 검증. 읽기만 하면 “알듯”하고, 손에 안 남을 수 있으니 작은 HTML 파일 하나를 고정해 두고 거기에만 실험하세요.

📚 시리즈 글 상세: 각 편이 다루는 핵심

아래는 시리즈에 포함된 개별 포스트와, 각 편에서 다루는 주제·실습 초점입니다. 링크는 /blog/… 기준으로 연결됩니다.

#01 HTML/CSS 시작하기 — 14분 · 초급

역할: 웹이 요청-응답으로 HTML을 전달하고, CSS가 별도(또는 인라인)로 적용되는 흐름을 이해합니다.
환경: VS Code(또는 선호 에디터), 로컬 파일 또는 간단한 정적 서빙, 크롬 개발자 도구의 Elements·Styles 탭 둘러보기.
첫 문서: <!DOCTYPE html>, <html lang="…">, <head>, <body>, <title>, 외부 CSS 연결(<link rel="stylesheet">).
기대: “왜 HTML과 CSS를 분리하는가”, “캐시와 유지보수”에 대한 1차 직관.

#02 HTML 기본 태그 — 22분

텍스트·인라인: 강조(<strong>, <em>), 줄바꿈·문단, 링크(<a href>), 이미지(<img alt>), 리스트(ul/ol/li).
시맨틱 뼈대: header, nav, main, article, section, footer 등 의미 기반 구조. div 남용과의 대비.
DOM·파싱: 태그가 트리로 해석되고, 접근성 트리·스타일 계산에 어떻게 쓰이는지 개괄.
핵심 키워드: 시맨틱 HTML, DOM, alt 텍스트, 문서 개요(heading hierarchy).

#03 CSS 기초 — 24분

선택자: 유형, 클래스(.), ID(#), 결합(자손, 자식, 형제), 가상 클래스(:hover, :focus, :nth-child 등) 개요.
텍스트·색: color, font-family, font-size, line-height, text-align 등; em/rem과 루트 기준.
캐스케이드·특이도·상속: 규칙이 충돌할 때 어떤 스타일이 이기는지, !important는 최후의 수단인 이유.
CSS 변수(--token): 테마, 간격, 색 팔레트를 토큰으로 관리하는 기초.
핵심 키워드: 특이도, 캐스케이드, 상속, 디자인 토큰(변수).

#04 박스 모델 — 중급

박스 4절기: content → padding → border → margin의 측정 기준, box-sizing: border-box를 기본으로 두는 이유.
디스플레이 타입: block / inline / inline-block의 흐름, 줄바꿈·width 적용 범위.
margin collapse: 인접 마진이 겹칠 때의 기본 동작과 설계 시 유의점.
핵심 키워드: Box Model, box-sizing, block vs inline.

#04 Position — 중급 (편집·번호: 박스 모델과 별도 URL)

static / relative / absolute / fixed / sticky: 기준(containing block)이 무엇인지, 스크롤·뷰포트와의 관계.
z-index와 stacking context: “왜 z-index를 올렸는데도 안 맨 위인가”의 전형적 원인.
겹침·오버레이: 모달, 툴팁, Sticky 헤더 등에서 position의 쓰임.
핵심 키워드: containing block, stacking context, sticky 한계(부모 overflow 등).

#05 Flexbox

1차원 레이아웃: 주 축(main axis)과 교차 축(cross axis), flex-direction, flex-wrap.
정렬: justify-content, align-items, align-content, gap.
아이템: flex-grow / shrink / basis, align-self, order(접근성과 함께 고려).
핵심 키워드: 1차원, gap, flex-basis vs width.

#06 Grid

2차원 레이아웃: grid-template-columns / rows, fr 단위, minmax, auto-fit/auto-fill 패턴.
배치: grid-column / grid-row, grid-area, subgrid(지원·용도).
Flex vs Grid: “행/열만 정렬” vs “표 같은 2D 구조”의 선택 기준.
핵심 키워드: 2차원, fr, minmax, template areas.

#07 반응형 디자인 — 중급~고급

미디어 쿼리: @media로 뷰포트·prefers-color-scheme 등 환경에 맞는 스타일.
모바일 퍼스트: 작은 화면 기준 → min-width로 확장(일반적 접근). 데스크퍼스트와의 트레이드오프.
뷰포트 메타·유연한 미디어: img의 srcset/sizes, picture, max-width: 100% 패턴.
핵심 키워드: 미디어 쿼리, 모바일 퍼스트, 유연한 이미지.

#08 애니메이션 — 중급~고급

transition vs animation: 사용자 상호작용에 맞는 가벼운 전환 vs 키프레임 기반 복잡한 동작.
@keyframes, transform(translate, rotate, scale), 합성(compositing) 관점.
성능: will-change 남용 금지, 레이어·GPU와 리플로우/리페인트·합성의 구분(개괄).
핵심 키워드: transform 애니메이션, @keyframes, perceived performance.

🧭 학습 순서 가이드: 초급 / 중급 / 고급

초급 경로: “쓰고, 보고, 고칠 수 있다”

#01 도구·첫 문서·CSS 연결
#02 HTML 태그 + 시맨틱 + DOM 개념
#03 선택자, 색/타이포, 캐스케이드·특이도, 변수

끊기는 지점: 특이도 전쟁, 클래스 네이밍. → 해결: 선택자를 단순화하고, 레이어(CSS 파일 분리·BEM·유틸 등 팀 컨벤션)로 나누기.

중급 경로: “원하는 곳에 박스를 둔다”

#04 박스 모델 → #04 Position (순서는 바꿔도 됨, 둘 다 필수)
#05 Flexbox (내비게이션, 툴바, 카드 가로 정렬)
#06 Grid (대시보드, 갤러리, 복잡한 그리드)

끊기는 지점: absolute 누락, flex: 1이 안 먹는 경우. → DevTools에서 computed styles·flex/grid 오버레이로 확인.

고급 경로: “화면이 살아 있고, 어디서든 읽힌다”

#07 반응형: 터치 타깃, 줄바꿈, 타이포 스케일, 브레이크포인트 전략
#08 애니메이션: 과한 모션·접근성(prefers-reduced-motion) 고려

끊기는 지점: 기기마다 다르게 보임. → CSS 변수 + 미디어 쿼리로 토큰을 한곳에서 조정.

주제별 분류: 이 시리즈를 지도로 쓰기

시리즈 8개 편을 주제 맵으로 나누면 다음과 같습니다. (일부는 여러 편에 걸쳐 등장합니다.)

1. HTML 기초 (태그, 구조)

#01~#02: 문서 뼈대, 텍스트·리스트·링크·이미지, 시맨틱 구조, heading 계층.
심화 연결: lang 속성, meta viewport, figure/figcaption, table의 접근성(이 시리즈 후속·보충).

2. CSS 기초 (선택자, 박스 모델)

#03: 선택자, 색/폰트, 캐스케이드·특이도, 변수.
#04 박스 모델: box-sizing, margin·padding, block/inline.

3. 레이아웃 (Flexbox, Grid, Position)

#04 Position: 층·겹침·sticky, z-index, 기준 박스.
#05 Flexbox: 1차원, gap, flex 아이템 제어.
#06 Grid: 2차원, fr, minmax, area.

실무 팁: 대부분 Flex + Grid로 끝나고, absolute는 “문서 흐름 밖” 오버레이·배지에 씁니다.

4. 스타일링 (Typography, Color)

#03 중심: font 스택, line-height, 색(HEX, rgb/hsl + CSS 변수로 팔레트).
접점: clamp()로 반응형 타이포(#07과 연계).

5. 애니메이션

#08: transition, @keyframes, transform, 성능·모션 감소 설정.

6. 반응형 웹

#07: 뷰포트, @media, 이미지·레이아웃의 단계적 변화, 모바일 퍼스트.

7. 접근성

#02~#03: 시맨틱, 키보드(:focus), 대비(색·폰트).
#07~#08: prefers-reduced-motion, 터치 영역, 애니메이션·모션 민감 사용자.

8. 품질·검증(크로스 주제)

#02~#03: lang, 제목(heading) 계층, 대비(색·크기)로 1차 품질을 잡습니다.
#04~#06: “보이는 위치”와 “DOM 순서”가 달라지는 패턴(오버레이, order 남용)을 피해 논리적 포커스 순서를 지킵니다.
#07~#08: prefers-reduced-motion·prefers-contrast(지원 브라우저)로 사용자 설정을 존중합니다.

실서비스에 가까운 점검을 하려면 Lighthouse의 접근성·성능, 스크린리더(예: macOS VoiceOver, Windows 내레이터)로 한 번씩 읽어 보는 것이 효과적입니다. “모든 ARIA를 외울” 필요는 없지만, 시맨틱 태그로 역할이 설명되게 만드는 것이 이 시리즈의 1차 목표입니다.

실전 프로젝트 예제: 랜딩 페이지 & 대시보드

프로젝트는 “기능”보다 “구성 요소”로 나누어 연습하는 것이 효율적입니다. 시리즈를 따라온 뒤 아래를 순서대로 구현해 보세요.

프로젝트 A: 랜딩 페이지(원 페이지)

히어로(헤드라인+CTA): 시맨틱(#02), Flex로 중앙 정렬(#05).
특징 3단 카드: Grid 3열(#06) 또는 Flex wrap(#05).
가격/플랜: 카드+그리드, border·shadow(#04).
푸터: nav 링크, 소셜 SVG·아이콘. 반응형은 #07에서 1열로 스택.
(선택) 스크롤 애니메이션: transition·@keyframes(#08), 과하지 않게.

완성 기준: 모바일·데스크톱에서 읽기 편한 줄 길이(약 60~80자), 버튼 터치 영역(약 44px 이상) 확보.

프로젝트 B: 대시보드(레이아웃 중심)

전체 셸: body에 Grid로 “사이드바+메인”(#06).
사이드바: 세로 nav, 필요하면 sticky(#04 Position).
상단 툴바: Flex space-between (#05).
카드 그리드: repeat(auto-fit, minmax(…, 1fr)) (#06).
테이블/리스트(간단): overflow-x: auto로 작은 화면 대응 (#07).

완성 기준: 1024/768/375 폭에서 스크롤·오버플로 없이 쓸 수 있는지 확인.

핵심 코드 스니펫 미리보기

아래는 시리즈에서 자주 쓰는 패턴 요약입니다. 실제 프로젝트는 토큰·네이밍 규칙에 맞게 조정하세요.

시맨틱 뼈대(HTML5)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>문서 제목</title>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <a class="skip-link" href="#main">본문으로 건너뛰기</a>
    <header>…</header>
    <main id="main">…</main>
    <footer>…</footer>
  </body>
</html>

`box-sizing`과 CSS 변수(전역)

:root {
  --color-fg: #0f172a;
  --color-bg: #f8fafc;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --radius: 12px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

Flex: 가운데 정렬(히어로 등)

.hero {
  display: flex;
  min-height: 60vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
}

Grid: 반응형 카드(자동 열)

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2);
}

Position: Sticky 헤더(일반적 패턴)

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
}

반응형: 모바일 퍼스트

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}
.title {
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  .title {
    font-size: 2.25rem;
  }
}

애니메이션: `prefers-reduced-motion` 배려

.card {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

타이포: `clamp()`로 유연한 제목(반응형과 연동)

min·max·vw를 한 줄에 담는 방식으로, #07 미디어 쿼리 없이도 제목만 부드럽게 스케일할 수 있습니다(디자인 토큰과 함께 쓰면 일관됩니다).

.title {
  font-size: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  line-height: 1.2;
}

키보드 포커스: `:focus-visible`(마우스와 분리)

클릭할 때는 링이 과하게 보이지 않고, Tab 이동 시에만 포커스 링이 보이게 하는 흔한 패턴입니다.

.btn:focus {
  outline: none;
}
.btn:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 2px;
}

시각적으로 숨기되 스크린리더엔 읽히게(유틸 클래스)

“장식”이 아닌 스킵 링, 폼 label 연결 등에 쓰며, #02·접근성 절에서 다루는 흐름과 맞닿아 있습니다.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

🛠 도구 가이드: DevTools & VS Code

Chrome(또는 Edge) DevTools

Elements: DOM, 클래스 토글, flex/grid 오버레이.
Styles: 규칙 출처, 취소선(덮인 규칙), :hov 강제 상태.
Computed: 최종 width/height, margin, font-size 숫자 확인.
Layout: Grid/Flex 박스 시각화(버전에 따라 탭 이름이 다를 수 있음).

팁: “왜 이 스타일이 안 먹지?” → Computed에서 실제 값을 보고, Styles에서 어떤 규칙이 이겼는지 취소선으로 추적합니다.

VS Code 권장 확장(일반)

Prettier — 포맷 일관(팀 룰에 맞게).
ESLint — JS 연계 시(HTML/CSS 전용이 아닐 수 있음).
colorize / Color Highlight — 색상 리터럴 가독성.
HTML CSS Support — 클래스 이름 자동완성(간단).
IntelliSense for CSS — 프로젝트 CSS 변수(설정·워크스페이스에 따라) 보조.

기본기: 익스텐션은 보조이고, MDN과 스펙이 정답의 기준입니다.

브라우저별·자동 점검(Lighthouse, axe)

Lighthouse(Chrome DevTools → Lighthouse): 성능, 접근성, SEO, PWA(해당 시) 스냅샷 점수. CI에도 쓰일 수 있음.
axe DevTools(브라우저 확장): 위반 항목을 규칙 ID와 함께 나열하고 수정 힌트를 준다. 팀 품질 게이트에 자주 쓰인다.
Firefox DevTools: Grid/Flex 시각화가 읽기 쉬울 때가 있어 교차 검증에 유리.
Safari: iOS·macOS 실기기에서 동작·터치·-webkit- 이슈를 볼 때는 사실상 필수.

주의: 자동 점검은 완벽한 접근성을 보장하지 않습니다. 색 대비, 키보드, 스크린리더는 수동 점검을 병행하세요.

로컬 서빙(경로·`@import`·CORS)

file://로 HTML을 열면 일부 환경에서 스크립트·모듈 동작이 달라질 수 있어, 정적 서버(npx serve, python -m http.server 등)로 여는 습관을 권장합니다. 이 시리즈 #01의 “환경” 설명과도 이어집니다.

🧩 프레임워크·유틸리티 CSS 연계: Tailwind, Bootstrap

왜 “나중에”인가

유틸리티 클래스(예: flex, gap-4)는 이름이 곧 CSS 속성에 가깝습니다. flex-direction·gap이 무엇인지 모르면 문서만 봐서는 레이아웃을 수정하기 어렵습니다.
Bootstrap의 그리드·컴포넌트도 내부는 CSS입니다. 미디어 쿼리·그리드를 이해하면 “왜 col이 이렇게 밀리는지” 읽힙니다.

Tailwind CSS (개괄)

빌드 타임에 사용한 클래스만 CSS로 purge — 번들이 작게 유지되는 편(설정·버전에 따름).
디자인 토큰(색, 간격)을 tailwind.config에 두고, HTML에 표현하는 스타일.

Bootstrap (개괄)

컴포넌트·그리드가 잘 갖춰져 있어 프로토타입·관리자 화면에 자주 쓰입니다.
커스터마이징은 Sass 변수(버전·도입 방식) 등으로; 이 시리즈의 CSS 변수 개념과 맞닿아 있습니다.

권장 순서: 이 시리즈 #01~#08 → 소규모 실전(랜딩/대시보드) → 팀/프로젝트에 맞는 하나의 유틸/프레임워크.

💼 실무 활용: 프론트엔드 개발자 경로와 HTML/CSS

HTML/CSS는 어디까지 쓰이나

퍼블리싱·UI 구현 직군: HTML/CSS(및 Figma-대-CSS) 비중이 큼.
프론트엔드(React·Vue·Svelte 등): JSX·SFC 안에서 시맨틱과 레이아웃을 씀 — 결국 “컴포넌트”는 HTML/CSS의 집합.
디자인 시스템: 토큰(색, 간격, 타이포) → CSS 변수·테마로 이어짐.

이 시리즈 이후 권장 스텝(참고)

JavaScript DOM - 이벤트, 폼, 간단한 CRUD UI
빌드 도구 - 번들, CSS 후처리, PostCSS(선택)
프레임워크 - React/Vue/Svelte 중 하나, 접근성 라이브러리·패턴

📅 커리큘럼: 4주 / 8주 학습 계획

4주(주당 약 6~10시간) — “정적 사이트 한 장 완성”

1주: 환경, HTML 태그, CSS 선택자·특이도, 간단한 프로필 — 시리즈 #01~#03.
2주: 박스, Position, Flex로 내비·섹션 — #04(박스), #04(Position), #05.
3주: Grid, 랜딩 페이지 1차(데스크톱) — #06, 프로젝트 A.
4주: 반응형, 애니메이션(미세), 랜딩 마감 — #07, #08.

마감: GitHub Pages·Netlify·Cloudflare Pages 등에 배포해 보는 것을 권장합니다(정적 호스팅).

8주(한층 탄탄) — “레이아웃+품질+재현 가능성”

1~2주: #01~#03으로 퍼블 품질·습관 잡기
3~5주: #04(및 Position)~#06 + 프로젝트 A/B에 각각 1회 이상
6~7주: #07 반응형 심화(브레이크포인트·타이포 clamp)
8주: #08 애니메이션 + 모션 감소·성능 점검, README에 기술 스택·접근성 메모

❓ FAQ: HTML/CSS 학습

Q1. HTML/CSS만으로 웹사이트를 만들 수 있나요?

A: 응, 정적 사이트(랜딩, 포트폴리오, 문서)는 HTML/CSS면 충분해. 인증, 결제, 실시간 데이터 쪽은 백엔드·JS가 필요해.

Q2. Flexbox vs Grid, 뭐 써?

A: Flex는 1차원(한 줄·한 열) 정렬, Grid는 2차원(행·열 같이)에 강하다. 실무에선 둘 다 쓰는 경우가 많아(예: Grid로 페이지 셸, Flex로 카드 안쪽).

Q3. 반응형 디자인, 필수야?

A: 대부분의 공개 웹이면 사실상 필수에 가깝다고 보면 돼. meta viewport랑 미디어 쿼리로 뷰포트·터치 다루는 건 #07에 정리돼 있어.

Q4. CSS 프레임워크(Tailwind, Bootstrap)는 언제 써?

A: 기초(#01~#08)랑 실전 1~2개 끝낸 다음이 좋다. 원리 알고 가면 프레임워크 문서 읽는 시간이 확 줄어.

Q5. 브라우저 호환성은 어떻게 봐?

A: Can I Use에서 속성·값별로 확인해 봐. Flex·Grid·CSS 변수는 모던 브라우저에서 널리 쓰고, 타깃이 더 넓으면 폴리필/후처리는 따로 잡으면 돼.

Q6. 시맨틱 HTML, 실무에서도 중요해?

A: SEO, 접근성, 팀 온보딩에서 체감이 크다. React 같은 데서도 DOM에 의미 있을수록 유지보수가 편해져.

Q7. `z-index` 올렸는데도 아래에 가려져

A: stacking context 잡는 부모(position+z-index, opacity, transform 이런 것) 안에서만 순위 겨룬다. DevTools Layers 뷰(브라우저마다 다름)로 보면 이해 잘 돼.

Q8. 애니메이션 많이 쓰면 느려져?

A: 리플로우 자주 일으키는 애(width, top 끊임없이 바꾸는 것)는 부담이 크다. transform·opacity 쪽이 보통 권장이고, #08 합성이랑도 이어져.

Q9. 디자인 못 그리면 HTML/CSS도 못 해?

A: 아니야. 실무에선 Figma/스펙을 픽셀에 가깝게 옮기는 일이 더 많고, 감각은 Frontend Mentor 같은 데서 반복하는 게 좋다.

Q10. 이 시리즈 끝나고 바로 React 가도 돼?

A: 가능해. 다만 시맨틱, Flex/Grid, 반응형 손에 익을수록 컴포넌트 스타일링이 빨라진다. 이 목차는 #01~#08로 프론트 기초 한 바퀴 맞춰 둔 거고.

Q11. CSS는 왜 “같은 일”을 여러 방식으로 하게 돼 있어?

A: 역사(브라우저·표준 쌓임)랑 용도 분리(Flex/Grid는 레이아웃, line-height는 줄 간격 쪽)가 겹쳐서 그래. 팀이면 가이드로 문법을 줄이는 경우가 많고, 이 시리즈는 “전부 외우기”보다 자주 쓰는 조합이랑 왜 그렇게 그려지는지를 본다.

Q12. BEM, OOCSS 같은 건 언제 배우면 돼?

A: #03~#04 읽고 작은 프로젝트에 접두사·BEM(Block–Element–Modifier) 한 가지만 적용해 봐. 목표는 이름 예쁘게라기보다 특이도 싸움 줄이는 것이고, Tailwind·CSS Modules·styled-components로 가도 단위(컴포넌트)랑 스코프 고민은 비슷하게 반복돼.

📚 전체 목차(빠른 링크)

🟢 기초 (초급)

#01 HTML/CSS 시작하기

14분 | 초급 | 튜토리얼

HTML과 CSS란? 개발 환경 설정
VS Code, 브라우저 개발자 도구
첫 HTML 문서 작성, CSS 연결
핵심: HTML, CSS, VS Code

#02 HTML 기본 태그

22분 | 고급 | 튜토리얼

텍스트, 링크, 이미지, 리스트
시맨틱 태그 (header, nav, article, footer)
DOM 구조, 브라우저 파싱 과정
핵심: HTML 태그, 시맨틱, DOM

#03 CSS 기초

24분 | 고급 | 튜토리얼

선택자 (태그, 클래스, ID, 가상 클래스)
색상, 폰트, 텍스트 스타일
캐스케이드, 특이도, 상속
CSS 변수, em/rem 단위
핵심: CSS 선택자, 캐스케이드, 특이도

🟡 레이아웃 (중급)

#04 박스 모델

32분 | 중급 | 튜토리얼

Content, Padding, Border, Margin
box-sizing: border-box
Block vs Inline vs Inline-Block
핵심: Box Model, box-sizing

#04 Position

32분 | 중급 | 튜토리얼

static, relative, absolute, fixed, sticky
z-index, stacking context
위치 기준점 이해
핵심: Position, z-index

#05 Flexbox

26분 | 중급 | 튜토리얼

1차원 레이아웃, flex container/item
justify-content, align-items, flex-wrap
flex-grow, flex-shrink, flex-basis
핵심: Flexbox, 1차원 레이아웃

#06 Grid

26분 | 중급 | 튜토리얼

2차원 레이아웃, grid container/item
grid-template-columns, grid-template-rows
grid-area, gap
핵심: CSS Grid, 2차원 레이아웃

🔵 실전 (중급~고급)

#07 반응형 디자인

28분 | 고급 | 튜토리얼

미디어 쿼리 (@media)
모바일 퍼스트 vs 데스크탑 퍼스트
뷰포트, 유연한 이미지
핵심: 반응형, 미디어 쿼리

#08 애니메이션

22분 | 고급 | 튜토리얼

transition, animation, @keyframes
transform (translate, rotate, scale)
성능 최적화 (will-change, GPU 가속)
핵심: CSS 애니메이션, transform

🎯 학습 경로(요약)

입문(대략 2주): #01 시작하기 → #02 HTML 기본 → #03 CSS 기초. 목표는 문법·흐름을 손에 익히는 것, 결과물로는 간단한 프로필 페이지 정도.

레이아웃(대략 3주): #04 박스 모델 → #04 Position → #05 Flexbox → #06 Grid. 목표는 박스·겹침·1·2차원 정렬을 말로 설명할 수 있게 만드는 것, 결과물로는 카드·내비·갤러리 뼈대.

응용(대략 4주): #01~#06 복습 후 #07 반응형 → #08 애니메이션. 목표는 뷰포트·이미지·모션을 한 사이트 안에서 맞추는 것, 결과물로는 포트폴리오 한 장.

💡 시리즈 특징

실전 중심

브라우저 동작 원리 (DOM, CSSOM, 렌더링)
실무 코드 패턴과 모범 사례
개발자 도구 활용법

단계별 학습

초급 (HTML/CSS 기초) → 중급 (레이아웃) → 고급 (반응형/애니메이션)
각 주제마다 실전 예제 제공
프로젝트 기반 학습

모던 웹 표준

시맨틱 HTML5
CSS3 Flexbox, Grid
반응형 디자인 (Mobile First)
성능 최적화

상세한 설명

캐스케이드, 특이도 같은 어려운 개념을 풀어 씀
DOM 파싱, 렌더링 과정 이해
브라우저 호환성 고려

🔗 관련 시리즈

JavaScript 시리즈 - DOM 조작, 이벤트 처리
React 시리즈 - 컴포넌트 기반 UI
Astro 블로그 - 정적 사이트 생성

📖 추천 학습 자료

공식 문서

MDN Web Docs - 최고의 HTML/CSS 레퍼런스
W3C 표준 - 웹 표준 명세

연습 사이트

CSS Tricks - CSS 팁과 트릭
Codepen - 실시간 코드 실험
Frontend Mentor - 실전 프로젝트

도구

VS Code - 최고의 코드 에디터
Chrome DevTools - 브라우저 개발자 도구

시작하기: HTML/CSS 시작하기 (#01)에서 웹 개발 첫걸음을 내디디세요!

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.

앱으로 설치하기

Safari에서 홈 화면에 추가하기

Keyboard Shortcuts

이 글의 핵심

시리즈 소개: HTML/CSS 학습 완전 로드맵

이 로드맵에서 다루는 범위

처음 웹사이트 만들었을 때, IE6…

왜 HTML/CSS를 먼저 배워야 하는가

이 시리즈로 잡는 사고 모델(학습 전체를 관통)

📚 시리즈 글 상세: 각 편이 다루는 핵심

#01 HTML/CSS 시작하기 — 14분 · 초급

#02 HTML 기본 태그 — 22분

#03 CSS 기초 — 24분

#04 박스 모델 — 중급

#04 Position — 중급 (편집·번호: 박스 모델과 별도 URL)

#05 Flexbox

#06 Grid

#07 반응형 디자인 — 중급~고급

#08 애니메이션 — 중급~고급

🧭 학습 순서 가이드: 초급 / 중급 / 고급

초급 경로: “쓰고, 보고, 고칠 수 있다”

중급 경로: “원하는 곳에 박스를 둔다”

고급 경로: “화면이 살아 있고, 어디서든 읽힌다”

주제별 분류: 이 시리즈를 지도로 쓰기

1. HTML 기초 (태그, 구조)

2. CSS 기초 (선택자, 박스 모델)

3. 레이아웃 (Flexbox, Grid, Position)

4. 스타일링 (Typography, Color)

5. 애니메이션

6. 반응형 웹

7. 접근성

8. 품질·검증(크로스 주제)

실전 프로젝트 예제: 랜딩 페이지 & 대시보드

프로젝트 A: 랜딩 페이지(원 페이지)

프로젝트 B: 대시보드(레이아웃 중심)

핵심 코드 스니펫 미리보기

시맨틱 뼈대(HTML5)

box-sizing과 CSS 변수(전역)

Flex: 가운데 정렬(히어로 등)

Grid: 반응형 카드(자동 열)

Position: Sticky 헤더(일반적 패턴)

반응형: 모바일 퍼스트

애니메이션: prefers-reduced-motion 배려

타이포: clamp()로 유연한 제목(반응형과 연동)

키보드 포커스: :focus-visible(마우스와 분리)

시각적으로 숨기되 스크린리더엔 읽히게(유틸 클래스)

🛠 도구 가이드: DevTools & VS Code

Chrome(또는 Edge) DevTools

VS Code 권장 확장(일반)

브라우저별·자동 점검(Lighthouse, axe)

로컬 서빙(경로·@import·CORS)

🧩 프레임워크·유틸리티 CSS 연계: Tailwind, Bootstrap

왜 “나중에”인가

Tailwind CSS (개괄)

Bootstrap (개괄)

💼 실무 활용: 프론트엔드 개발자 경로와 HTML/CSS

HTML/CSS는 어디까지 쓰이나

이 시리즈 이후 권장 스텝(참고)

📅 커리큘럼: 4주 / 8주 학습 계획

4주(주당 약 6~10시간) — “정적 사이트 한 장 완성”

8주(한층 탄탄) — “레이아웃+품질+재현 가능성”

❓ FAQ: HTML/CSS 학습

Q1. HTML/CSS만으로 웹사이트를 만들 수 있나요?

Q2. Flexbox vs Grid, 뭐 써?

Q3. 반응형 디자인, 필수야?

Q4. CSS 프레임워크(Tailwind, Bootstrap)는 언제 써?

Q5. 브라우저 호환성은 어떻게 봐?

Q6. 시맨틱 HTML, 실무에서도 중요해?

Q7. z-index 올렸는데도 아래에 가려져

Q8. 애니메이션 많이 쓰면 느려져?

Q9. 디자인 못 그리면 HTML/CSS도 못 해?

Q10. 이 시리즈 끝나고 바로 React 가도 돼?

Q11. CSS는 왜 “같은 일”을 여러 방식으로 하게 돼 있어?

Q12. BEM, OOCSS 같은 건 언제 배우면 돼?

📚 전체 목차(빠른 링크)

🟢 기초 (초급)

#01 HTML/CSS 시작하기

#02 HTML 기본 태그

#03 CSS 기초

🟡 레이아웃 (중급)

`box-sizing`과 CSS 변수(전역)

애니메이션: `prefers-reduced-motion` 배려

타이포: `clamp()`로 유연한 제목(반응형과 연동)

키보드 포커스: `:focus-visible`(마우스와 분리)

로컬 서빙(경로·`@import`·CORS)

Q7. `z-index` 올렸는데도 아래에 가려져