* | 전체 선택자 (모든 요소) |
element | 타입 선택자 |
.class | 클래스 선택자 |
#id | ID 선택자 |
[attr] | 속성 선택자 |
[attr="value"] | 정확한 속성 값 |
[attr^="value"] | 시작하는 값 |
[attr$="value"] | 끝나는 값 |
[attr*="value"] | 포함하는 값 |
A B | 자손 (A 안의 B) |
A > B | 자식 (직접 자식) |
A + B | 인접 형제 (다음) |
A ~ B | 일반 형제 (이후 모두) |
A, B | 그룹 (A 또는 B) |
:hover | 마우스 오버 |
:active | 클릭 중 |
:focus | 포커스됨 |
:focus-visible | 키보드로 포커스 |
:visited | 방문한 링크 |
:first-child | 첫 번째 자식 |
:last-child | 마지막 자식 |
:nth-child(n) | n번째 자식 |
:nth-of-type(n) | n번째 타입 |
:not(selector) | 부정 |
:is(a, b) | 선택자 중 하나와 일치 |
:where(a, b) | :is와 같지만 명시도 0 |
:has(selector) | 부모 선택자 |
:empty | 빈 요소 |
:disabled | 비활성화된 폼 요소 |
:checked | 체크된 입력 |
::before | 내용 앞에 삽입 |
::after | 내용 뒤에 삽입 |
::first-line | 텍스트 첫 줄 |
::first-letter | 첫 글자 |
::selection | 선택된 텍스트 |
::placeholder | 입력 플레이스홀더 |
::marker | 목록 마커 |
box-sizing: border-box | 너비에 패딩/테두리 포함 |
width / height | 요소 크기 |
min-width / max-width | 최소/최대 너비 제한 |
padding: 10px | 내부 여백 (모든 면) |
padding: 10px 20px | 수직 | 수평 |
padding: 10px 20px 30px 40px | 상 우 하 좌 |
margin: auto | 수평 중앙 정렬 |
border: 1px solid #000 | 테두리 단축 |
border-radius: 8px | 둥근 모서리 |
outline | 아웃라인 (공간 차지 안함) |
display: block | 블록 요소 (전체 너비) |
display: inline | 인라인 요소 |
display: inline-block | 블록 속성의 인라인 |
display: none | 요소 숨기기 |
display: flex | 플렉스박스 컨테이너 |
display: grid | 그리드 컨테이너 |
display: contents | 래퍼 제거 |
visibility: hidden | 숨기지만 공간 유지 |
opacity: 0 | 투명 |
position: static | 기본 위치 |
position: relative | 정상 위치 기준 |
position: absolute | 위치 지정된 부모 기준 |
position: fixed | 뷰포트 기준 |
position: sticky | 스크롤 시 고정 |
top / right / bottom / left | 오프셋 속성 |
inset: 0 | 모든 오프셋 단축 |
z-index: 10 | 쌓임 순서 |
display: flex | 플렉스박스 활성화 |
flex-direction: row | column | 주축 방향 |
flex-wrap: wrap | nowrap | 줄바꿈 허용 |
flex-flow: row wrap | 방향 + 줄바꿈 단축 |
justify-content: flex-start | 주축 정렬 |
justify-content: center | 주축 중앙 |
justify-content: space-between | 항목 사이 공간 |
justify-content: space-around | 항목 주위 공간 |
justify-content: space-evenly | 동일 공간 |
align-items: stretch | center | 교차축 정렬 |
align-content | 줄바꿈된 라인 정렬 |
gap: 10px | 항목 간 간격 |
flex: 1 | 공간 채우기 성장 |
flex: 0 0 auto | 성장 축소 기준 |
flex-grow: 1 | 성장 비율 |
flex-shrink: 0 | 축소 방지 |
flex-basis: 200px | 초기 크기 |
align-self: center | align-items 재정의 |
order: -1 | 시각적 순서 변경 |
display: grid | 그리드 활성화 |
grid-template-columns: 1fr 1fr 1fr | 열 정의 |
grid-template-columns: repeat(3, 1fr) | 열 반복 |
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) | 반응형 열 |
grid-template-rows | 행 정의 |
grid-auto-rows: minmax(100px, auto) | 자동 행 크기 |
gap: 20px | 그리드 간격 |
row-gap / column-gap | 개별 간격 |
grid-template-areas | 이름 있는 그리드 영역 |
justify-items / align-items | 모든 항목 정렬 |
place-items: center | 항목 중앙 정렬 (둘 다) |
grid-column: 1 / 3 | 열 범위 (시작/끝) |
grid-column: span 2 | 2열 차지 |
grid-row: 1 / 3 | 행 범위 |
grid-area: header | 이름 있는 영역 |
justify-self / align-self | 개별 항목 정렬 |
place-self: center | 개별 항목 중앙 |
font-family: sans-serif | 폰트 패밀리 |
font-size: 16px | 1rem | 폰트 크기 |
font-weight: 400 | bold | 폰트 두께 |
font-style: italic | 기울임체 |
font: 16px/1.5 sans-serif | 폰트 단축 |
line-height: 1.5 | 줄 높이 |
letter-spacing: 0.05em | 자간 |
word-spacing: 4px | 단어 간격 |
color: #333 | 텍스트 색상 |
text-align: left | center | right | 텍스트 정렬 |
text-decoration: underline | none | 텍스트 장식 |
text-transform: uppercase | 텍스트 변환 |
text-indent: 2em | 첫 줄 들여쓰기 |
text-shadow: 1px 1px 2px #000 | 텍스트 그림자 |
white-space: nowrap | 줄바꿈 방지 |
word-break: break-word | 긴 단어 줄바꿈 |
overflow-wrap: break-word | 오버플로우 줄바꿈 |
text-overflow: ellipsis | 오버플로우 말줄임 |
#ff0000 | #f00 | 16진수 색상 |
rgb(255, 0, 0) | RGB 색상 |
rgba(255, 0, 0, 0.5) | 알파 포함 RGB |
hsl(0, 100%, 50%) | HSL 색상 |
hsla(0, 100%, 50%, 0.5) | 알파 포함 HSL |
transparent | 투명 |
currentColor | 현재 텍스트 색상 |
background-color: #fff | 배경 색상 |
background-image: url(...) | 배경 이미지 |
background-size: cover | contain | 배경 크기 |
background-position: center | 배경 위치 |
background-repeat: no-repeat | 배경 반복 |
background: linear-gradient(to right, #f00, #00f) | 선형 그라디언트 |
background: radial-gradient(circle, #f00, #00f) | 방사형 그라디언트 |
transition: all 0.3s ease | 전환 단축 |
transition-property | 애니메이트할 속성 |
transition-duration: 0.3s | 전환 지속시간 |
transition-timing-function: ease | 이징 함수 |
animation: name 1s infinite | 애니메이션 단축 |
@keyframes name { from {} to {} } | 키프레임 정의 |
transform: translateX(10px) | 수평 이동 |
transform: translateY(10px) | 수직 이동 |
transform: translate(10px, 20px) | 양축 이동 |
transform: scale(1.5) | 요소 확대/축소 |
transform: rotate(45deg) | 요소 회전 |
transform: skew(10deg) | 요소 기울이기 |
transform-origin: center | 변환 기준점 |
filter: blur(5px) | 블러 효과 |
filter: brightness(1.2) | 밝기 |
filter: contrast(1.2) | 대비 |
filter: grayscale(100%) | 그레이스케일 |
filter: drop-shadow(2px 2px 4px #000) | 드롭 섀도우 |
box-shadow: 0 4px 6px rgba(0,0,0,0.1) | 박스 그림자 |
backdrop-filter: blur(10px) | 배경 블러 |
mix-blend-mode: multiply | 블렌드 모드 |
@media (min-width: 768px) { } | 최소 너비 쿼리 |
@media (max-width: 768px) { } | 최대 너비 쿼리 |
@media (prefers-color-scheme: dark) | 다크 모드 |
@media (prefers-reduced-motion) | 모션 감소 |
@media print { } | 인쇄 스타일 |
--color-primary: #007bff | 변수 정의 |
var(--color-primary) | 변수 사용 |
var(--color, #000) | 폴백이 있는 변수 |
:root { --var: value } | 전역 변수 |
rem | 루트 폰트 크기 기준 |
em | 부모 폰트 크기 기준 |
vw / vh | 뷰포트 너비/높이 % |
dvh / svh / lvh | 동적/작은/큰 뷰포트 |
ch | "0" 문자 너비 |
clamp(min, preferred, max) | 클램프 값 |
min() / max() | 최소/최대 함수 |
calc(100% - 20px) | 값 계산 |
$color: #fff | 변수 |
.parent { .child { } } | 중첩 |
&:hover | 부모 선택자 |
&--modifier | BEM 수정자 |
#{$var} | 보간 |
@mixin name { } | 믹스인 정의 |
@mixin name($arg) { } | 인자 있는 믹스인 |
@include name | 믹스인 사용 |
@function name($x) { @return $x * 2 } | 함수 정의 |
@extend .class | 다른 클래스 확장 |
@if $condition { } | if 문 |
@else if { } @else { } | else if/else |
@for $i from 1 through 3 { } | for 루프 |
@each $item in $list { } | each 루프 |
@while $condition { } | while 루프 |
@use "module" | 모듈 임포트 (신규) |
@use "module" as m | 네임스페이스로 임포트 |
@forward "module" | 모듈 재내보내기 |
@import "file" | 임포트 (사용 중단) |