CSS 레퍼런스 북

속성 설명
align-content align-content 속성은 콘텐츠의 상하 관계 정렬 상태를 설정합니다.
align-items align-items 속성은 콘텐츠 내부의 정렬 상태를 설정합니다.
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
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 속성은 백그라운드 이미지의 반복 여부를 설정합니다./td>
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-shadow
box-sizing box-sizing 속성은 웹브라우저별 박스의 width, height을 계산하는 방식의 차이를 해결할 때 사용합니다. (ex) box-sizing:border-box : 보더값을 빼겠다 라는 뜻)
caption-side
caret-color
clear
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
direction
display display 속성은 요소를 어떻게 표시할지 선택할 때 사용합니다.
empty-cells
filter
flex flex 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다.
flex-basis
flex-direction flex-direction 속성은 플렉스 아이템의 방향을 지정할 때 사용합니다.
flex-flow
flex-grow
flex-shrink
flex-wrap flex-wrap 속성은 나열된 요소들의 총 넓이가 부모 넓이보다 클 때, 요소들을 다음 줄에 이어서 정렬 해줄 때 사용합니다.
float
font font 속성은 요소의 글꼴을 설정할 때 사용합니다.
font-family font-family 속성은 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을 지정할 수 있게 해줍니다.
font-size font-size 속성은 글꼴의 크기를 설정할 때 사용합니다.
font-size-adjust
font-stretch
font-style font-style 속성은 글꼴, 스타일, 굵기, 사이즈를 한꺼번에 지정하거나 각각 지정할 때 사용합니다.
font-variant
font-weight
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 height 속성은 요소의 높이를 지정할 때 사용합니다.
hyphens
isolation
justify-content justify-content 속성은 기본축의 양쪽 끝단을 기준으로, 아이템을 어떻게 균등하게 배분 정렬할지 결정할 때 사용합니다.
left left 속성은 요소의 왼쪽 위치 값을 설정할 때 사용합니다.
letter-spacing letter-spacing 속성은 글자 사이의 간격을 조절 할 때 사용합니다.
line-height line-height 속성은 라인 박스의 높이를 정할 때 사용합니다.
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-width max-width 속성은 요소의 최대 가로 크기를 설정할 때 사용합니다.
min-height
min-width min-width 속성은 요소의 최소 가로 크기를 설정할 때 사용합니다.
mix-blend-mode
object-fit
object-position
opacity opacity 속성은 요소를 투명하게 만들때 사용합니다.
order
outline outline 속성은 HTML 요소의 가장 바깥 부분을 둘러싸고 있는 아웃라인 부분의 스타일을 지정할 때 사용합니다.
outline-color
outline-offset
outline-style
outline-width
overflow overflow 속성은 요소 내의 내용이 크기가 정해진 요소 영역보다 넘치는 경우에 처리할 방식을 설정할 때 사용합니다.
overflow-x overflow-x 속성은 정해진 크기의 요소 내 내용이 넘치는 경우, 가로 방향으로 어떻게 처리할 것인지를 설정합니다.
overflow-y
padding padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정할 때 사용합니다.
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
pointer-events
position position 속성은 HTML 요소의 위치를 결정할 때 사용합니다.
quotes
resize
right right 속성은 요소의 오른쪽으로 부터의 여백을 설정할 때 사용합니다.
tab-size
table-layout 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-justify
text-overflow
text-shadow
text-transform text-transform 속성은 텍스트의 대소문자 설정을 할 때 사용합니다.

uppercase - 모두 대문자로 변환

lowercase - 모두 소문자로 변환

capitalize - 각 단어의 첫 문자를 대문자로 변환

none - 대문자 없이 그대로 화면에 렌더링
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align vertical-align 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다.
visibility
white-space
width width 속성은 요소의 너비를 설정할 때 사용합니다.
word-break
word-spacing
word-wrap
z-index z-index 속성은 position 속성 값이 relative, absolute, fixed로 설정된 요소의 쌓이는 순서를 설정할 때 사용합니다.