Top

CSS 레퍼런스 북

속성 설명
align-content align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다.
align-items align-items 속성은 <div> 요소의 수직 방향 정렬 방식을 설정합니다.
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 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 속성은 백그라운드 이미지의 반복 여부를 설정합니다.
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 속성은 테이블 cell 테두리의 겹침 속성을 설정합니다.
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-decoration-break 속성은 컬럼 및 줄바꿈시 테두리와 패딩의 방식을 설정합니다.
box-shadow box-shadow 속성은 박스 요소의 그림자를 설정합니다.
box-sizing box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.
caption-side caption-side 속성은 caption의 위치를 설정합니다.
caret-color caret-color 속성은 input의 커서 색을 정의합니다.
clear clear 속성은 float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 제거하기 위해 쓰입니다.
clip clip 속성은 보이는 영역을 설정합니다.
color color 속성은 요소의 글씨 및 글씨 장식의 전경색과 currentcolor의 값을 설정합니다.
column-count column-count 속성은 컬럼의 수를 정의합니다.
column-fill column-fill 속성은 열의 지정방법을 정의합니다.
column-gap column-gap 속성은 컬럼의 간격을 정의합니다.
column-rule column-rule 속성은 컬럼 라인의 가로값, 스타일, 컬러를 정의합니다.
column-rule-color column-rule-color 속성은 컬럼의 라인 색을 정의합니다.
column-rule-style column-rule-style 속성은 컬럼 라인의 스타일을 정의합니다.
column-rule-width column-rule-width 속성은 컬럼 라인의 가로값을 정의합니다.
column-span column-span 속성은 열의 속성을 정의합니다.
column-width column-width 속성은 컬럼의 가로 값을 정의합니다.
columns columns 속성은 열의 폭과 열의 수를 정의합니다.
content content 속성은 생성한 값으로 요소를 대체합니다. content 속성으로 추가한 요소는 "익명 대체 요소"입니다.
counter-increment counter-increment 속성은 콘텐츠의 순서 상태를 정의합니다.
counter-reset counter-reset 속성은 콘텐츠의 숫자를 초기화합니다.
cursor cursor 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다.
direction direction 속성은 문장의 방향을 설정합니다.
display display 속성은, 형식적으로는 요소의 내부와 외부 디스플레이 유형을 설정합니다.
외부 디스플레이 유형은 플로우 레이아웃에 요소가 참여하는 방법을 나타내고, 내부 디스플레이 유형은 자식의 레이아웃 방식을 설정합니다.
empty-cells empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다.
filter filter 속성은 그래픽 효과를 설정합니다.
flex flex 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다.
flex-basis flex-basis 속성은 요소의 기본 단위를 정의합니다.
flex-direction flex-direction 속성은 요소의 정렬 방향을 정의합니다.
flex-flow flex-flow 속성은 요소의 정렬 방향 flex-direction와 줄 속성 flex-wrap을 같이 설정합니다.
flex-grow flex-grow 속성은 요소의 크기를 숫자를 통해 정의합니다.
flex-shrink flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다.
flex-wrap flex-wrap 속성은 요소의 줄 속성을 설정합니다.
float float 속성은 박스를 왼쪽 또는 오른쪽으로 이동하거나 이동하지 않음을 지정합니다.
font font 속성은 글꼴을 설정합니다.
font-family font-family 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을 지정할 수 있게 해줍니다.
font-size font-size 속성은 폰트의 크기(대문자 "M"의 크기)를 지정합니다. 폰트 크기를 바꾸면 em 과 ex <length> 단위로 계산된 다른 항목들의 크기를 바꿉니다.
font-size-adjust font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다.
font-stretch font-stretch 속성은 폰트의 굵기를 정의합니다.
font-style font-style 속성은 글꼴이 해당 font-family의 일반, 기울임꼴 또는 비스듬한 면으로 스타일 지정되어야 하는지 여부를 설정합니다.
font-variant font-variant 속성은 글꼴의 변형을 정의합니다.
font-weight font-weight 속성은 폰트(font)의 가중치(weight)나 굵기(boldness)를 명시한다. 몇몇 폰트들은 normal 나 bold 일 때만 가능합니다.
grid grid 속성은 Flex와 같이 Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분되어 있습니다. Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있습니다.
grid-area grid-area 속성은 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성 입니다.
grid-auto-columns grid-auto-columns 속성은 암시적인 열(Track)의 크기를 정의합니다.
grid-auto-flow grid-auto-flow 속성은 자동 배치 알고리즘 방식을 정의합니다.
grid-auto-rows grid-auto-rows 속성은 암시적인 행(Track)의 크기를 정의합니다.
grid-column grid-column 속성은 grid-column-xxx의 단축 속성(열 시작/끝 위치)입니다.
grid-column-end grid-column-end 속성은 그리드 아이템의 열 끝 위치 지정합니다.
grid-column-gap grid-column-gap 속성은 열과 열 사이의 간격(Line)을 정의합니다.
grid-column-start grid-column-start 속성은 그리드 아이템(Item)의 행 시작 위치 지정합니다.
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 속성은 행과 행 사이의 간격(Line)을 정의합니다.
grid-row-start grid-row-start 속성은 그리드 아이템(Item)의 행 시작 위치 지정합니다.
grid-template grid-template 속성은 grid-template-xxx의 단축 속성입니다.
grid-template-areas grid-template-areas 속성은 영역(Area) 이름을 참조해 템플릿 생성합니다.
grid-template-columns grid-template-columns 속성은 명시적 열(Track)의 크기를 정의합니다.
grid-template-rows grid-template-rows 속성은 명시적 행(Track)의 크기를 정의합니다.
hanging-punctuation hanging-punctuation 속성은 글씨의 시작 및 끝의 위치 정의합니다.
height height 속성은 요소의 높이를 지정합니다. 기본값은 콘텐츠 영역의 높이지만, box-sizing이 border-box라면 테두리 영역의 높이를 설정합니다.
hyphens hyphens 속성은 텍스트의 하이픈 영역을 설정합니다.
isolation isolation 속성은 stacking context을 설정합니다.
justify-content justify-content 속성은 <div> 요소의 수평 방향 정렬 방식을 설정합니다.
left left 속성은 해당 태그 위치를 좌측 기준으로 어디 쯤에 위치시킬건지 지정합니다.
letter-spacing letter-spacing 속성은 글자 사이의 간격을 조절합니다.
line-height line-height 속성은 문장과 문장 사이의 간격을 설정합니다.
list-style list-style 속성은 목록 스타일 속성을 설정합니다.
list-style-image list-style-image 속성은 목록 마커의 이미지를 설정합니다.
list-style-position list-style-position 속성은 목록 마커의 위치 속성을 설정합니다.
list-style-type 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-heigh 속성은 요소의 최소 높이를 지정합니다.
min-width min-width 속성은 요소의 최소 너비를 지정합니다.
mix-blend-mode mix-blend-mode 속성은 배경의 혼합 상태를 정의합니다.
object-fit object-fit 속성은 <img>, <video> 태그의 크기를 정의합니다.
object-position object-position 속성은 <img>, <video> 태그의 위치를 정의합니다.
opacity opacity 속성은 요소의 투명도를 설정합니다.
order order 속성은 flex 콘텐츠의 순서를 정의합니다.
outline outline 속성은 요소 주위에 윤곽선을 그리는 데 사용합니다.
outline-color outline-color 속성은 아웃라인의 색을 정의합니다.
outline-offset outline-offset 속성은 아웃라인의 간격을 정의합니다.
outline-style outline-style 속성은 아웃라인 스타일을 정의합니다.
outline-width 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-after 속성은 페이지 인쇄시 분리에 관한 설정을 정의합니다.
page-break-before page-break-before 속성은 인쇄시 페이지 분리에 관한 설정을 정의합니다.
page-break-inside page-break-inside 속성은 인쇄시 페이지 분리에 관한 설정을 정의합니다.
perspective perspective 속성은 3D를 표현할 때 원근점을 정의합니다.
perspective-origin perspective-origin 속성은 3D를 표현할 때 원근점의 방향을 정의합니다.
pointer-events pointer-events 속성은 포인터 이벤트 반응을 정의합니다.
position position 속성은 요소의 배치방법을 지정합니다.
quotes quotes 속성은 인용 부호를 정의합니다.
resize resize 속성은 요소의 사이즈를 정의합니다.
right right 속성은 해당 태그 위치를 우측 기준으로 어디 쯤에 위치시킬건지 지정합니다.
tab-size tab-size 속성은 글씨의 간격을 정의합니다.
table-layout table-layout 속성은 표의 레이아웃 크기를 정의합니다.
text-align text-align 속성은 텍스트의 정렬 방향을 의미합니다.
text-align-last text-align-last 속성은 문장의 마지막 텍스트 정렬 방식을 설정합니다.
text-decoration text-decoration 속성은 텍스트의 밑줄, 윗줄, 가운데줄이나 깜빡거림의 장식적인 요소를 지정합니다.
text-decoration-color text-decoration-color 속성은 글자 라인 색을 설정합니다.
text-decoration-line text-decoration-line 속성은 글자 라인 스타일을 설정합니다.
text-decoration-style text-decoration-style 속성은 글자 스타일을 설정합니다.
text-indent text-indent 속성은 문단 들여쓰기 속성을 설정합니다.
text-justify text-justify 속성은 텍스트의 간격을 설정합니다.
text-overflow text-overflow 속성은 문자열 영역 속성을 설정합니다.
text-shadow text-shadow 속성은 텍스트에 그림자를 설정합니다.
text-transform text-transform 속성은 텍스트를 대문자나 소문자로 변경합니다.
top top 속성은 요소의 위쪽 속성을 설정합니다.
transform transform 속성은 요소의 움직임을 설정합니다.
transform-origin transform-origin 속성은 요소의 움직임 방향을 설정합니다.
transform-style transform-style 속성은 요소의 움직임 스타일을 설정합니다.
transition transition 속성은 요소의 움직임 시간을 일괄적으로 설정합니다.
transition-delay transition-delay 속성은 요소의 움직임 지연 시간을 설정합니다.
transition-duration transition-duration 속성은 요소의 움직임 지속 시간을 설정합니다.
transition-property transition-property 속성은 요소의 움직임 속성을 설정합니다.
transition-timing-function transition-timing-function 속성은 요소의 움직임 기능을 설정합니다.
unicode-bidi unicode-bidi 속성은 글자의 방향 속성을 설정합니다.
user-select user-select 속성은 요소의 텍스트를 선택할 지 정의합니다.
vertical-align vertical-align 속성은 텍스트의 상하 정렬 방식을 설정합니다.
visibility visibility 속성은 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다. visibility로 <table>의 행이나 열을 숨길 수도 있습니다.
white-space white-space 속성은 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다.
width width 속성은 요소의 너비를 설정합니다. 기본값은 콘텐츠 영역의 너비이지만, box-sizing이 border-box라면 테두리 영역의 너비를 설정합니다.
word-break word-break 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다.
word-spacing word-spacing 속성은 단어 사이의 간격을 정의합니다.
word-wrap word-wrap 속성은 줄바꿈을 설정합니다.
z-index z-index 속성은 요소의 위치가 겹칠 경우 순서를 설정합니다.