AI 시대에도 필요한 CSS 기초부터 레이아웃까지, Flexbox·Grid 실전 노트
2026. 10. 09. 22:01
수정됨
CSS_기초부터_레이아웃까지_1권.zip
6.4MB
한 줄 소개
AI가 CSS를 대신 써 주는 시대에도, 그 코드를 읽고 고치려면 원리를 알아야 합니다. 선택자부터 Flexbox·Grid까지, 직접 실행하며 익히는 CSS 입문 전자책입니다.
187쪽, 15개 장, 직접 실행해 검증한 예제 93개와 결과 화면, 확인 문제 96문항.
유튜브 연계 영상 63편과 함께 보는 CSS 기초 노트입니다.
예제파일 제공
────────────────────────────────────────
이런 고민, 하고 계신가요?
· 영상을 따라 CSS를 쳐 봤는데, 왜 그렇게 되는지는 모르겠어요.
· 스타일을 분명히 적었는데 적용되지 않아요. 우선순위가 뭔지 헷갈려요.
· margin, padding, position, z-index가 늘 예상과 다르게 움직여요.
· float는 알겠는데 Flexbox와 Grid는 언제 무엇을 써야 할지 모르겠어요.
· AI가 만들어 준 CSS를 그대로 쓰는데, 조금만 고치려 해도 어디를 건드려야 할지 모르겠어요.
이 책은 바로 이 질문들에 답하기 위해 만들었습니다.
────────────────────────────────────────
왜 AI 시대에도 CSS 기초가 필요할까요?
"카드 3개를 가운데 정렬해서 반응형으로 만들어 줘" 한마디면 AI가 CSS를 써 줍니다. 하지만 결과가 마음에 들지 않을 때 "여기 간격만 줄여 줘", "이 요소만 오른쪽으로 보내 줘"를 정확히 말하려면 용어와 원리를 알아야 합니다.
1) AI가 만든 코드를 읽는 기준이 됩니다.
어떤 선택자가 이기는지, 어떤 상자가 어디까지 차지하는지 알아야 코드를 믿어도 되는지 판단할 수 있습니다.
2) 정확한 지시는 정확한 용어에서 나옵니다.
"부모를 grid로 하고 열은 repeat(auto-fit, minmax(220px, 1fr))로"처럼 말할 수 있으면 원하는 결과를 훨씬 빨리 얻습니다.
3) 고치는 사람은 결국 나 자신입니다.
AI는 훌륭한 조수이지만, 결과물에 책임지는 사람은 내가 되어야 합니다.
────────────────────────────────────────
이 책의 특징
직접 실행해 확인한 예제 93개
본문의 예제는 실제 브라우저에서 실행해 결과를 확인했고, 크기·위치·우선순위 같은 수치는 직접 측정한 값입니다. 예제마다 결과 화면 그림이 실려 있습니다.
강의 자료의 오류를 확인해 바로잡았습니다
예) flex-basis의 기본값, flex-shrink의 가중치 계산, gap에는 repeat()를 쓸 수 없다는 점 등을 실제로 확인한 내용으로 설명합니다.
"왜 그렇게 동작하는가"를 설명합니다
속성 이름을 외우는 대신 캐스케이드, 박스 모델, 쌓임 맥락(z-index), 주축과 교차축 같은 원리를 풀어 설명합니다.
매 장이 같은 흐름입니다
연계 영상 → 이 장에서 배우는 것 → 단계별 설명과 예제 → 확인 문제와 정답 → 자주 하는 실수
현재 쓰는 문법까지 다룹니다
:has(), :focus-visible, @layer, aspect-ratio, min()/max(), gap, auto-fit/minmax() 등.
접근성 습관을 처음부터 넣었습니다
포커스 표시를 지우지 않기, 색 대비, 키보드 사용자를 고려한 선택자 사용법을 기본 습관으로 익힙니다.
유튜브 영상 63편과 연계
각 장 시작에 연계 영상을 표시했고, 부록 D에 책과 영상의 대조표가 있습니다.
────────────────────────────────────────
구성
프롤로그: 이 책을 읽는 법, 실습 환경(VS Code, 개발자도구), AI 시대에 CSS를 배우는 이유
PART 1. CSS 시작하기
1장 CSS 문법, 색상, 단위 / 2장 선택자 ① 기본·관계·속성 / 3장 선택자 ② 가상 클래스·가상 요소·구조 선택자 / 4장 우선순위, 상속, @layer
PART 2. 텍스트와 배경
5장 웹 폰트와 글자 스타일 / 6장 텍스트 꾸미기와 목록 / 7장 배경과 이미지
PART 3. 박스와 배치
8장 display와 박스 모델 / 9장 float와 다단 레이아웃 / 10장 position과 z-index
PART 4. 현대 레이아웃
11장 Flexbox ① 개념과 컨테이너 속성 / 12장 Flexbox ② 교차축 정렬과 아이템 속성 / 13장 Grid ① 기초와 영역 배치 / 14장 Grid ② 반응형 그리드와 정렬 / 15장 정렬 방법 비교와 레이아웃 실전
부록: A 속성 치트시트 / B 자주 하는 실수 TOP 10 / C 확인 문제 정답 / D 영상 대조표 / E 예제 파일 목록
────────────────────────────────────────
이 책을 읽고 나면
선택자를 상황에 맞게 골라 쓰고, 스타일이 적용되지 않는 이유를 개발자도구로 찾을 수 있습니다.
박스 모델, position, z-index를 이해하고 의도한 위치에 요소를 배치할 수 있습니다.
Flexbox와 Grid로 헤더·카드 목록·다단 페이지 같은 기본 레이아웃을 직접 만들 수 있습니다.
AI가 만든 CSS를 읽고 원하는 대로 고칠 수 있는 기준이 생깁니다.
────────────────────────────────────────
이런 분께 추천합니다
HTML은 배웠는데 CSS에서 막힌 입문자
선택자 우선순위, 박스 모델, position이 늘 헷갈리는 분
float는 알지만 Flexbox·Grid로 넘어가지 못한 분
AI가 만든 CSS를 읽고 고치고 싶은 분
유튜브 CSS 강의를 보고 정리된 교재가 필요한 분
이런 분께는 맞지 않을 수 있어요
✘ HTML 태그를 전혀 모르는 분 (div, p, a, img, ul 정도는 알고 있다는 전제입니다)
✘ 애니메이션, 반응형 웹, 다크모드가 목적이신 분 → 2권에서 다룹니다
────────────────────────────────────────
상품 정보
형식: PDF (187쪽) + DOCX (약 196쪽)
저자: 김동주 (유튜브 ezweb)
초판: 2026년
준비물: 브라우저(Chrome 권장), 코드 편집기(VS Code 권장)
시리즈: 2권 "AI 시대에도 필요한 반응형 CSS, 효과부터 다크모드까지 노트"로 이어집니다.
이용 안내
개인 학습·참고용 자료입니다.
재판매, 재배포, 강의·교재·상품 제작에의 사용 등 상업적 이용은 불가합니다.
디지털 자료 특성상 제공 후에는 환불이 제한될 수 있으니, 갤러리 이미지와 소개를 충분히 확인한 뒤 구매해 주세요.
자주 묻는 질문
Q. HTML을 전혀 몰라도 볼 수 있나요?
A. 기본 태그를 아는 정도를 전제로 합니다. 예제가 짧아 따라 하기는 어렵지 않습니다.
Q. 영상을 꼭 봐야 하나요?
A. 아닙니다. 책만으로 학습할 수 있고, 영상은 보조 자료입니다.
Q. 2권을 같이 사야 하나요?
A. 1권만으로 CSS 기초와 레이아웃을 완결할 수 있습니다. 애니메이션과 반응형은 2권에서 다룹니다.