HTML/CSS 실전 가이드
HTML/CSS 기초부터 Flexbox, Grid, 반응형, 애니메이션까지
🎨 HTML/CSS 기초
HTML/CSS 시작하기 - 태그, 선택자, 박스 모델
-
HTML/CSS 시작하기 | 웹 개발 첫걸음
웹 개발을 처음 시작하는 사람을 위해 VS Code를 설치하고 첫 HTML 파일을 만든 뒤, HTML 기본 구조와 주요 태그, CSS를 연결하는 세 가지 방법과 선택자 문법을 익힙니다. 명함 페이지와 블로그 글 예제, Chrome DevTools 사용법도 다룹니다.
-
HTML 기본 태그 | 텍스트, 링크, 이미지, 리스트
제목과 문단, 강조 태그, 링크와 이미지, figure, 순서 있는·없는 리스트와 설명 리스트, 셀 병합이 있는 테이블, header·nav·article 같은 시맨틱 태그를 예제로 익힙니다. 기본 폼 요소와 프로필 페이지 실습으로 마무리합니다.
-
CSS 선택자: 속성 선택자, 가상 클래스, :has()까지
속성 선택자의 ^= $= *= 차이와 i 플래그, :focus-visible·:nth-child(An+B of S)·:has() 같은 가상 클래스, 특이도 계산과 :is/:where의 차이까지 예제로 짚어 봅니다.
-
CSS 기초 | 선택자, 속성, 색상, 폰트
CSS 선택자, 색상 표현, 웹 폰트, 텍스트 오버플로우, px·rem·em 단위, CSS 변수를 예제로 익히고 같은 요소에 여러 규칙이 겹칠 때 캐스케이드와 특이도로 값이 결정되는 과정을 설명합니다.
-
CSS 박스 모델: margin, padding, border와 box-sizing
박스 모델·사용값·퍼센트 기준·BFC·마진 병합·box-sizing까지. 레이아웃 엔진이 너비·마진을 확정하는 순서와 병합이 끊기는 조건을 고급 관점에서 정리합니다. CSS 박스 모델은 모든 HTML 요소를 상자로 보는 관점입니다. 내용물(Content)은 상자 안 물건, padding은 완충재, border는 상자 테두리, margin은 상자 바깥의 간격이라고 이해하시면 레이아웃이 잡힙니다.
-
CSS position 심화 | 포함 블록, 쌓임 맥락, 레이아웃 영향
position은 “어디에 붙일지”만이 아니라, 요소가 일반 문서 흐름(normal flow)에 남을지 이탈할지를 결정합니다. 이탈한 박스는 부모의 블록 레벨 세로 배치에서 빠지며, 형제와의 마진 병합 관계도 달라집니다.
📐 레이아웃
Flexbox, Grid로 레이아웃 만들기
-
CSS Flexbox 입문: flex-direction, justify-content, align-items로 레이아웃 잡기
CSS Flexbox 기초 정리. Flexbox 기본 개념, flex-direction, justify-content와 align-items 정렬, flex-wrap, flex 아이템 속성을 예제로 설명합니다.
-
CSS Grid 레이아웃: grid-template-areas, fr·minmax·auto-fit, Flexbox와 함께 쓰기
CSS Grid 정리. display: grid와 grid-template 설정, grid-template-areas, fr·gap·repeat·minmax·auto-fit, 아이템 배치와 정렬, 대시보드 레이아웃 예제와 Flexbox 조합을 다룹니다.
✨ 고급 & 실전
반응형, 애니메이션, 고급 선택자, 실전 프로젝트
-
반응형 웹 디자인 | 미디어 쿼리와 모바일 최적화
viewport 메타 태그 설정부터 미디어 쿼리 브레이크포인트, srcset과 picture를 이용한 반응형 이미지, clamp()로 만드는 유동 타이포그래피, Container Queries까지 모바일 대응 레이아웃을 예제로 구성합니다.
-
CSS 애니메이션 | Transition, Animation, Transform
transition 타이밍 함수, 2D·3D transform과 perspective, @keyframes 애니메이션 속성을 버튼 효과·로딩 스피너·카드 플립 예제로 익히고, 60fps를 지키기 위한 GPU 가속 속성과 will-change 사용 기준을 설명합니다.