CSS 치트 시트
검색 및 인쇄 가능한 CSS 레퍼런스 — 선택자, 박스 모델, flexbox, grid, 타이포그래피, 트랜지션, 최신 기능. 무료.
Selectors
13.class
Select all elements with the class
#id
Select the element with the id
a, b
Group: select a and b
a b
Descendant: b inside a
a > b
Direct child b of a
a + b
Adjacent sibling immediately after a
a ~ b
General sibling b after a
[type="text"]
Attribute selector
:hover :focus
Pseudo-classes for state
:nth-child(2n)
Every even child
::before ::after
Pseudo-elements (generated content)
:not(.x)
Negation: anything but .x
:is(h1, h2, h3)
Matches any selector in the list
Box model
7box-sizing: border-box;
Include padding & border in width
margin: 0 auto;
Center a block horizontally
padding: 1rem 2rem;
Vertical 1rem, horizontal 2rem
border: 1px solid #ccc;
Width, style, color
border-radius: 8px;
Rounded corners
outline: 2px dashed red;
Outline (does not affect layout)
overflow: hidden;
Clip content that overflows
Flexbox
8display: flex;
Create a flex container
flex-direction: row | column;
Main axis direction
justify-content: space-between;
Align along the main axis
align-items: center;
Align along the cross axis
flex-wrap: wrap;
Allow items to wrap
gap: 1rem;
Space between items
flex: 1;
Grow to fill space (1 1 0)
align-self: flex-end;
Override cross-axis for one item
Grid
8display: grid;
Create a grid container
grid-template-columns: 1fr 1fr 1fr;
Three equal columns
repeat(3, 1fr)
Shorthand for repeated tracks
minmax(200px, 1fr)
Track between a min and max
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Responsive auto columns
gap: 1rem;
Row and column gap
grid-column: 1 / 3;
Span from line 1 to 3
place-items: center;
Center items on both axes
Typography
8font-family: system-ui, sans-serif;
Font stack
font-size: 1.125rem;
Relative font size
font-weight: 600;
Bold weight
line-height: 1.6;
Line spacing
letter-spacing: .02em;
Tracking
text-align: center;
Horizontal text alignment
text-transform: uppercase;
Change letter case
text-overflow: ellipsis;
Truncate with … (needs overflow+nowrap)
Colors & background
7color: #1f2937;
Text color
background: rgb(0 0 0 / 50%);
Modern rgb with alpha
background: linear-gradient(90deg,#f06,#48f);
Linear gradient
opacity: .5;
Element transparency
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Drop shadow
background-size: cover;
Scale image to cover
color-mix(in srgb, red 40%, blue);
Mix two colors
Positioning
6position: relative;
Offset from normal position
position: absolute;
Relative to nearest positioned ancestor
position: fixed;
Relative to the viewport
position: sticky; top: 0;
Sticks when scrolling past
inset: 0;
top/right/bottom/left = 0
z-index: 10;
Stacking order
Transitions & animation
5transition: all .2s ease;
Animate property changes
transform: translateY(-4px) scale(1.05);
Move, scale, rotate
@keyframes spin { to { transform: rotate(360deg); } }
Define an animation
animation: spin 1s linear infinite;
Run a keyframe animation
will-change: transform;
Hint the browser to optimize
Responsive & modern
7@media (max-width: 768px) { ... }
Media query breakpoint
clamp(1rem, 2vw, 2rem)
Fluid value with min/max
aspect-ratio: 16 / 9;
Maintain an aspect ratio
var(--brand)
Use a custom property
:root { --brand: #4f46e5; }
Define a custom property
container-type: inline-size;
Enable container queries
@container (min-width: 400px) {…}
Container query
“:q”와 일치하는 항목이 없습니다.
CSS 치트 시트 소개
이 CSS 치트시트는 매일 사용하는 속성을 검색 가능한 한 페이지에 담았습니다: 셀렉터, 박스 모델, 플렉스박스, 그리드, 타이포그래피, 색상과 배경, 포지셔닝, 트랜지션과 애니메이션, 반응형 및 최신 CSS 섹션까지 포함합니다.
“그 속성 이름이 뭐였지?”라는 질문에 검색 한 번으로 답할 수 있도록 구성되어 있습니다 — 특히 플렉스박스와 그리드 섹션은 스타일시트에 바로 복사할 수 있는 값과 함께 정렬 및 레이아웃 속성을 나열하며, 최신 섹션은 새로운 기능을 손닿는 곳에 둡니다.
이 시트는 무료이며 클라이언트 사이드에서 로드되고, 입력하는 대로 실시간 필터링되며, 클릭 한 번으로 어떤 선언이든 복사할 수 있습니다. 고정된 목차로 섹션 간을 이동하고, 인쇄 버튼으로 깔끔한 종이 참고 자료를 만들 수 있습니다.
CSS 치트 시트 사용 방법
- 셀렉터, 박스 모델, 플렉스박스, 그리드, 타이포그래피 등 섹션 목록을 훑어보세요.
- grid, hover, transition 같은 속성이나 개념을 검색창에 입력해 모든 행을 필터링하세요.
- 고정된 목차를 통해 포지셔닝 같은 섹션으로 이동하세요.
- 스니펫이나 복사 아이콘을 클릭해 CSS 선언을 복사하세요.
- 책상용 CSS 참고 자료로 시트를 인쇄하세요.
자주 묻는 질문
아홉 개 섹션입니다: 셀렉터, 박스 모델, 플렉스박스, 그리드, 타이포그래피, 색상과 배경, 포지셔닝, 트랜지션과 애니메이션, 반응형 및 최신 CSS 기능입니다.
네 — 둘 다 개발자가 가장 자주 찾아보는 컨테이너와 아이템 속성, 정렬 값, 단축 표기법과 함께 각각 전용 섹션으로 다룹니다.
네. 오래된 핵심 내용 외에도 전용 반응형 및 최신 섹션이 미디어 쿼리 패턴과 함께 최신 스타일시트에서 만나는 새로운 기능을 다룹니다.
네. 코드나 호버 시 나타나는 복사 아이콘을 클릭하면 선언이 클립보드에 저장되고 짧은 “Copied!” 메시지로 확인됩니다.
네, 완전히 무료입니다 — 실시간 검색이 가능한 클라이언트 사이드 페이지이며 로그인도 필요 없고 무제한 사용 가능합니다.
인기 검색어
css cheat sheet
css selectors list
css flexbox properties
css grid properties
css box model reference
css position values
css transition and animation syntax
css properties reference
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.