CSS 레퍼런스 북

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