AI 시대에도 필요한 CSS 효과와 반응형 웹, transition부터 다크모드 완벽노트

이 자료는 이런 분께 맞습니다

• CSS 기초(선택자, 박스 모델, Flexbox, Grid)를 익히고 다음 단계로 넘어가려는 분

• hover 효과, 애니메이션, 3D 카드 같은 "움직이는 CSS"를 직접 만들고 싶은 분

• 모바일·태블릿·PC에 모두 맞는 반응형 웹을 처음부터 제대로 배우고 싶은 분

• 미디어쿼리는 써 봤지만 container query, CSS 변수, 다크모드는 낯선 분

• AI가 만든 CSS의 transition·@media 코드를 읽고 고치고 싶은 분

• 유튜브 CSS 강의를 보고 정리된 교재가 필요한 분

자료 소개

"CSS 효과와 반응형 웹"은 CSS 시리즈 2권으로, 시각 효과(그림자·그라디언트·transition·transform·animation)에서 반응형 웹, container query, CSS 변수, 다크모드까지 다룹니다.

유튜브 채널 ezweb의 CSS 재생목록(연계 영상 41편)과 함께 보도록 만들었고, 각 장마다 연계 영상을 표시했습니다.

움직임과 화면 변화는 글만 읽어서는 감이 오지 않습니다.

그래서 hover·focus 상태, 애니메이션 중간 장면, 화면 폭별 배치, 라이트·다크 모드를 브라우저에서 직접 만들어 캡처한 결과 화면을 본문에 넣었습니다.

한눈에 보기

• 분량: PDF 161쪽 / DOCX 약 171쪽

• 구성: 프롤로그 + 10개 장(3개 PART) + 부록 A~E

• 실행 검증된 예제 77개 (결과 화면 수록)

• 확인 문제 75문항 + 정답·해설 (부록 C)

• 장마다 "자주 하는 실수" 정리

• 유튜브 연계 영상 41편 (부록 D 영상 대조표)

• 제공 형식: PDF, DOCX (2종)

  
  

이 책의 특징

• 모든 예제를 실제로 실행해 확인했습니다

본문의 수치와 결과는 브라우저에서 측정하거나 캡처한 값입니다.

예) 옛 float 레이아웃과 Grid 레이아웃이 7개 화면 폭에서 같은 위치·크기로 나오는지 비교, srcset이 화면 폭과 해상도(DPR)별로 어떤 이미지를 고르는지 표로 확인, 다크모드 글자 대비비 측정

• 효과를 "원리"부터 설명합니다

transform이 레이아웃을 건드리지 않는 이유, transition과 animation을 나누는 기준, 미디어쿼리와 container query를 고르는 기준처럼 막히는 지점을 풀어 설명합니다.

• 접근성과 성능을 처음부터 함께 다룹니다

prefers-reduced-motion으로 움직임 줄이기, 키보드 사용자를 위한 :focus-within과 aria-expanded, 확대를 막지 않는 viewport, 다크모드 글자 대비 4.5:1 같은 습관을 기본으로 익힙니다.

• 최신 CSS 문법을 포함합니다

범위 표기 미디어쿼리(width >= 768px), container query와 cqw 단위, light-dark() 함수, color-scheme, aspect-ratio, clamp() 등.

지원 브라우저가 걱정되는 문법은 대체 방안도 함께 알려 드립니다.

• 매 장이 같은 흐름입니다

연계 영상 → 이 장에서 배우는 것 → 단계별 설명과 예제 → 확인 문제와 정답 → 자주 하는 실수

• PDF와 DOCX를 함께 제공합니다

PDF는 읽기용, DOCX는 검색·메모·편집용으로 활용할 수 있습니다.

목차

프롤로그

• 2권을 시작하며, 1권에서 가져올 것, 효과와 접근성을 함께 배우는 법

PART 1. 시각 효과

1장. 그림자, 그라디언트, 유리 효과

box-shadow와 inset, 그림자 겹쳐 깊이 만들기, text-shadow, 입력창 포커스 효과, linear/radial/conic-gradient, 줄무늬·체크·점 패턴, filter와 backdrop-filter 유리 카드

2장. transition: 상태 변화를 부드럽게

transition 4가지 속성과 단축 표기, 전환 가능한 속성, timing-function, 올릴 때와 뗄 때 다르게, 서브메뉴·이미지 캡션 실습, 성능과 접근성

3장. transform과 3D

translate, scale, rotate, skew, transform-origin, 여러 변형의 순서, perspective, preserve-3d, backface-visibility, 뒤집히는 카드와 회전 큐브 실습

4장. animation과 @keyframes

transition과 animation의 차이, @keyframes, animation 속성 8가지, 반복·방향·fill-mode, fadeInUp·로딩·공지 카드·글자 채우기 실습, 개발자도구 Animations 패널, prefers-reduced-motion

PART 2. 반응형 웹

5장. 반응형 기초: 뷰포트와 미디어쿼리

viewport 메타 태그, @media 문법, max-width와 min-width(데스크톱 우선·모바일 우선), 내용 기준 breakpoint, 범위 표기, orientation·hover·prefers-*, 유연한 이미지와 clamp(), Device Mode

6장. 반응형 레이아웃 5가지 유형

Mostly Fluid, Column Drop, Layout Shifter, Tiny Tweaks, Off Canvas, 옛 float 방식과 현재 방식 비교, 사이트 구조(헤더·본문·사이드·푸터) 반응형 완성

7장. 반응형 메뉴, 이미지, 해상도

Flexbox 가로 메뉴, 햄버거 버튼과 접히는 메뉴, 사이드 메뉴, srcset·sizes·picture, DPR, image-set()과 스프라이트, SVG, 유튜브 iframe 반응형

8장. container query

미디어쿼리의 한계, container-type과 @container, container-name, cqw·cqi 단위, 3구간 카드 실습, 미디어쿼리와의 선택 기준, 지원 브라우저와 대체 방안

PART 3. CSS 변수와 테마

9장. CSS 변수 (custom properties)

선언과 var(), 범위와 상속, 대체값, 인라인 스타일과 JavaScript로 변경, 디자인 토큰, calc()와 변수

10장. 다크모드와 테마

prefers-color-scheme, 변수로 설계하는 테마, color-scheme과 light-dark(), data-theme과 localStorage 전환 버튼, 이미지·그림자·글자 대비 점검, 1·2권 정리

부록

A. 속성 한눈에 보기 (치트시트)

B. 자주 하는 실수 TOP 10

C. 확인 문제 정답

D. 영상 대조표

E. 예제 파일 목록

책을 읽고 나면

• hover·focus 효과와 전환·변형·애니메이션을 성능과 접근성을 고려해 만들 수 있습니다.

• 화면 폭에 따라 메뉴, 이미지, 레이아웃이 달라지는 반응형 페이지를 직접 완성할 수 있습니다.

• 부모 크기에 반응하는 컴포넌트(container query)와 CSS 변수로 재사용 가능한 스타일을 설계할 수 있습니다.

• 시스템 설정과 사용자 선택을 모두 따르는 다크모드를 구현할 수 있습니다.

학습 방법 안내

• 장 시작의 연계 영상을 먼저 보거나, 본문을 먼저 읽습니다.

• 본문에 표시된 예제 파일 이름(예: 3-8_flip_card.html)을 VS Code 등에서 직접 만들어 실행해 봅니다.

• 장 끝의 확인 문제를 풀고, 부록 C로 정답을 확인합니다.

• 효과가 동작하지 않을 때는 "자주 하는 실수"와 부록 B를 위에서부터 점검합니다.

※ 책에는 예제의 핵심 코드와 실행 결과 화면이 실려 있어, 별도 파일 없이 읽고 따라 칠 수 있습니다.

1권 안내

1권 "CSS 기초부터 레이아웃까지"는 CSS 문법, 선택자, 우선순위, 텍스트·배경, 박스 모델, float·position, Flexbox, Grid를 다룹니다.

2권은 1권 내용(선택자, 박스 모델, Flexbox, Grid)을 안다는 전제로 이어지므로, 1권을 먼저 보시길 권합니다.

자료 이용 안내 (필독)

• 저작권은 판매 전문가에게 귀속됩니다.

• 구매 후 개인 학습 및 업무 참고 목적으로만 이용할 수 있으며, 상업적 이용(재판매, 재배포, 강의·교재·상품 제작에의 사용, 온라인 공유 등)은 불가능합니다.

• 책에 포함된 예제 코드와 그림은 본 자료의 일부로, 위 이용 범위가 동일하게 적용됩니다.

• 본 자료에는 개인정보(DB)가 포함되어 있지 않습니다.

• 디지털 자료 특성상 제공 후에는 환불이 제한될 수 있으니, 미리보기 이미지와 목차를 충분히 확인한 뒤 구매해 주세요.

제공 파일

• CSS_효과와_반응형웹_2권.pdf (161쪽)

제작·환경 정보

• 저자: 김동주 (유튜브 ezweb)

• 초판: 2026년

• 내용 기준: 최신 브라우저(Chrome 계열)에서 실행해 확인

• 다루는 범위: CSS 시각 효과, 반응형 웹, 변수·테마 (초중급)

자주 묻는 질문

Q. 1권을 꼭 먼저 봐야 하나요?

A. 선택자, 박스 모델, Flexbox, Grid를 이미 안다면 2권부터 보셔도 됩니다. 처음이라면 1권을 먼저 권합니다.

Q. JavaScript를 알아야 하나요?

A. 기본은 CSS만으로 진행합니다. 메뉴 열기·다크모드 전환 예제에 짧은 JavaScript가 나오지만, 코드를 그대로 따라 쓸 수 있게 설명합니다.

Q. 오래된 브라우저에서도 동작하나요?

A. 최신 브라우저 기준입니다. container query, light-dark() 등 지원 범위가 좁은 문법은 지원 여부와 대체 방안을 함께 안내합니다.

Q. 영상을 꼭 봐야 하나요?

A. 아닙니다. 책만으로 학습할 수 있고, 영상은 보조 자료입니다.

Q. 상업적으로 이용할 수 있나요?

A. 불가능합니다. 개인 학습·참고용입니다.