CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성 전체

CSS 속성 전체 매뉴얼(기능별)

CSS 속성을 알파벳 순으로 찾을 수 있습니다. 이 부분은 최신 CSS에 속합니다.3규범적인 표준 속성의 전체 목록입니다. 모든 속성은 애니메이션 속성, 배경 속성, 경계 속성, 색상 속성, 높이 너비 크기, Flex 유연한 박스, 글꼴 속성, 목록 항목 속성, 여백 속성, 경계선 속성, 글자 글꼴 속성, 시각 속성 등으로 나뉩니다.

애니메이션 속성(Animation)

속성	설명
`animation`	기준 프레임에 기반한 애니메이션을 지정합니다.
`animation-delay`	애니메이션이 언제 시작되는지 지정합니다.
`animation-direction`	애니메이션이 주기를 완료할 때마다 반대 방향으로 재생되는지 지정합니다.
`animation-duration`	애니메이션이 주기를 완료하는 데 걸리는 초나 밀리초를 지정합니다.
`animation-fill-모드`	CSS 애니메이션이 실행 전과 후에 스타일을 적용하는 방법을 지정합니다.
`animation-iteration-count`	애니메이션이 중지되기 전에 반복되어야 하는 횟수를 지정합니다.
`animation-이름`	지정합니다`@keyframes`선택된 요소에 적용되는 정의된 애니메이션의 이름을 지정합니다.
`animation-play-상태`	애니메이션이 실행되거나 일시 중지되는지 지정합니다.
`animation-timing-function`	CSS 애니메이션이 각 주기에서 어떻게 진행되어야 하는지 지정합니다.

배경 속성(Background)

속성	설명
`background`	배경 속성을 하나의 선언에서 정의합니다.
`background-attachment`	배경 이미지가 화면 내에서 고정되거나 스크롤되는지 지정합니다.
`background-clip`	배경의 그리기 영역을 지정합니다.
`background-color`	요소의 배경색을 정의합니다.
`background-image`	요소의 배경 이미지를 정의합니다.
`background-D 변환을 요소에 적용합니다.`	배경 이미지의 정위치 영역을 지정합니다.
`background-position`	배경 이미지의 기준점을 정의합니다.
`background-repeat`	지정하기/배경 이미지를 어떻게 타일링할지 지정합니다.
`background-size`	배경 이미지의 크기를 지정합니다.

경계선 속성(Border)

속성	설명
`border`	요소의 경계선 모든 네 면의 너비, 스타일 및 색상을 설정합니다.
`border-bottom`	요소의 하단 경계선 너비, 스타일 및 색상을 설정합니다.
`border-bottom-color`	요소의 하단 경계선의 색상을 설정합니다.
`border-bottom-left-radius`	요소의 왼쪽 하단 경계角的 형태를 정의합니다.
`border-bottom-right-radius`	요소의 오른쪽 하단 경계角的 형태를 정의합니다.
`border-bottom-transform`	요소의 하단 경계선 스타일을 설정합니다.
`border-bottom-width`	요소의 하단 경계선 너비를 설정합니다.
`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-transform`	요소의 왼쪽 경계선 스타일을 설정합니다.
`border-left-width`	요소의 왼쪽 경계선 너비를 설정합니다.
`border-radius`	요소의 경계角的 형태를 정의합니다.
`border-right`	요소의 오른쪽 경계선 너비, 스타일 및 색상을 설정합니다.
`border-right-color`	요소의 오른쪽 경계선의 색상을 설정합니다.
`border-right-transform`	요소의 오른쪽 경계선 스타일을 설정합니다.
`border-right-width`	요소의 오른쪽 경계선 너비를 설정합니다.
`border-transform`	요소의 모든 네 면에 경계선 스타일을 설정합니다.
`border-top`	요소의 상단 경계선 너비, 스타일 및 색상을 설정합니다.
`border-top-color`	요소의 상단 경계선의 색상을 설정합니다.
`border-top-left-radius`	요소의 왼쪽 상단 경계角的 형태를 정의합니다.
`border-top-right-radius`	요소의 오른쪽 상단 경계角的 형태를 정의합니다.
`border-top-transform`	요소의 상단 경계선 스타일을 설정합니다.
`border-top-width`	요소의 상단 경계선 너비를 설정합니다.
`border-width`	요소의 모든 네 면의 경계선 너비를 설정합니다.

색상 속성(Color)

속성	설명
`color`	요소 텍스트의 색상을 지정합니다.
`opacity`	요소의 투명도를 지정합니다.

사이즈 속성(Size)

속성	설명
`height`	요소의 높이를 지정합니다.
`max-height`	요소의 최대 높이를 지정합니다.
`max-width`	요소의 최대 너비를 지정합니다.
`min-height`	요소의 최소 높이를 지정합니다.
`min-width`	요소의 최소 너비를 지정합니다.
`width`	요소의 너비를 지정합니다.

내용 속성(Content)

속성	설명
`content`	생성된 내용을 삽입합니다.
`quotes`	들여쓰기 기호에 사용되는 기호를 지정합니다.
`계산자-reset`	하나 이상의 계산자를 생성하거나 초기화합니다.
`계산자-increment`	하나 이상의 계산자 값을 증가시킵니다.

활성화 Flex 박스 레이아웃(Flex)

속성	설명
`align-content`	활성화 컨테이너 내의 활성화 컨테이너 아이템의 정렬 방식을 지정합니다.
`align-items`	flex 컨테이너 내의 아이템에 대한 기본 정렬 방식을 지정합니다.
`align-self`	활성화 컨테이너 내 선택된 아이템의 정렬 방식을 지정합니다.
`flex`	활성화 길이의 구성 요소를 지정합니다.
`flex-basis`	활성화 아이템의 초기 주요 크기를 지정합니다.
`flex-direction`	활성화 아이템의 방향을 지정합니다.
`flex-flow`	`flex-direction`와`flex-space`属性的简写属性
`flex-grow`	활성화 아이템이 활성화 컨테이너 내의 다른 아이템에 비해 어떻게 확장되는지 지정합니다.
`flex-shrink`	flex 아이템이 flex 컨테이너 내의 다른 아이템에 비해 어떻게 축소되는지 지정합니다.
`flex-space`	활성화 아이템을 포장할지 여부를 지정합니다.
`justify-content`	활성화 길이와 자동 페이지 마진을 해결한 후, 활성화 요소가 활성화 컨테이너의 주축 방향으로 어떻게 정렬되는지 지정합니다.
`order`	활성화 요소가 활성화 컨테이너 내에서 표시 및 레이아웃 순서를 지정합니다.

글꼴 속성(Fonts)

속성	설명
`font`	한 개의 선언에서 다양한 글꼴 속성을 정의합니다.
`font-family`	요소의 글꼴 목록을 정의합니다.
`font-size`	텍스트의 글꼴 크기를 정의합니다.
`font-size-adjust`	글꼴 회귀가 발생할 때, 텍스트의 읽기 쉽기를 유지합니다.
`font-stretch`	글꼴에서 일반적인, 압축된, 또는 확장된 글꼴을 선택합니다.
`font-transform`	텍스트의 글꼴 스타일을 정의합니다.
`font-variant`	글꼴 변이를 지정합니다.
`font-weight`	텍스트의 글꼴 두께를 지정합니다.

리스트 항목 속성(Lists)

속성	설명
`list-transform`	리스트와 리스트 요소의 표시 스타일을 정의합니다.
`list-transform-image`	리스트 항목 표시 이미지를 지정합니다.
`list-transform-position`	리스트 항목 표시 위치를 지정합니다.
`list-transform-type`	리스트 항목의 표시 스타일을 지정합니다.

간격 속성(Margin)

속성	설명
`margin`	요소의 모든 네 면에 간격을 설정합니다.
`margin-bottom`	요소의 하단 간격을 설정합니다.
`margin-left`	요소의 좌측 간격을 설정합니다.
`margin-right`	요소의 우측 간격을 설정합니다.
`margin-top`	요소의 상단 간격을 설정합니다.

다중 열 레이아웃 속성(열)

속성	설명
`column-count`	다중 열 요소의 열 수를 지정합니다.
`column-fill`	열을 어떻게 채울지 지정합니다.
`column-gap`	다중 열 요소의 각 열 간의 간격을 지정합니다.
`column-rule`	다중 열 요소의 각 열 사이에 그려지는 선이나 "규칙"을 지정합니다.
`column-rule-color`	다중 열 레이아웃에서 열 간에 그려지는 규칙적인 색상을 지정합니다.
`column-rule-transform`	다중 열 레이아웃에서 열 간에 그려지는 규칙적인 스타일을 지정합니다.
`column-rule-width`	다중 열 레이아웃에서 열 간에 그려지는 규칙적인 너비를 지정합니다.
`column-span`	다중 열 레이아웃에서 요소가 걸쳐지는 열의 수를 지정합니다.
`column-width`	다중 열 요소 중 열의 최적 너비를 지정합니다.
`columns`	를 사용하여 설정`column-width`와`column-count`属性的简写属性

轮廓属性(Outline)

속성	설명
`outline`	요소 계선의 모든 네 면의 너비, 스타일, 색상을 설정합니다.
`outline-color`	계선의 색상을 설정합니다.
`outline-offset`	계선과 요소 경계선 간의 공간을 설정합니다.
`outline-transform`	계선 스타일을 설정합니다.
`outline-width`	계선의 너비를 설정합니다.

填充属性(Padding)

속성	설명
`padding`	요소의 모든 네 면에 데이터를 설정합니다.
`padding-bottom`	데이터를 요소의 하단에 설정합니다.
`padding-left`	데이터를 요소의 왼쪽에 설정합니다.
`padding-right`	데이터를 요소의 오른쪽에 설정합니다.
`padding-top`	데이터를 요소의 상단에 설정합니다.

프린트 속성(Print)

속성	설명
`page-break-after`	요소 뒤에 페이지 분리 기호를 삽입합니다.
`page-break-before`	요소 앞에 페이지 분리 기호를 삽입합니다.
`page-break-inside`	요소 내에 페이지 분리 기호를 삽입합니다.

테이블 속성(Table)

속성	설명
`border-collapse`	테이블 셀 경계선을 연결하거나 분리할지 지정합니다.
`border-spacing`	인접한 테이블 셀의 경계선 간의 간격을 설정합니다.
`caption-side`	테이블 타이틀의 위치를 지정합니다.
`empty-cells`	빈 테이블 셀의 경계선과 배경을 표시하거나 숨깁니다.
`table-layout`	테이블 레이아웃 알고리즘을 지정합니다.

문자 속성(Text)

속성	설명
`direction`	텍스트 방향을 정의합니다./글쓰기 방향
`tab-size`	tab의 길이를 지정합니다.
`text-align`	인라인 내용의 수평 정렬 방식을 설정합니다.
`text-align-last`	지정할 때`text-align`is　when aligning the last line of the block or the line before the forced line break`justify`.
`text-decoration`	텍스트에 추가할 장식을 지정합니다.
`text-decoration-color`	指定的颜色`text-decoration-line`.
`text-decoration-line`	요소에哪种线条装饰添加
`text-decoration-transform`	지정합니다`text-decoration-line`속성이 지정한 라인 스타일
`text-indent`	텍스트의 첫 번째 행을 들여쓰습니다.
`text-justify`	지정할 때`text-align`속성이 설정되면 사용할 정렬 방법`justify`.
`text-overflow`	텍스트 내용이 블록 컨테이너를 초과할 때 어떻게 표시될지 지정합니다.
`text-shadow`	요소의 텍스트 내용에 하나나 여러 개의 그림자를 적용합니다.
`text-요소의 변환 원점을 정의합니다.`	텍스트의 대소문자를 변환합니다.
`line-height`	텍스트 행 간의 높이를 설정합니다.
`수직-align`	요소가 현재 텍스트 기준선에 비해 수직 위치를 설정합니다.
`letter-spacing`	글자 간의 추가 간격을 설정합니다.
`white-spacing`	设置单词之间的间距。
`white-space`	指定如何处理元素内的空白。
`white-break`	단어 간의 간격을 설정합니다.
`white-space`	요소 내의 공백을 어떻게 처리하는지 지정합니다.

break

속성	설명
`단어 내에서 줄바꿈을 어떻게 처리하는지 지정합니다.-visibility`	word
`내용이 컨테이너 경계를 초과할 때 단어를 끊는지 여부를 지정합니다.`	wrap
`내용이 컨테이너 경계를 초과할 때 단어를 끊는지 여부를 지정합니다.-D 변환을 요소에 적용합니다.`	전환 속성(Transform)3객체를 볼 수 있는 모든 자식 요소의 시각적 공간을 정의합니다.
`요소의 변환 원점을 정의합니다.`	perspective2D 공간의 사라짐점()).3D 또는
`요소의 변환 원점을 정의합니다.-D 변환을 요소에 적용합니다.`	origin
`요소의 변환 원점을 정의합니다.-transform`	style3D 공간에서 내장 요소를 렌더링합니다.

전환 속성(Transition)

속성	설명
`transition`	요소의 두 가지 상태 사이의 전환을 정의합니다.
`transition-delay`	전환 효과가 언제 시작되는지 지정합니다.
`transition-duration`	전환 효과가 소모하는 시간(초 또는 밀리초)을 지정합니다.
`transition-property`	전환 효과가 적용되어야 할 CSS 속성 이름을 지정합니다.
`transition-timing-function`	전환 효과의 속도 곡선을 지정합니다.

시각적 형식 속성

속성	설명
`display`	요소가 화면에서 어떻게 표시되는지 지정합니다.
`position`	요소를 어떻게 정위치하는지 지정합니다.
`top`	정위치 요소의 위 모서리 위치를 지정합니다.
`right`	정위치 요소의 오른쪽 모서리 위치를 지정합니다.
`bottom`	정위치 요소의 아래 모서리 위치를 지정합니다.
`left`	정위치 요소의 왼쪽 모서리 위치를 지정합니다.
`float`	한 상자가浮动 여부를 지정합니다.
`clear`	浮动 요소에 대한 요소 위치를 지정합니다.
`z-index`	정위치 요소의 층위나 스택 순서를 지정합니다.
`overflow`	부산 요소 상자의 내용을 처리하는 방법을 지정합니다.
`overflow-x`	콘텐츠가 요소의 내용 영역 너비를 초과할 때 콘텐츠를 관리하는 방법을 지정합니다.
`overflow-y`	콘텐츠가 요소의 내용 영역 높이를 초과할 때 콘텐츠를 관리하는 방법을 지정합니다.
`resize`	요소가 사용자에 의해 크기를 조절할 수 있는지 지정합니다.
`clip`	자르기 영역을 정의합니다.
`visibility`	요소가 보이는지 여부를 지정합니다.
`cursor`	커서 유형을 지정합니다.
`box-shadow`	요소의 상자에 하나나 여러 개의 그림자를 적용합니다.
`box-sizing`	기본 CSS 상자 모델을 변경합니다.

CSS @규칙(At)-rules)CSS z-index 속성