언어
CSS 빠른 참조
CSS 빠른 참조용 인쇄 가능한 치트시트로, 빠른 조회와 학습, 책상 옆 참고용으로 정리되었습니다
미리보기
이 치트시트에 포함된 내용
- 선택자
- 박스 모델
- Flexbox
- Grid
- 타이포그래피
- 색상 & 배경
- 트랜지션 & 애니메이션
- 반응형 디자인
- 포지셔닝
- 커스텀 속성
기본 선택자
* | 전체 — 모든 요소 |
div | 타입 — 모든 `<div>` 요소 |
.class | 클래스 — 해당 클래스를 가진 요소 |
#id | ID — 해당 id를 가진 요소 |
[attr] | 속성 — 속성이 있는 요소 |
[attr="val"] | 속성 값 일치 |
결합자
A B | 자손 (모든 깊이) |
A > B | 직접 자식만 |
A + B | 인접 형제 (다음) |
A ~ B | 일반 형제 (이후 모두) |
가상 클래스
:hover | 요소 위에 마우스 올림 |
:focus | 요소에 포커스 |
:first-child | 부모의 첫 번째 자식 |
:nth-child(n) | n번째 자식 (1부터, `odd`, `even`, `2n+1`) |
:not(sel) | 부정 — 매칭 제외 |
:has(sel) | 부모 선택자 (매칭 포함) |
모든 섹션이 포함된 인쇄용 치트시트 다운로드
PDF 다운로드다운로드
