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

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

· 4분 읽기 · 수정 초급 가이드
HTML/CSS 시리즈 전체 목차 | 웹 프론트엔드 기초부터 실전까지

이 글의 핵심

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

시리즈 소개

HTML/CSS는 모든 웹 개발의 시작점입니다. 이 시리즈는 HTML의 구조와 의미, CSS의 스타일링과 레이아웃을 기초부터 실전까지 체계적으로 학습할 수 있도록 구성했습니다.

시맨틱 마크업, 선택자, 박스 모델, Flexbox, Grid, 반응형 디자인, 애니메이션까지 모던 웹 개발에 필요한 핵심 개념을 실전 예제와 함께 설명합니다.

📚 전체 목차

🟢 기초 (초급)

#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 박스 모델

분량 미확인 | 중급 | 튜토리얼

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

#04 Position

분량 미확인 | 중급 | 튜토리얼

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

#05 Flexbox

분량 미확인 | 중급 | 튜토리얼

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

#06 Grid

분량 미확인 | 중급 | 튜토리얼

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

🔵 실전 (중급~고급)

#07 반응형 디자인

분량 미확인 | 고급 | 튜토리얼

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

#08 애니메이션

분량 미확인 | 고급 | 튜토리얼

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

🎯 학습 경로

1️⃣ 웹 개발 입문 (2주 코스)

#01 시작하기 → #02 HTML 기본 → #03 CSS 기초

목표: HTML/CSS 기초 문법 이해
난이도: ⭐☆☆☆☆
결과물: 간단한 프로필 페이지

2️⃣ 레이아웃 마스터 (3주 코스)

#04 박스 모델 → #04 Position → #05 Flexbox → #06 Grid

목표: 모든 레이아웃 기법 완벽 이해
난이도: ⭐⭐⭐☆☆
결과물: 복잡한 레이아웃 구현

3️⃣ 모던 프론트엔드 (4주 코스)

#01~#06 복습 → #07 반응형 → #08 애니메이션

목표: 실전 반응형 웹사이트 제작
난이도: ⭐⭐⭐⭐☆
결과물: 포트폴리오 웹사이트

💡 시리즈 특징

✅ 실전 중심

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

✅ 단계별 학습

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

✅ 모던 웹 표준

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

✅ 상세한 설명

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

🔗 관련 시리즈

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

❓ 자주 묻는 질문

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

A: 네, 정적 웹사이트(블로그, 포트폴리오, 랜딩 페이지)는 HTML/CSS만으로 충분합니다. 동적 기능(로그인, 댓글)은 JavaScript가 필요합니다.

Q2. Flexbox vs Grid 어떤 걸 쓰나요?

A: Flexbox는 1차원(행 또는 열), Grid는 2차원(행과 열)에 적합합니다. 둘 다 익혀서 상황에 맞게 사용하세요.

Q3. 반응형 디자인은 필수인가요?

A: 네, 모바일 트래픽이 50% 이상이므로 필수입니다. 미디어 쿼리로 다양한 화면 크기에 대응하세요.

Q4. CSS 프레임워크(Tailwind, Bootstrap)도 배워야 하나요?

A: 기초를 먼저 익힌 후 프레임워크를 사용하세요. 원리를 이해하면 프레임워크 학습이 훨씬 쉽습니다.

Q5. 브라우저 호환성은 어떻게 확인하나요?

A: Can I Use에서 확인하세요. Flexbox, Grid는 최신 브라우저에서 모두 지원됩니다.

📖 추천 학습 자료

공식 문서

연습 사이트

도구

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