CSS Referencebook

속성 설명
align-content 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스박스의 교차축, 그리드의 블록 축을 따라 배치하는 방식을 결정합니다.
align-items 설정 align-self그룹으로 모든 직계 자식에 대한 값입니다.
align-self 교차축 기준으로, 아이템 자체를 정렬합니다.
all unicode-bidi, direction, CSS 사용자 지정 속성을 제외한 모든 속성을 초기화합니다.
animation 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다.
animation-delay 애니메이션이 시작할 시점을 지정합니다.
animation-direction 애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정합니다.
animation-duration 태그는 더 이상 사용하지 않고, 사용해서도 안되는 오래된 HTML 요소입니다.
animation-fill-mode 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정합니다.
animation-iteration-count 애니메이션 시퀀스가 중단 전에 재생 횟수를 설정한다.
animation-name 하나 이상의 이름 지정 AT-규칙 애니메이션 또는 애니메이션 기술이 소자에 적용한다.
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-bottom-left-radius 코너의 곡률을 규정하는 타원의 반경을 지정하여 소자의 좌측 하단 모서리를 둥글게 한다.
border-bottom-right-radius 코너의 곡률을 규정하는 타원의 반경 (또는 세미 메이저 및 세미 마이너 축의 반경)을 지정하여 소자의 오른쪽 하단 모서리를 둥글게 한다
border-bottom-style 요소 테두리의 아래쪽 스타일을 지정합니다.
border-bottom-width 요소의 아래 테두리 너비를 지정합니다.
border-collapse 표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정합니다.
border-color 모든면의 테두리를 설정합니다.
border-image 요소의 주위에 이미지를 그립니다. 일반 테두리를 대체합니다.
border-image-outset 요소의 테두리 상자와 테두리 이미지의 거리를 설정합니다.
border-image-repeat 원본 이미지의 모서리 영역을 요소의 테두리 이미지 크기에 맞춰 조절할 때 사용할 방법을 지정합니다.
border-image-slice border-image-source로 설정한 이미지를 여러 개의 영역으로 나눕니다. 이렇게 나눠진 영역이 요소의 테두리 이미지를 이룹니다.
border-image-source 요소의 테두리 이미지로 사용할 원본 이미지를 지정합니다.
border-image-width 요소 테두리 이미지의 너비를 설정합니다.
border-left 요소의 왼쪽 테두리를 설정합니다.
border-left-color 요소의 왼쪽 테두리를 설정합니다.
border-left-style 요소 테두리의 왼쪽 스타일을 지정합니다.
border-left-width 요소의 왼쪽 테두리 너비를 지정합니다.
border-radius 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다.
border-right 요소의 오른쪽 테두리를 설정합니다.
border-right-color 요소의 오른쪽 테두리 색상을 지정합니다.
border-right-style 요소 테두리의 오른쪽 스타일을 지정합니다.
border-right-width 요소 테두리의 오른쪽 스타일을 지정합니다.
border-spacing 인접한 표 칸의 테두리 간격을 지정합니다.
border-style 요소 테두리 네 면의 스타일을 지정합니다.
border-top 요소의 위쪽 테두리를 설정합니다.
border-top-color 요소의 위쪽 테두리 색상을 지정합니다.
border-top-left-radius 요소의 위쪽 왼쪽 테두리를 둥글게 합니다.
border-top-right-radius 요소의 위쪽 오른쪽 테두리를 둥글게 합니다.
border-top-style 요소 테두리 네 면의 스타일을 지정합니다.
border-top-width 요소의 위쪽 테두리 너비를 지정합니다.
border-width 요소 네 면 테두리의 너비를 설정합니다.
bottom 요소 아래쪽 스타일을 지정합니다.
box-decoration-break 지정 요소가 여러 행, 열 또는 페이지에 걸쳐 깨진 경우 렌더링합니다.
box-shadow 요소의 테두리를 감싼 그림자 효과를 추가합니다.
box-sizing 요소의 너비와 높이를 계산하는 방법을 지정합니다.
caption-side 표(table)의 캡션의 위치를 정하는 속성입니다.
caret-color input 이나 textarea 태그를 이용해 만든 텍스트 박스의 커서(caret) 색깔을 바꾸는 방법입니다.
clear 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다.
clip 요소의 특정 부분만 나오도록 할 수 있습니다.
color 요소의 글씨 및 글씨 장식의 색을 설정합니다
column-count 해당 요소를 몇 개의 칼럼(column)으로 나눌지를 설정합니다.
column-fill 칼럼을 어떻게 채울지 설정합니다.
column-gap 칼럼 사이의 간격을 설정합니다.
column-rule 모든 columns 속성을 이용한 스타일을 한 줄에 설정할 수 있습니다.
column-rule-color 칼럼 사이에 들어갈 라인의 색상을 설정합니다.
column-rule-style 칼럼 사이에 들어갈 라인의 스타일을 설정합니다.
column-rule-width 칼럼 사이에 들어갈 라인의 두께를 설정합니다.
column-span 해당 요소가 몇 개의 칼럼(column)을 병합해서 표현할지를 설정
column-width 칼럼의 너비를 설정합니다.
columns 모든 columns 속성을 이용한 스타일을 한 줄에 설정합니다.
content 생성한 값으로 요소를 대체합니다. content 속성으로 추가한 요소는 "익명 대체 요소"입니다.
counter-increment
counter-reset
cursor 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다.
direction 텍스트가 써지는 방향을 설정합니다.
display 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.
empty-cells
filter 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.
flex 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다.
flex-basis 플렉스 아이템의 초기 크기를 지정합니다.
flex-direction 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다.
flex-flow flex-direction, flex-wrap 속성의 단축 속성입니다.
flex-grow flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다.
flex-shrink flex-item 요소의 flex-shrink 값을 설정하는 속성입니다.
flex-wrap flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다.
float 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.
font font-style, font-variant, font-weight, font-size, line-height, font-family의 단축 속성입니다.
font-family 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을 지정할 수 있게 해줍니다.
font-size 폰트의 크기를 지정합니다.
font-size-adjust
font-stretch
font-style 글씨체를 설정한다
font-variant 텍스트에 포함된 영문자 중 소문자만을 작은 대문자(small-caps) 글꼴로 변경한다.
font-weight 폰트(font)의 가중치(weight)나 굵기(boldness)를 명시한다.
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas 아이템의 위치를 설정합니다.
grid-template-columns
grid-template-rows
hanging-punctuation
height 요소의 높이를 지정합니다.
hyphens 여러 줄에 걸치는 텍스트에서 단어에 붙임표를 추가하는 방식을 설정합니다.
isolation 요소가 새로운 쌓임 맥락을 생성해야 하는지 지정합니다.
justify-content
left
letter-spacing 글자 사이의 간격을 조절합니다.
line-height 텍스트의 줄 간격을 설정합니다.
list-style
list-style-image
list-style-position
list-style-type
margin 요소의 네 방향 바깥 여백 영역을 설정합니다.
margin-bottom 요소의 아래쪽에 바깥 여백 영역margin area을 설정합니다.
margin-left 요소의 왼쪽에 바깥 여백 영역margin area을 설정합니다.
margin-right 요소의 오른쪽에 바깥 여백 영역margin area을 설정합니다.
margin-top 요소의 위쪽에 바깥 여백 영역margin area을 설정합니다.
max-height 요소의 최대 세로값을 설정합니다.
max-width 요소의 최대 가로값을 설정합니다.
min-height 최소 세로값을 설정합니다.
min-width 최소 가로값을 설정합니다.
mix-blend-mode 배경의 혼합 상태를 정의합니다.
object-fit 태그의 위치를 정의합니다.
object-position 태그의 위치를 정의합니다.
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
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축 순서를 지정합니다.