[CSS] CSS 주요 속성 정리

 

레이아웃 및 포지셔닝 속성

display	요소의 표시 방식	block, inline, inline-block, flex, grid, table, inline-table, none
position	요소 위치 지정	static, relative, absolute, fixed, sticky
top, right, bottom, left	요소 위치 조정	10px, 50%, auto
visibility	요소 표시 여부	visible, hidden, collapse
opacity	요소 투명도	0 ~ 1
z-index	요소 쌓임 순서	0, 1, -1, auto

박스 모델 속성

width, height	요소 크기	200px, 50%, auto, fit-content
max-width, min-width, max-height, min-height	요소 크기 제한	500px, 100%, none
padding	내부 여백	10px, 5% 10%, 1rem 2rem 3rem 4rem
margin	외부 여백	20px, auto, 5vh 10vw
box-sizing	크기 계산 방식	content-box, border-box
outline	요소 외곽선	1px solid black, none

텍스트 및 타이포그래피 속성

font-family	글꼴	Arial, sans-serif, 'Times New Roman'
font-size	글자 크기	16px, 1.2rem, larger, smaller
font-style	글자 스타일	normal, italic, oblique
font-weight	글자 굵기	normal, bold, 100 ~ 900
color	글자 색상	red, #000000, rgb(0,0,0), hsl(0, 100%, 50%)
text-align	텍스트 정렬	left, right, center, justify
text-transform	텍스트 대소문자	uppercase, lowercase, capitalize
text-decoration	텍스트 장식	underline, overline, line-through
line-height	줄 간격	1.5, 24px, 150%
letter-spacing	글자 간격	1px, 0.1em
word-spacing	단어 간격	2px, 0.5em
text-overflow	텍스트 넘침	clip, ellipsis

배경 및 그래픽 속성

background-color	배경 색상	white, transparent, rgba(0,0,0,0.5)
background-image	배경 이미지	url('image.jpg'), linear-gradient(...)
background-repeat	배경 이미지 반복	repeat, no-repeat, repeat-x, repeat-y
background-position	배경 이미지 위치	center, top left, 50% 50%
background-size	배경 이미지 크기	cover, contain, 100% 100%
border	테두리 스타일	1px solid black
border-color	테두리 색상	red, #FF0000
border-style	테두리 스타일	solid, dashed, dotted, double
border-radius	모서리 둥글기	5px, 50%, 1rem
box-shadow	그림자 효과	2px 2px 5px rgba(0,0,0,0.3)

Flexbox 속성

flex-direction	정렬 방향	row, row-reverse, column, column-reverse
justify-content	주축 아이템 정렬	flex-start, flex-end, center, space-between, space-around
align-items	교차축 아이템 정렬	stretch, flex-start, flex-end, center, baseline
align-content	여러 줄 정렬	flex-start, flex-end, center, space-between
align-self	개별 아이템 정렬	auto, flex-start, flex-end, center
flex-grow	아이템 확장 비율	0, 1, 2
flex-shrink	아이템 축소 비율	0, 1
flex-basis	아이템 기본 크기	auto, 100px, 50%

Grid 속성

grid-template-columns	열 구조	1fr 2fr, repeat(3, 1fr), 200px 1fr 200px
grid-template-rows	행 구조	100px 200px auto, repeat(2, 1fr)
grid-gap, column-gap, row-gap	그리드 간격	10px, 1rem, 5% 2%
grid-template-areas	그리드 영역	"header header" "sidebar main"
grid-column	열 병합	1 / 3, span 2
grid-row	행 병합	1 / 3, span 2
justify-items, align-items	그리드 아이템 정렬	start, end, center, stretch

애니메이션 및 변형 속성

transition	속성 전환 효과	all 0.3s ease, opacity 0.5s linear
transform	요소 변형	scale(1.1), rotate(45deg), translate(50px, 100px)
@keyframes	애니메이션 정의	@keyframes move { 0% {...} 100% {...} }
animation	애니메이션 설정	move 2s infinite linear

미디어 쿼리 및 반응형 디자인

max-width, min-width	뷰포트 크기 제한	768px, 1200px
@media	반응형 브레이크포인트	@media (max-width: 600px) { ... }
viewport	반응형 메타 태그	width=device-width, initial-scale=1