CSS 치트 시트
검색 및 인쇄 가능한 CSS 레퍼런스 — 선택자, 박스 모델, flexbox, grid, 타이포그래피, 트랜지션, 최신 기능. 무료.
선택자
13.class
해당 클래스의 모든 요소 선택
#id
해당 id의 요소 선택
a, b
그룹: a와 b 선택
a b
후손: a 안의 b
a > b
a의 직계 자식 b
a + b
a 바로 뒤 인접 형제
a ~ b
a 뒤의 일반 형제 b
[type="text"]
속성 선택자
:hover :focus
상태용 의사 클래스
:nth-child(2n)
모든 짝수 번째 자식
::before ::after
의사 요소 (생성된 콘텐츠)
:not(.x)
부정: .x 제외 모든 것
:is(h1, h2, h3)
목록의 모든 선택자와 일치
박스 모델
7box-sizing: border-box;
너비에 패딩과 테두리 포함
margin: 0 auto;
블록을 수평 중앙 정렬
padding: 1rem 2rem;
세로 1rem, 가로 2rem
border: 1px solid #ccc;
너비, 스타일, 색상
border-radius: 8px;
둥근 모서리
outline: 2px dashed red;
아웃라인 (레이아웃에 영향 없음)
overflow: hidden;
넘치는 콘텐츠 잘라내기
플렉스박스
8display: flex;
플렉스 컨테이너 생성
flex-direction: row | column;
주축 방향
justify-content: space-between;
주축을 따라 정렬
align-items: center;
교차축을 따라 정렬
flex-wrap: wrap;
항목 줄바꿈 허용
gap: 1rem;
항목 사이 간격
flex: 1;
공간 채우도록 확장 (1 1 0)
align-self: flex-end;
한 항목의 교차축 재정의
그리드
8display: grid;
그리드 컨테이너 생성
grid-template-columns: 1fr 1fr 1fr;
세 개의 동일 열
repeat(3, 1fr)
반복 트랙 단축 표기
minmax(200px, 1fr)
최소와 최대 사이 트랙
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
반응형 자동 열
gap: 1rem;
행과 열 간격
grid-column: 1 / 3;
라인 1에서 3까지 걸침
place-items: center;
양 축에서 항목 중앙 정렬
타이포그래피
8font-family: system-ui, sans-serif;
폰트 스택
font-size: 1.125rem;
상대 폰트 크기
font-weight: 600;
굵은 두께
line-height: 1.6;
줄 간격
letter-spacing: .02em;
자간
text-align: center;
수평 텍스트 정렬
text-transform: uppercase;
글자 대소문자 변경
text-overflow: ellipsis;
…로 잘라내기 (overflow+nowrap 필요)
색상과 배경
7color: #1f2937;
텍스트 색상
background: rgb(0 0 0 / 50%);
알파 포함 최신 rgb
background: linear-gradient(90deg,#f06,#48f);
선형 그라데이션
opacity: .5;
요소 투명도
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
그림자 효과
background-size: cover;
이미지를 cover로 스케일
color-mix(in srgb, red 40%, blue);
두 색상 혼합
위치 지정
6position: relative;
정상 위치에서 오프셋
position: absolute;
가장 가까운 위치 지정 조상 기준
position: fixed;
뷰포트 기준
position: sticky; top: 0;
스크롤 지날 때 고정
inset: 0;
top/right/bottom/left = 0
z-index: 10;
쌓임 순서
전환과 애니메이션
5transition: all .2s ease;
속성 변화 애니메이션
transform: translateY(-4px) scale(1.05);
이동, 스케일, 회전
@keyframes spin { to { transform: rotate(360deg); } }
애니메이션 정의
animation: spin 1s linear infinite;
키프레임 애니메이션 실행
will-change: transform;
브라우저에 최적화 힌트
반응형과 최신 기능
7@media (max-width: 768px) { ... }
미디어 쿼리 중단점
clamp(1rem, 2vw, 2rem)
min/max를 가진 유동 값
aspect-ratio: 16 / 9;
종횡비 유지
var(--brand)
커스텀 속성 사용
:root { --brand: #4f46e5; }
커스텀 속성 정의
container-type: inline-size;
컨테이너 쿼리 활성화
@container (min-width: 400px) {…}
컨테이너 쿼리
“:q”와 일치하는 항목이 없습니다.
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.