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 backdrop-visibility 속성은 요소 뒷면 출력 여부 설정합니다.
background background 속성은 태그의 배경을 지정하는 속성입니다.
background-attachment background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다.
background-blend-mode background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다.
background-clip background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정합니다.
background-color background-color 속성은 지정된 색으로 border와 padding을 포함한 영역을 칠합니다.
(margin영역 제외)
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-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-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-shadow
box-sizing box-sizing 속성은 요소 크기에 패딩 포함 여부를 설정합니다.
caption-side
caret-color
clear clear 속성은 float 요소의 성질을 차단합니다.
clip
color 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 cursor 속성은 마우스 커서의 형태를 지정해줍니다.
direction direction 속성은 문장의 방향을 설정합니다.
display display 속성은 화면에 어떻게 드러나게 할지를 결정합니다.
empty-cells
filter
flex flex 속성은 콘텐츠의 성질을 flex로 정의합니다.
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-stretch
font-style font-style 속성은 글꼴, 스타일, 굵기, 사이즈를 한꺼번에 지정하거나 각각 지정할 수 있습니다.
font-variant
font-weight font-weight 속성은 글자 굵기를 설정합니다.
grid grid 속성을 일괄 설정 하는 단축 속성입니다.
(grid-template-xxx, grid-auto-xxx)
grid-area grid-area 속석은 영역 이름을 설정하거나, grid-row와 grid-column의 단축 속성입니다.
grid-auto-columns grid-auto-columns 속성은 암시적인 열의 크기를 정의합니다.
grid-auto-flow grid-auto-flow 속성은 자동 배치 알고리즘 방식을 정의합니다.
grid-auto-rows grid-auto-rows 속성은 암시적인 행의 크기를 정의합니다.
grid-column grid-column 속성은 grid-column-xxx의 단축 속성(열 시작/끝 위치)입니다.
grid-column-end grid-column-end 속성은 그리드 아이템의 열 끝 위치 지정합니다.
grid-column-gap grid-column-gap 속성은 행과 행 사이의 간격을 정의합니다.
grid-column-start grid-column-start 속성은 그리드 아이템의 열 시작 위치 지정합니다.
grid-gap grid-gap 속성은 xxx-gap의 단축 속성입니다.
grid-row grid-row 속성은 grid-row-xxx의 단축 속성(행 시작/끝 위치)입니다.
grid-row-end grid-row-end 속성은 그리드 아이템의 행 끝 위치 지정합니다.
grid-row-gap grid-row-gap 속성은 열과 열 사이의 간격을 정의합니다.
grid-row-start grid-row-start 속성은 그리드 아이템(Item)의 행 시작 위치 지정합니다.
grid-template grid-template 속성은 grid-template-xxx의 단축 속성입니다.
grid-template-areas grid-template-areas 속성은 영역 이름을 참조해 템플릿을 생성합니다.
grid-template-columns grid-template-columns 속성은 명시적 열의 크기를 정의합니다.
grid-template-rows grid-template-rows 명시적 행의 크기를 정의합니다.
hanging-punctuation
height height 속성은 콘텐츠 요소의 세로값을 설정합니다.
hyphens
isolation
justify-content justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
justify-items justify-items 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
justify-self justify-self 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
left
letter-spacing
line-height line-height 속성은 문장과 문장 사이의 간격을 설정합니다.
list-style list-style 속성은 목록 스타일 속성을 설정합니다.
list-style-image
list-style-position
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 max-width 속성은 요소의 최소 가로 값을 설정합니다.
mix-blend-mode
object-fit
object-position
opacity
order order 속성은 flex 콘텐츠의 순서를 정의합니다.
outline
outline-color
outline-offset
outline-style
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-before
page-break-inside
perspective
perspective-origin
place-content place-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
place-items place-items 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
place-self place-self 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
pointer-events
position position 속성은 요소의 위치를 설정합니다.
quotes
resize
right right 속성은 위치 요소의 오른쪽 속성을 설정합니다.
tab-size
table-layout
text-align text-align 속성은 텍스트의 정렬 방향을 의미합니다.
text-align-last
text-decoration text-decoration 속성은 글씨의 장식(선) 색을 지정합니다.
text-decoration-color
text-decoration-line
text-decoration-style
text-indent text-indent 속성은 문단 들여쓰기 속성을 설정합니다.
text-justify
text-overflow
text-shadow
text-transform text-transform 속성은 텍스트를 대문자나 소문자로 변경합니다.
top top 속성은 위치 요소의 위쪽 속성을 설정합니다.
transform transform 속성은 요소의 움직임을 일괄적으로 설정합니다.
transform-origin transform-origin 속성은 요소의 움직임 방향을 설정합니다
transform-style transform-style 속성은 요소의 움직임 스타일을 설정합니다.
transition transition 속성은 요소의 움직임 시간을 일괄적으로 설정합니다.
transition-delay ransition-delay 속성은 요소의 움직임 지연 시간을 설정합니다.
transition-duration transition-duration 속성은 요소의 움직임 지속 시간을 설정합니다.
transition-property transition-property 속성은 요소의 움직임 속성을 설정합니다.
transition-timing-function transition-timing-function 속성은 요소의 움직임 기능을 설정합니다.
unicode-bidi
user-select
vertical-align vertical-align 속성은 텍스트의 상하 정렬 방식을 설정합니다.
visibility
white-space white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다.
width width 속성은 요소의 가로 값을 정의합니다.
word-break
word-spacing
word-wrap
z-index z-index 속성은 요소의 위치가 겹칠 경우 순서를 정의합니다.
zoom zoom 속성은 원하는 요소(태그)의 크기를 확대하거나 축소(조절)하게 해줍니다.