CSS3

원본: 1-CSS3.pdf · 상위: 웹 기초 MOC

한 줄 요약

HTML 요소의 모양·배치·움직임을 정의하는 스타일 언어. 선택자로 대상을 고르고 속성으로 스타일을 적용한다.

목차 (강의 구성)

1. CSS3 기본
2. CSS3 심화

---

1. CSS3 기본

CSS 블록

선택자 {
  속성: 값;
}

선택자 종류

종류	형태	설명
전체	*	모든 요소
태그	h1	특정 태그
아이디	#id	id 속성
클래스	.class	class 속성
속성	[attr], [attr=값]	속성/값 조건
문자열 속성	^= $= *= ~= `	=`
후손	A B	A 안의 모든 B
자손	A > B	직계 자식
동위	A + B, A ~ B	형제
반응	:hover :active :focus 등	사용자 반응
상태	:checked :disabled 등	상태
구조	:first-child :nth-child() 등	위치
문자	:first-letter :before :after	글자/가상 요소
링크	:link :visited	링크 상태
부정	:not()	제외

단위

• 크기: px, %, em/rem, 배수
• 색상: 키워드, #hex, rgb(), hsl()
• URL: url(...)

가시 속성

• display: none, block, inline, inline-block …
• visibility: hidden, collapse …
• opacity

박스 모델

margin → border → padding → content (width/height)

• margin / padding (1~4값 단축)
• box-sizing: content-box | border-box
• 테두리: border-*, border-radius
• 배경: background-image/size/repeat/attachment/position
• 폰트: font-size/family/style/weight, line-height, text-align, text-decoration
• 위치: position (static/relative/absolute/fixed/sticky), z-index, overflow
• float + clear
• 그림자: text-shadow, box-shadow
• 그레이디언트, 벤더 프리픽스

---

2. CSS3 심화

전환 (transition)

속성	역할
transition	일괄 지정
transition-property	어떤 속성
transition-duration	시간
transition-delay	지연
transition-timing-function	이징

애니메이션 (animation)

• @keyframes 이름 정의
• animation-name, duration, delay, iteration-count
• direction, play-state, timing-function

변환 (transform)

• 2D: translate, rotate, scale, skew …
• transform-origin
• 3D: transform-style 등

레이아웃·반응형 (강의 흐름상 확장)

• Flexbox / Grid (모던 레이아웃)
• @media 반응형 규칙

---

최소 예제

* { box-sizing: border-box; }

.card {
  width: 320px;
  margin: 1rem auto;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
}

체크리스트

• 선택자 우선순위 이해 (id > class > tag)
• box-sizing border-box 기본 습관
• margin/padding/border 구분
• transition / transform 간단 적용

링크

• 이전: HTML 요약
• 다음: JavaScript 요약
• 맵: 웹 기초 MOC