CSS 레퍼런스 북

속성 설명
align-content 콘텐츠와 콘텐츠 주위 빈 공간을 배치하는 방식을 설정하는 속성입니다.
align-items 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.
align-self 그리드 또는 플렉스 항목의 값을 재정의합니다.
all CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다.
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-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-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-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 콘텐츠의 위치를 설정하는 속성입니다. 설정한 수치만큼 아래에서 위로 이동합니다.
position: relative와 함께 사용합니다.
box-decoration-break 컬럼 및 줄바꿈시 테두리와 패딩의 방식을 설정합니다.
box-shadow 박스 요소의 그림자를 설정합니다.
box-sizing 요소의 너비와 높이를 계산하는 방법지정 설정합니다.
caption-side 테이블 caption의 위치를 설정합니다.
caret-color input의 커서 색을 정의합니다.
clear 요소가 선행 부동(floating)요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어)야 하는 지를 설정합니다.
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 레이아웃 배치 전용 기능으로 고안된 속성입니다. 요소들을 inline구조로 배치할 수 있습니다.
flex-basis 요소의 기본 단위를 정의합니다.
flex-direction 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)지정을 설정합니다.
flex-flow 요소의 정렬 방향 flex-direction와 줄 속성 flex-wrap을 같이 설정합니다.
flex-grow 요소의 크기를 숫자를 통해 정의합니다.
flex-shrink 요소의 크기를 숫자를 통해 줄여줍니다.
flex-wrap 플렉스 아이템들의 배치를 설정하는 속성입니다.
float 콘텐츠의 위치를 설정하는 속성입니다. 레이아웃을 만들 때 주로 사용합니다.
font 텍스트의 모양을 설정하는 속성입니다.
font-family 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름 지정을 설정하는 속성입니다.
font-size 텍스트의 크기를 설정하는 속성입니다.
font-size-adjust 소문자를 기준으로 폰트 크기를 설정합니다.
font-stretch 폰트의 굵기를 정의합니다.
font-style 텍스트의 기울임 여부를 설정하는 속성입니다.
font-variant 글꼴의 변형을 정의합니다.
font-weight 텍스트의 굵기를 설정하는 속성입니다.
grid grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow 값을 한번에 설정할 수 있습니다.
grid-area grid item의 크기와 위치를 설정해 grid를 배치합니다.
grid-auto-columns grid container의 크기가 설정되지 않은 열에 대한 기본 크기를 설정합니다.
grid-auto-flow 자동 배치 항목이 grid에 삽입되는 방식을 설정합니다.
grid-auto-rows grid container의 크기가 설정되지 않은 행에 대한 기본 크기를 설정합니다.
grid-column 특정 grid item 표시의 시작하고 끝낼 열을 한번에 설정합니다.
grid-column-end 특정 grid item의 표시를 끝낼 열을 설정합니다.
grid-column-gap grid item 간의 열 사이 간격을 설정합니다.
grid-column-start 특정 grid item의 표시를 시작할 열을 설정합니다.
grid-gap grid item 간의 열과 행 사이 간격을 한번에 설정합니다.
grid-row 특정 grid item 표시의 시작하고 끝낼 행을 한번에 설정합니다.
grid-row-end 특정 grid item의 표시를 끝낼 행을 설정합니다.
grid-row-gap grid item 간의 행 사이 간격을 설정합니다.
grid-row-start 특정 grid item의 표시를 시작할 행을 설정합니다.
grid-template grid의 열과 행의 개수와 크기, 셀의 병합을 한번에 설정합니다.
grid-template-areas 명명된 grid 셀의 병합을 설정합니다.
grid-template-columns grid의 열의 개수와 크기를 설정합니다.
grid-template-rows grid의 행의 개수와 크기를 설정합니다.
hanging-punctuation 글씨의 시작 및 끝의 위치 정의합니다.
height 콘텐츠의 높이를 설정하는 속성입니다.
hyphens 텍스트의 하이픈 영역을 설정합니다.
isolation stacking context을 설정합니다.
justify-content 컨테이너 안에 아이템의 항목 사이와 주위 공간 분배 방법을 정의합니다.
left 콘텐츠의 위치를 설정하는 속성입니다. 설정한 수치만큼 왼쪽에서 오른쪽으로 이동합니다.
position: relative와 함께 사용합니다.
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 대체되는 요소의 내용이 지정된 너비와 높이에 맞게 장착되는 방식을 지정합니다.
object-position 오브젝트의 위치를 설정하는 속성입니다.
opacity 요소의 투명도를 제어하는데 사용됩니다.
order 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정합니다.
outline 요소 주위에 윤곽선을 그리는 데 사용됩니다.
outline-color 요소의 윤곽선 색상을 설정하는 데 사용됩니다.
outline-offset 요소 윤곽선의 가장자리 또는 테두리 사이의 간격을 설정합니다.
outline-style 요소의 윤곽선 스타일을 설정하는 데 사용됩니다.
outline-width 요소의 윤곽선 너비를 설정하는 데 사용됩니다.
overflow 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정하는 속성입니다.
overflow-x 요소의 콘텐츠가 너무 커서 블록 수준 요소의 왼쪽, 오른쪽 가장자리를 오버플로할 때 처리법을 지정하는 속성입니다.
overflow-y 요소의 콘텐츠가 너무 커서 블록 수준 요소의 위쪽, 아래쪽 가장자리를 오버플로할 때 처리법을 지정하는 속성입니다.
padding 콘텐츠의 안쪽 영역의 여백을 설정하는 속성입니다.
padding-bottom 콘텐츠 안쪽의 아래쪽 영역의 여백을 설정하는 속성입니다.
padding-left 콘텐츠 안쪽의 왼쪽 영역의 여백을 설정하는 속성입니다.
padding-right 콘텐츠 안쪽의 오른쪽 영역의 여백을 설정하는 속성입니다.
padding-top 콘텐츠 안쪽의 위쪽 영역의 여백을 설정하는 속성입니다.
page-break-after 페이지 인쇄시 적용된 요소 뒤부터 페이지 분리에 관한 설정을 정의합니다.
page-break-before 페이지 인쇄시 적용된 요소 앞부터 페이지 분리에 관한 설정을 정의합니다.
page-break-inside 요소 내부에서 페이지 넘김을 지정합니다.
perspective 3차원 공간을 활성화하여 해당 요소의 자식이 해당 공간에 배치될 수 있도록 하는 데 사용됩니다.
perspective-origin 뷰어가 3차원 공간을 바라보는 위치를 선택하는 데 사용됩니다.
pointer-events 특정 그래픽 요소가 포인터 이벤트의 대상이 될 수 있는 조건을 제어하는 ​​데 사용됩니다 .
position 요소를 배치하는 방법을 지정하는 속성입니다.
quotes 속성을 사용하여 삽입할 때 사용할 따옴표를 지정하는 데 사용됩니다.
resize 사용자가 요소의 크기를 조정할 수 있는지 여부와 가능한 경우 방향을 지정할 수 있습니다.
right 콘텐츠의 위치를 설정하는 속성입니다. 설정한 수치만큼 오른쪽에서 왼쪽으로 이동합니다.
position: relative와 함께 사용합니다.
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 콘텐츠의 위치를 설정하는 속성입니다. 설정한 수치만큼 위에서 아래로 이동합니다.
position: relative와 함께 사용합니다.
transform 요소에 회전, 크기 조절, 기울이기, 이동 효과를 설정합니다.
transform-origin transform 속성과 함께 사용되는 속성으로, 회전 중심(원점·기준점)을 설정합니다.
transform-style 자식 요소를 3D 공간에 배치하거나 2D 평면에 평평하게 배치 할지 설정합니다.
transition 특정 조건 하에서 변화하는 과정을 애니메이션으로 보여주고자 할 때 설정합니다.
transition-delay 프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 설정합니다.
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 요소들의 쌓임 규칙을 설정하는 속성입니다. 속성의 숫자가 클수록 위로 올라오게 됩니다.