CSS 레퍼런스 북

속성 설명
align-content 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스 박스'의 교차축 또는 그리드의 블록 축을 따라 배치하는 방식을 결정
align-items 요소의 수직 방향 정렬 방식을 설정 한 줄만을 가지는 플렉스 박스에서는 효과가 없으며, 두 줄 이상을 가지는 플렉스 박스에서만 효과가 있다
align-self align-items로 수직 방향으로 특정 요소만 따로 정렬할때 사용한다/td>
all 요소들에 적용된 값들을 초기화
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-source 테두리의 이미지로 사용할 원본을 지정한다
border-image-width 테두리의 이미지의 너비를 지정한다
border-left 테두리의 왼쪽 부분을 설정한다, border-left-width, border-left-style, border-left-color의 값을 지정
border-left-color 왼쪽 테두리의 색상을 지정한다
border-left-style 왼쪽 테두리의 형태를 지정한다
border-left-width 왼쪽 테두리 너비를 지정한다
border-radius 테두리를 둥근 모양으로 만든다
border-right 요소의 오른쪽 테두리를 설정한다, border-right-width, border-right-style, border-right-color의 값을 지정
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-top-style, border-top-color의 값을 지정
border-top-width 위쪽 테두리의 너비를 설정한다
border-width 테두리의 폭(너비)을 설정한다
bottom 하단을 기준으로 어느 높이에 위치시킬지를 설정한다
box-decoration-break 요소의 다중 선 영역, 행렬 중 열 영역, 페이지를 어떻게 표현할지를 설정한다
box-shadow 테두리에 그림자 효과를 설정한다
box-sizing 박스의 크기를 화면에 표시하는 방식을 설정한다
caption-side 표의 캡션(설명)의 위치를 지정한다
caret-color 입력 커서의 색상을 지저한다
clear float 속성을 사용하고 난 뒤의 요소들의 위치를 조절한다
제대로 위치를 조절할 수 없기 때문에 auto 값을 사용한다
clearfix 가상의 요소를 만들고 내용을 넣어 출력하는 기능
clip 요소의 특정 부분만을 나타낼때 사용한다
color 문자(텍스트)의 색상을 설정한다
column-count 해당 요소를 몇 개의 열로 나눌지 설정한다
column-fill 다단 구성 시 단의 너비를 지정하는 속성
column-gap 요소의 열 구간 사이의 간격을 지정한다
column-rule coulum-rule 관련 속성을 한번에 설정하는 단축 속성
column-rule-color 열 사이에 들어갈 선의 색상을 지정한다
column-rule-style 열 사이에 들어갈 선의 형태를 지정한다
column-rule-width 열 사이의 선의 두께를 설정한다
column-span 몇 개의 열을 병합할지를 설정한다
column-width 열의 너비를 설정한다
columns 모든 colume 속성을 한줄로 설정하는 단축 속성
content 선택한 요소의 내용 앞이나 뒤에 내용을 추가한다
counter-increment 요소에 일련 번호를 얼마나 증가시킬지 설정한다
counter-reset 일련 번호의 시작 번호를 정한다
cursor 문서에 마우스커서가 올라갈때의 커서 모양을 설정한다
direction 글자의 방향을 지정한다
display 웹 사이트의 요소들이 어떻게 화면에 보여질지 설정한다
empty-cells 테이블에서 비어있는 부분을 보이지 않게 할지 보이게 할지를 설정한다
filter 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용한다
flex flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 단축 속성
flex-basis 요소들의 기본 크기를 설정한다
flex-direction 요소들이 배치되는 방향을 설정한다
flex-flow flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성
flex-grow flex-basis의 값보다 커질 수 있는지를 결정하는 속성
flex-shrink 요소가 flex-basis값보다 작아질수 있는지를 설저한다
flex-wrap 요소들을 한줄로 정렬할 수 없을때 줄바꿈을 결정하는 속성
float 주어진 요소를 왼쪽 또는 오른쪽으로 이동시킨다
font 글씨의 색상, 크기, 스타일 등의 전체적인 설정
font-family 원하는 글꼴을 설정한다
font-size 글씨의 크기를 설정한다
font-size-adjust 특정 장치의 화면에서 텍스트의 크기를 설정한다
font-stretch 글자를 좁게 또는 넓게 설정한다
font-style 글씨의 형태를 지정한다
font-variant 소문자를 작은 대문자로 설정한다
font-weight 글씨의 두께를 설정한다
grid 요소들을 격자로 나누어 설정한다
grid-template-areas 각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해서 배치한다
grid-auto-columns 그리드의 가로 형태를 자동으로 정의
grid-auto-flow 아이템이 자동 배치되는 흐름을 결정하는 속성
grid-auto-rows 그리드의 세로 형태를 자동으로 정의
grid-column 컨테이너에 Grid 트랙의 크기들을 지정해주는 속성으로 grid-column-start와 grid-column-end 속성을 한번에 쓰는 축약형
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-left 요소의 왼쪽 여백을 설정한다
margin-right 요소의 오른쪽 여백을 설정한다
margin-top 요소의 위쪽 여백을 설정한다
max-height 최대 높이를 설정한다
max-width 최대 폭을 설정한다
min-height 최소 높이를 설정한다
min-width 최소 폭을 설정한다
mix-blend-mode 요소의 내용이 요소의 부모 및 요소의 배경 내용과 혼합되는 방법을 설정한다
object-fit 또는
object-position 요소 상자 내에서 선택한 대체 요소의 내용 정렬을 지정한다
opacity 요소의 투명한 정도를 설정한다
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 웹사이트 내의 물체의 원근법을 설정한다
perspective-origin 속성은 뷰어가 보고 있는 위치를 결정한다
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-decoration-line에 의해 지정된 라인의 스타일을 설정한다
text-indent 블록의 텍스트 줄 앞에 배치되는 빈 공간(들여쓰기)의 길이를 설정한다
text-justify text-align: justify; 요소에 설정된다
text-overflow 숨겨진 오버플로 콘텐츠가 사용자에게 신호되는 방식을 설정한다 잘리거나 줄임표('...')를 표시하거나 사용자 지정 문자열을 표시할 수 있다
text-shadow 텍스트에 그림자를 추가한다
text-transform 요소의 텍스트를 대문자로 표시하는 방법을 지정한다 텍스트를 모두 대문자 또는 소문자로 표시하거나 각 단어를 대문자로 표시하는 데 사용할 수 있다
top 상단을 기준으로 얼마나 밑에 위치시킬지를 지정한다
transform 웹의 요소들을 이동시키거나 크기조절, 회전을 설정한다
transform-origin 요소 변형의 원점을 설정한다
transform-style 요소의 자식이 3D 공간에 배치되는지 또는 요소 평면에서 병합되는지 여부를 설정한다
transition 애니메이션 속도를 조절한다
transition-delay 값이 변경될 때 속성의 전환 효과를 시작하기 전에 대기할 기간을 지정한다
transition-duration 환 애니메이션이 완료되는 데 걸리는 시간을 설정한다
transition-property 속성은 전환 효과를 적용할 CSS 속성을 설정한다
transition-timing-function 전환 효과의 영향을 받는 CSS 속성에 대해 중간 값을 계산하는 방법을 설정한다
unicode-bidi 방향 속성과 함께 문서의 양방향 텍스트가 처리되는 방식을 결정한다
user-select 사용자가 텍스트를 선택할 수 있는지 여부를 제어합니다
vertical-align 인라인, 인라인 블록 또는 테이블 셀 상자의 수직 정렬을 설정한다
visibility 웹 페이지들의 요소들이 표현 여부를 설정한다
white-space 스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 설정할지를 나타낸다
width 너비(가로)에 대한 길이를 설정한다
word-break 텍스트가 내용 상자를 넘칠 때마다 줄 바꿈을 표시할지 여부를 설정한다
word-spacing 단어 사이 및 태그 사이의 간격 길이를 설정한다
z-index 요소가 다른 요소들보다 앞이나 뒤로 배치되는 경우를 설정한다