[CSS] CSS 속성 종류 정리

CSS에서 지정 가능한 속성값들에 대해 정리합니다. 지속적으로 갱신됩니다.

(길이 단위는 px, em, %, ch 등을 포함합니다)

크기

이름	속성값	예시	입력값
height	높이	d	길이
margin	바깥쪽 여백	a           :  공통 a b        :  상/하 | 좌/우 a b c     :  상 | 좌/우 | 하 a b c d  :  상 | 우 | 하 | 좌	길이
min-height	최소 높이	d	길이
min-width	최소 너비	d	길이
padding	안쪽 여백	a           :  공통 a b        :  상/하 | 좌/우 a b c     :  상 | 좌/우 | 하 a b c d  :  상 | 우 | 하 | 좌	길이
width	너비	d	길이

레이아웃

이름	속성값	예시	입력값
display	레이아웃 정렬 방식	block  :  한 줄을 전부 차지 none  :  객체 없음 inline  :  내용의 길이에 따라 크기가 달라짐 inline-block  : 인접한 inline과는 같은 줄에 표시되는 block flex  :  flex 방식 레이아웃 배치 grid  :  grid 방식 레이아웃 배치	문자열
left	x좌표	d	길이
overflow	내용이 틀을 넘을 때 관리 방법	auto  :  크기를 넘을 때만 스크롤 표시 clip : 넘은 부분을 보이지 않게 숨김 hidden  :  넘은 요소를 보이지 않게 숨김 scroll  :  스크롤 표시	문자열
position	위치 속성	static  :  기본값 absolute  :  절대 좌표 relative  :  absolute 요소의 기준 좌표가 됨	문자열
scroll-behavior	스크롤 속도	auto  :  일반 smooth  :  가속 붙음	문자열
top	y좌표	d	길이
z-index	화면에 보이는 순서	d	길이

색상

이름	속성값	예시	입력값
background	배경 옵션 (색, 이미지 등)	#dddddd  image('image url')  no-repeat
background-color	배경 색	#dddddd white rgb(d, d, d)	16진수 문자열 튜플
color	글자 색	#dddddd white rgb(d, d, d)	16진수 문자열 튜플

영역

이름	속성값	예시	입력값
border	테두리	none  :  선 없음 dotted  :  짧은 점선 dashed  :  긴 점선 solid  :  실선 double  :  이중 실선 (borderWidth > 3px) groove  :  3D 선 ridge  :  양각 테두리 inset  : 음각 영역 outset  :  양각 영역	문자열
border-radius	테두리 곡률	d	길이

글자

이름	속성값	예시	입력값
font	글꼴	Arial	문자열
font-size	크기	d	길이
font-weight	굵기	bold  :  굵게 normal  :  중간 lighter  :  얇게 100 ~ 900  :  숫자가 클 수록 굵어짐	문자열 숫자
letter-spacing	자간	d	길이
line-height	글자 높이	d	길이
text-align	정렬	center  :  가운데 left  :  왼쪽 right  :  오른쪽	문자열
white-space	줄바꿈	nowrap  : 줄바꿈 안함	문자열