[CSS] CSS 속성 Reference

CSS

CSS 캐스케이딩 스타일 시트(Cascading Style Sheets) 언어입니다.

---

CSS 속성

CSS 속성

속성	설명
align-content	align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다.
align-items	align-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다.
align-self	align-self 속성은 콘텐츠의 정렬 상태를 정의합니다.
all	all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다.
animation	animation 속성은 애니메이션을 정의합니다.
animation-delay	animation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다.
animation-direction	animation-direction 속성은 애니메이션 움직임 방향을 설정합니다.
animation-duration	animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.
animation-fill-mode	animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다.
animation-iteration-count	animation-iteration-count 속성은 애니메이션 반복 횟수 설정합니다.
animation-name	animation-name 속성은 애니메이션 keyframe 이름을 설정합니다.
animation-play-state	animation-play-state 속성은 애니메이션 진행상태를 설정합니다.
animation-timing-function	animation-timing-function 속성은 움직임의 속도를 정의합니다.
backface-visibility	backface-visibility 속성은 요소의 뒷면을 정의합니다.
background	background 속성은 배경 속성 값을 정의합니다.
background-attachment	background-attachment 속성은 배경이미지의 고정여부를 설정하기 위한 속성입니다.
background-blend-mode	background-blend-mode 속성은 배경이미지의 고정여부를 설정하기 위한 속성입니다.
background-clip	background-clip 속성은 배경이미지의 고정여부를 설정하기 위한 속성입니다.
background-color	background-color 속성은 백그라운 색을 설정합니다.
background-image	background-image 속성은 백그라운 색을 설정합니다.
background-origin	background-origin 속성은 백그라운 색을 설정합니다.
background-position	background-position 속성은 백그라운 이미지의 위치 영역을 설정합니다.
background-repeat	background-repeat 속성은 백그라운 이미지 반복여부를 설정합니다.
background-size	background-size 속성은 백그라운드 이미지 사이즈를 설정합니다.
border	border 속성은 테두리 속성을 설정합니다.
border-bottom	border-bottom 속성은 테두리 아래쪽 테두리 속성을 설정합니다.
border-bottom-color	border-bottom-color 속성은 테두리 아래쪽 색 속성을 설정합니다.
border-bottom-left-radius	border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다.
border-bottom-right-radius	border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다.
border-bottom-style	border-bottom-style 속성은 아래쪽 테두리 스타일 속성을 설정합니다.
border-bottom-width	border-bottom-width 속성은 아래쪽 테두리 두께 속성을 설정합니다.
border-collapse	border-collapse 속성은 테이블의 테두리 분리여부를 정의합니다.
border-color	border-color 속성은 테두리 색 속성을 설정합니다.
border-image	border-image 속성은 테두리 이미지 속성을 설정합니다.
border-image-outset	border-image-outset 속성은 테두리 이미지 간격 속성을 설정합니다.
border-image-repeat	border-image-repeat 속성은 테두리 이미지 반복 속성을 설정합니다.
border-image-slice	border-image-slice 속성은 테두리 이미지 크기 속성을 설정합니다.
border-image-source	border-image-source 속성은 테두리 이미지 경로 속성을 설정합니다.
border-image-width	border-image-width 속성은 테두리 이미지 두께 속성을 설정합니다.
border-left	border-left 속성은 왼쪽 테두리 속성을 설정합니다.
border-left-color	border-left-color 속성은 왼쪽 테두리 색 속성을 설정합니다.
border-left-style	border-left-style 속성은 왼쪽 테두리 스타일 속성을 설정합니다.
border-left-width	border-left-width 속성은 왼쪽 테두리 두께 속성을 설정합니다.
border-radius	border-radius 속성은 모서리 굴곡을 설정합니다.
border-right	border-right 속성은 오른쪽 테두리 속성을 설정합니다.
border-right-color	border-right-color 속성은 오른쪽 테두리 색 속성을 설정합니다.
border-right-style	border-right-style 속성은 오른쪽 테두리 스타일 속성을 설정합니다.
border-right-width	border-right-width 속성은 오른쪽 테두리 두께 속성을 설정합니다.
border-spacing	border-spacing 속성은 테이블의 테두리 간격을 설정합니다.
border-style	border-style 속성은 테두리 스타일 속성을 설정합니다.
border-top	border-top 속성은 위쪽 테두리 속성을 설정합니다.
border-top-color	border-top-color 속성은 위쪽 테두리 색 속성을 설정합니다.
border-top-left-radius	border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다.
border-top-right-radius	border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다.
border-top-style	border-top-style 속성은 위쪽 테두리 스타일 속성을 설정합니다.
border-top-width	border-top-width 속성은 위쪽 테두리 두께 속성을 설정합니다.
border-width	border-width 속성은 테두리 두께 속성을 설정합니다.
bottom	bottom 속성은 위치 요소의 아래쪽 속성을 설정합니다.
box-decoration-break	box-decoration-break 속성은 컬럼 및 줄바꿈시 테두리와 패딩의 방식을 설정합니다.
box-shadow	box-shadow 속성은 박스 요소의 그림자를 설정합니다.
box-sizing	box-sizing 속성은 크기 및 높이 여부의 포함을 설정합니다.
caption-side	caption-side 속성은 caption의 위치를 설정합니다.
caret-color	caret-color 속성은 input의 커서 색을 정의합니다.
clear	clear 속성은 float 요소의 성질을 차단합니다.
clip	clip 속성은 절대 요소의 위치 값을 지정합니다.
color	color 속성은 글씨 색을 설정합니다.
column-count	column-count 속성은 컬럼의 수를 정의합니다.
column-fill	column-fill 속성은 열의 지정방법을 정의합니다.
column-gap	column-gap 속성은 열의 간격을 정의합니다.
column-rule	column-rule 속성은 컬럼 라인의 가로값, 스타일, 컬러를 정의합니다.
column-rule-color	column-rule-color 속성은 컬럼의 라인 색을 정의합니다.
column-rule-style	column-rule-style 속성은 컬럼 라인의 스타일을 정의합니다.
column-rule-width	column-rule-width 속성은 컬럼 라인의 가로값을 정의합니다.
column-span	column-span 속성은 열의 속성을 정의합니다.
column-width	column-width 속성은 컬럼의 가로 값을 정의합니다.
columns	columns 속성은 열의 폭과 열의 수를 정의합니다.
content	content 속성은 콘텐츠 내용을 설정합니다.
counter-increment	counter-increment 속성은 콘텐츠의 순서 상태를 정의합니다.
counter-reset	counter-reset 속성은 콘텐츠의 숫자를 초기화합니다.
cursor	cursor 속성은 마우스 오버시 마우스 포인터를 정의합니다.
direction	direction 속성은 문장의 방향을 설정합니다.
display	display 속성은 요소의 성질을 정의합니다.
empty-cells	empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다.
filter	filter 속성은 이미지의 비쥬얼 효과를 정의합니다.
flex	flex 속성은 콘텐츠의 성질을 flex로 정의합니다.
flex-basis	flex-basis 속성은 요소의 기본 단위를 정의합니다.
flex-direction	flex-direction 속성은 요소의 정렬 방향을 정의합니다.
flex-flow	flex-flow 속성은 요소의 정렬 방향과 줄 속성을 설정합니다.
flex-grow	flex-grow 속성은 요소의 크기를 숫자를 통해 정의합니다.
flex-shrink	flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다.
flex-wrap	flex-wrap 속성은 요소의 줄 속성을 설정합니다.
float	float 속성은 블록요소의 정렬 상태를 설정합니다.
font	font 속성은 폰트에 관한 설정을 정의합니다.
font-family	font-family 속성은 폰트 종류를 설정합니다.
font-size	font-size 속성은 폰트 사이즈 속성을 설정합니다.
font-size-adjust	font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다.
font-stretch	font-stretch 속성은 폰트의 굵기를 정의합니다.
font-style	font-style 속성은 폰트의 스타일을 정의합니다.
font-variant	font-variant 속성은 글꼴의 변형을 정의합니다.
font-weight	font-weight 속성은 폰트의 두께를 정의합니다.
grid	grid 속성은 그리드 레이아웃을 정의합니다.
grid-area	grid-area
grid-auto-columns	grid-auto-columns
grid-auto-flow	grid-auto-flow
grid-auto-rows	grid-auto-rows
grid-column	grid-column
grid-column-end	grid-column-end
grid-column-gap	grid-column-gap
grid-column-start	grid-column-start
grid-gap	grid-ga
grid-row	grid-row
grid-row-end	grid-row-en
grid-row-gap	grid-row-gap
grid-row-start	grid-row-start
grid-template	grid-template
grid-template-areas	grid-template-areas
grid-template-columns	grid-template-columns
grid-template-rows	grid-template-rows
hanging-punctuation	hanging-punctuation 속성은 글씨의 시작 및 끝의 위치 정의합니다.
height	height 속성은 콘텐츠 요소의 세로값을 설정합니다.
hyphens	hyphens 속성은 텍스트의 하이픈 영역을 설정합니다.
isolation	isolation 속성은 stacking context을 설정합니다.
justify-content	justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
left	left 속성은 위치 요소의 왼쪽 속성을 설정합니다.
letter-spacing	letter-spacing 속성은 글자 사이의 간격을 설정합니다.
line-height	line-height 속성은 문장과 문장 사이의 간격을 설정합니다.
list-style	list-style 속성은 목록 스타일 속성을 설정합니다.
list-style-image	list-style-image 속성은 목록 마커의 이미지를 설정합니다.
list-style-position	list-style-position 속성은 목록 마커의 위치 속성을 설정합니다.
list-style-type	list-style-type 속성은 목록 마커의 유형을 설정합니다.
margin	margin 속성은 요소의 바같쪽 여백을 설정합니다.
margin-bottom	margin-bottom 속성은 요소의 아래 바같쪽 여백을 설정합니다.
margin-left	margin-left 속성은 요소의 왼쪽 바같쪽 여백을 설정합니다.
margin-right	margin-right 속성은 요소의 오른쪽 바같쪽 여백을 설정합니다.
margin-top	margin-top 속성은 요소의 위부분 바같쪽 여백을 설정합니다.
max-height	max-height 속성은 요소의 최대 세로값을 설정합니다.
max-width	max-width 속성은 요소의 최대 가로 값을 설정합니다.
min-height	min-height 속성은 요소의 최소 세로 값을 설정합니다.
min-width	min-width 속성은 요소의 최소 가로 값을 설정합니다.
mix-blend-mode	mix-blend-mode 속성은 배경의 혼합 상태를 정의합니다.
object-fit	object-fit 속성은 <img>, <video> 태그의 크기를 정의합니다.
object-position	object-position 속성은 <img>, <video> 태그의 위치를 정의합니다.
opacity	opacity 속성은 요소의 투명도를 설정합니다.
order	order 속성은 flex 콘텐츠의 순서를 정의합니다.
outline	outline 속성은 아웃라인의 색, 스타일, 두께를 정의합니다.
outline-color	outline-color 속성은 아웃라인의 색을 정의합니다.
outline-offset	outline-offset 속성은 아웃라인의 간격을 정의합니다.
outline-style	outline-style 속성은 아웃라인 스타일을 정의합니다.
outline-width	outline-width 속성은 아웃라인의 두께를 정의합니다.
overflow	overflow 속성은 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다.
overflow-x	overflow-x 속성은 X축을 기준으로 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다.
overflow-y	overflow-y 속성은 Y축을 기준으로 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다.
padding	padding 속성은 요소의 안쪽 여백을 설정합니다.
padding-bottom	padding-bottom 속성은 요소의 아래쪽 여백을 설정합니다.
padding-left	padding-left 속성은 요소의 왼쪽 여백을 설정합니다.
padding-right	padding-right 속성은 요소의 오른쪽 여백을 설정합니다.
padding-top	padding-top 속성은 요소의 위쪽 여백을 설정합니다.
page-break-after	page-break-after 속성은 페이지 인쇄시 분리에 관한 설정을 정의합니다.
page-break-before	page-break-before 속성은 인쇄시 페이지 분리에 관한 설정을 정의합니다.
page-break-inside	page-break-inside 속성은 인쇄시 페이지 분리에 관한 설정을 정의합니다.
perspective	perspective 속성은 3D를 표현할 때 원근점을 정의합니다.
perspective-origin	perspective-origin 속성은 3D를 표현할 때 원근점의 방향을 정의합니다.
pointer-events	pointer-events 속성은 포인터 이벤트 반응을 정의합니다.
position	position 속성은 요소의 위치를 설정합니다.
quotes	quotes 속성은 인용 부호를 정의합니다.
resize	resize 속성은 요소의 사이즈를 정의합니다.
right	right 속성은 위치 요소의 오른쪽 속성을 설정합니다.
tab-size	tab-size 속성은 글씨의 간격을 정의합니다.
table-layout	table-layout 속성은 표의 레이아웃 크기를 정의합니다.
text-align	text-align 속성은 텍스트 정렬 방식을 설정합니다.
text-align-last	text-align-last 속성은 문장의 마지막 텍스트 정렬 방식을 설정합니다.
text-decoration	text-decoration 속성은 글자 라인 속성을 설정합니다.
text-decoration-color	text-decoration-color 속성은 글자 라인 색을 설정합니다.
text-decoration-line	text-decoration-line 속성은 글자 라인 스타일을 설정합니다.
text-decoration-style	text-decoration-style 속성은 글자 스타일을 정의합니다.
text-indent	text-indent 속성은 문단 들여쓰기 속성을 설정합니다.
text-justify	text-justify 속성은 텍스트의 간격을 정의합니다.
text-overflow	text-overflow 속성은 문자열 영역 속성을 설정합니다.
text-shadow	text-shadow 속성은 텍스트에 그림자를 설정합니다.
text-transform	text-transform 속성은 텍스트를 대문자나 소문자로 변경합니다.
top	top 속성은 위치 요소의 위쪽 속성을 설정합니다.
transform	transform 속성은 요소의 움직임을 표현합니다.
transform-origin	transform-origin 속성은 요소의 움직임 방향을 정의합니다.
transform-style	transform-style 속성은 요소의 움직임 스타일을 정의합니다.
transition	transition 속성은 요소의 움직임을 정의합니다.
transition-delay	transition-delay 속성은 요소의 움직임 시간을 지연합니다.
transition-duration	transition-duration 속성은 요소의 움직임 지속시간을 정의합니다.
transition-property	transition-property 속성은 transition의 적용 여부를 정의합니다.
transition-timing-function	transition-timing-function 속성은 요소의 움직임 기능을 정의합니다.
unicode-bidi	unicode-bidi 속성은 글자의 방향 속성을 설정합니다.
user-select	user-select 속성은 요소의 텍스트를 선택할 지 정의합니다.
vertical-align	vertical-align 속성은 텍스트의 상하 정렬 방식을 설정합니다.
visibility	visibility 속성은 요소를 보이지 않게 정의합니다.
white-space	white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다.
width	width 속성은 요소의 가로 값을 정의합니다.
word-break	word-break 속성은 줄바꿈 속성을 설정합니다.
word-spacing	word-spacing 속성은 단어 사이의 간격을 정의합니다.
word-wrap	word-wrap 속성은 줄바꿈을 설정합니다.
z-index	z-index 속성은 요소의 위치가 겹칠 경우 순서를 정의합니다.