CSS 레퍼런스 북
| 속성 | 설명 |
|---|---|
| align-content | align-content 속성은 flex-warp 속성의 동작을 변경할 수 있다. |
| 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 | 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-repea 속성은 백그라운드 이미지의 반복 여부를 설정한다. |
| 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-style 속성을 이용하면 테두리(border)를 다양한 모양으로 설정할 수 있습니다. |
| 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)의 너비를 설정한다. |
| 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의 값을 설정합니다. currentcolor는 다른 속성에서 사용할 수 있는 간접적인 값이며, border-color 등 일부 속성의 기본값 입니다. |
| 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 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 준다. 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용된다. |
| font | font 속성은 font-style (en-US), font-variant (en-US), font-weight, font-size, line-height (en-US), font-family의 단축 속성입니다. 요소의 글꼴을 시스템 폰트로 설정할 수도 있습니다. |
| font-family | font-family 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을 지정할 수 있게 해줍니다. |
| font-size | font-size 속성은 폰트의 크기(대문자 "M"의 크기)를 지정합니다. 폰트 크기를 바꾸면 em 과 ex |
| font-size-adjust | font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다. |
| font-stretch | font-stretch 속성은 폰트의 굵기를 정의합니다. |
| font-style | font-style 속성은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. |
| font-variant | font-variant 속성은 글꼴의 변형을 정의합니다. |
| font-weight | font-weight 속성은 폰트의 가중치나 굵기를 명시한다. 몇몇 폰트들은 normal이나 bold일때만 가능하다. |
| grid | CSS 속성은 shorthand property 입니다. 외재적인 속성인 (grid-template-rows (en-US), grid-template-columns (en-US), grid-template-areas (en-US)), 값과 내재적인 속성인 (grid-auto-rows (en-US), grid-auto-columns (en-US), grid-auto-flow (en-US)), 값을 한번에 설정합니다. |
| grid-area | grid-area 속성은 그리드 항목의 크기와 위치를 결정하고, 그리드 배치에 선, 범위 또는 행 내에서 그리드 항목의 크기와 위치를 지정합니다. |
| grid-auto-columns | grid-auto-columns 속성은 암시적으로 생성된 그리드 열 트랙 또는 트랙 패턴의 크기를 지정 합니다 . |
| grih-auto-flow | grid-auto-flow 속성은 자동 배치 알고리즘이 작동하는 방식을 제어하여 자동 배치 항목이 그리드로 흐르는 방식을 정확히 지정합니다. |
| grid-auto-rows | grid-auto-rows 속성은 암시적으로 생성된 그리드 행 트랙 또는 트랙 패턴의 크기를 지정 합니다 . |
| grid-column | grid-column 속성은 grid-column-start와 grid-column-end 속성을 같이 사용합니다. |
| grid-column-end | grid-column-end 속성은 그리드 배치에 선, 범위를 제공하지 않음(자동)으로써 그리드 열 내에서 그리드 항목의 끝 위치를 지정하며 그리드 영역 의 블록 끝 가장자리를 지정합니다 . |
| grid-column-gap | grid-column-gap 속성은 요소의 열 사이 의 간격( 거터 ) 크기를 설정합니다. |
| grid-column-start | grid-column-start 속성은 그리드 배치에 선, 범위를 제공하지 않음 으로써 그리드 열 내에서 그리드 항목의 시작 위치를 지정하고 그리드 영역 의 블록 끝 가장자리를 지정합니다 . |
| grid-gap | grid-gap 속성은 grid-row-gap와 grid-column-gap 속성을 같이 사용합니다. |
| grid-row | grid-row 속성은 grid-row-start와 grid-row-end 속성을 같이 사용합니다. |
| grid-row-end | grid-row-end 속성은 그리드 배치에 선, 범위를 제공하지 않음(자동)으로써 그리드 행 내에서 그리드 항목의 끝 위치를 지정하여 그리드 영역 의 인라인 끝 가장자리를 지정합니다 . |
| grid-row-gap | grid-row-gap 속성 은 요소의 그리드 행 사이 의 간격( 거터 ) 크기를 설정합니다. |
| grid-row-start | grid-row-start 속성은 그리드 배치에 선, 범위를 제공하지 않음 으로써 그리드 행 내에서 그리드 항목의 시작 위치를 지정하며 그리드 영역 의 인라인 시작 가장자리를 지정합니다 . |
| grid-template | grid-template 속성은 그리드 열, 행 및 영역 을 정의하기 위한 약식 속성 입니다. |
| grid-template-areas | grid-template-areas 속성은 아이템의 위치를 설정합니다. |
| grid-template-columns | grid-template-columns 속성은 가로 컬럼의 크기와 위치를 설정합니다. |
| grid-template-rows | grid-template-rows 속성은 그리드 행의 크기 조정 기능을 설정합니다. |
| hanging-punctuation | hanging-punctuation 속성은 글씨의 시작 및 끝의 위치 정의합니다. |
| height | height 속성은 요소의 높이를 지정합니다. 기본값은 콘텐츠 영역의 높이지만, box-sizing이 border-box라면 테드리 영역의 높이를 설정합니다. |
| hyphens | hyphens 속성은 텍스트의 하이픈 영역을 설정합니다. |
| isolation | isolation 속성은 stacking context을 설정합니다. |
| justify-content | justify-content 속성 은 브라우저가 플렉스 컨테이너의 기본 축 과 그리드 컨테이너의 인라인 축을 justify-content따라 콘텐츠 항목 사이와 주위에 공간을 분배하는 방법을 정의합니다 . |
| 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) 값을 설정함. |
| margin-right | 오른쪽의 마진(margin) 값을 설정함. |
| margin-top | 윗쪽의 마진(margin) 값을 설정함. |
| max-height | max-height 속성은 요소의 최대 높이를 설정합니다. max-height는 height 속성의 사용값이 자신의 값보다 커지는걸 방지합니다. |
| max-width | max-width 속성은 요소의 최대 너비를 설정합니다. max-width는 width 속성의 사용값이 자신의 값보다 커지는걸 방지합니다. |
| min-height | min-height 속성은 요소의 최소 높이를 설정합니다. min-height는 height 속성의 사용값이 자신의 값보다 작아지는걸 방지합니다. |
| min-width | min-width 속성은 요소의 최소 너비를 설정합니다. min-width는 width 속성의 사용값이 자신의 값보다 작아지는걸 방지합니다. |
| mix-blend-mode | mix-blend-mode 속성은 배경의 혼합 상태를 정의합니다. |
| object-fit | opacity 속성은 요소의 불투명도를 설정합니다 . 불투명도는 요소 뒤에 있는 내용이 숨겨지는 정도이며 투명도의 반대입니다. |
| object-position | object-position 속성은 <img>, <video> 태그의 위치를 정의합니다. |
| opacity | object-position 속성은 <img>, <video> 태그의 위치를 정의합니다. |
| order | order 속성은 flex 콘텐츠의 순서를 정의합니다. |
| outline | border 속성은 테두리 속성을 일괄적으로 설정합니다. |
| outline-color | outline-color 속성은 아웃라인의 색을 정의합니다. |
| outline-offset | outline-offset 속성은 아웃라인의 간격을 정의합니다. |
| outline-style | outline-style 속성은 아웃라인 스타일을 정의합니다./td> |
| outline-width | outline-width 속성은 아웃라인의 두께를 정의합니다. |
| overflow | text-overflow 속성은 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다. overflow-x (en-US), overflow-y (en-US)의 값을 설정합니다. |
| overflow-x | overflow-x 속성은 X축을 기준으로 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다. |
| overflow-y | overflow-y 속성은 Y축을 기준으로 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다. |
| padding | padding 속성은 네 방향 안쪽 여백 영역을 설정합니다. |
| padding-bottom | padding-bottom 속성은 요소의 아래쪽에 안쪽 여백 영역을 설정합니다. |
| padding-left | 왼쪽의 패딩(padding) 값을 설정함. |
| padding-right | 오른쪽의 패딩(padding) 값을 설정함. |
| padding-top | 윗쪽의 패딩(padding) 값을 설정함. |
| 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 속성은 컨텐츠 요소를 이동(translate), 회전(rotate), 확대(scale), 기울기(skew) 등의 효과를 줄 수 있습니다. 애니메이션 작업시 가장 많이 쓰는 요소입니다. 요소를 이동시키거나 회전 시킬 수 있으며, 원근점(perspective)를 사용하여 3D까지 구현 할 수 있습니다. |
| transform-origin | transform-origin 속성은 요소의 움직임 방향 및 기준점을 설정합니다. transform 속성과 같이 설정하며 기준점에 따라 애니메이션의 방향을 설정 할 수 있습니다. |
| transform-style | transform-style 속성은 요소의 움직임 스타일을 정의합니다. |
| transition | transition 속성은 요소의 움직임을 정의합니다. |
| transition-delay | transition-delay 속성은 요소의 움직임 시간을 지연합니다. |
| transition-duration | transition-duration 속성은 요소의 움직임 지속시간을 정의합니다. |
| transition-property | transition-property 속성은 transition의 적용 여부를 정의합니다. |
| transition-timing-function | transition-timing-function 속성은 요소의 움직임 기능을 정의합니다. |
| unicode-bidi | unicode-bidi 속성은 글자의 방향 속성을 설정합니다.. |
| user-select | user-select 속성은 요소의 텍스트를 선택할 지 정의합니다. |
| vertical-align | vertical-align 속성은 인라인, 인라인 블록 또는 테이블 셀 상자의 수직 정렬을 설정합니다 |
| visibility | visibility 속성은 요소를 보이지 않게 정의합니다. |
| 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 속성은 요소의 위치가 겹칠 경우 순서를 정의합니다. |