CSS 주요 속성과 값

1. 레이아웃 및 박스 모델

속성	값 예시	설명
display	block, inline, flex, grid, none	요소의 표시 방식을 설정
position	static, relative, absolute, fixed, sticky	요소의 위치 지정 방법을 설정
top, right, bottom, left	auto, 10px, 50%	position 속성에 따라 요소를 이동
z-index	auto, 1, 9999	요소의 쌓임 순서를 결정
float	left, right, none	요소를 왼쪽 또는 오른쪽으로 배치
clear	left, right, both, none	float된 요소 다음에 오는 요소의 배치를 결정
overflow	visible, hidden, scroll, auto	요소의 내용이 넘칠 때 처리 방법 지정
box-sizing	content-box, border-box	박스 크기 계산 방식을 결정
width, height	auto, 100px, 50%, vw, vh	요소의 너비 및 높이 설정
max-width, max-height	none, 500px, 80%	요소의 최대 너비 및 높이 지정
min-width, min-height	0, 100px	요소의 최소 너비 및 높이 지정

2. 여백 및 패딩

속성	값 예시	설명
margin	auto, 10px, 10px 20px, 10%	요소 바깥쪽 여백 설정
margin-top, margin-right, margin-bottom, margin-left	10px, auto	개별 여백 설정
padding	0, 15px, 10px 20px	요소 안쪽 여백 설정
padding-top, padding-right, padding-bottom, padding-left	10px	개별 패딩 설정

3. 테두리 및 그림자

속성	값 예시	설명
border	1px solid black, none	테두리 설정
border-width	1px, thin, thick	테두리 두께 지정
border-style	solid, dashed, dotted, double, none	테두리 스타일 지정
border-color	red, #000, rgb(0,0,0)	테두리 색상 지정
border-radius	5px, 50%	둥근 테두리 설정
box-shadow	10px 10px 5px gray, none	요소에 그림자 추가

4. 배경

속성	값 예시	설명
background	red, url(image.jpg), linear-gradient(to right, red, blue)	배경 속성 일괄 설정
background-color	transparent, #fff, rgba(0,0,0,0.5)	배경 색상 설정
background-image	none, url(image.png), linear-gradient(red, blue)	배경 이미지 설정
background-position	top left, center, 50% 50%	배경 이미지 위치 지정
background-size	auto, cover, contain, 100px 50px	배경 이미지 크기 설정
background-repeat	repeat, no-repeat, repeat-x, repeat-y	배경 이미지 반복 여부 설정
background-attachment	scroll, fixed, local	배경 이미지 스크롤 방식 지정

5. 글꼴 및 텍스트

속성	값 예시	설명
font-family	Arial, sans-serif, "Times New Roman", serif	글꼴 지정
font-size	16px, 1.2em, 120%	글자 크기 지정
font-weight	normal, bold, lighter, bolder, 100, 900	글자 두께 설정
font-style	normal, italic, oblique	글자 스타일 지정
text-align	left, right, center, justify	텍스트 정렬 방식 설정
text-decoration	none, underline, line-through, overline	텍스트 장식 설정
text-transform	none, uppercase, lowercase, capitalize	대소문자 변환 방식 지정

6. 유연한 박스(Flexbox)

속성	값 예시	설명
display	flex, inline-flex	요소를 플렉스 컨테이너로 설정
flex-direction	row, row-reverse, column, column-reverse	아이템 배치 방향 지정
justify-content	flex-start, flex-end, center, space-between, space-around, space-evenly	가로축 정렬 방식 설정
align-items	flex-start, flex-end, center, stretch, baseline	세로축 정렬 방식 설정
flex-wrap	nowrap, wrap, wrap-reverse	아이템 줄 바꿈 여부 지정

7. 애니메이션 및 전환

속성	값 예시	설명
transition	all 0.3s ease-in-out	속성 변화 애니메이션 설정
transition-duration	0.5s, 200ms	변화 지속 시간 설정
animation	fadeIn 2s infinite	애니메이션 설정
animation-name	fadeIn, slide	사용할 애니메이션 이름 설정
animation-duration	1s, 500ms	애니메이션 지속 시간 설정