CSS 속성 분류: 애니메이션 속성, 변환 속성, 전환 속성, 상자 속성, 마키 속성, 크기 속성, 여백 속성, 패딩 속성, 테두리 속성, 위치 지정 속성, 다중 열 속성, 확장 가능한 상자 속성, 목록 속성, 그리드 속성, 테이블 속성, 텍스트 속성, 글꼴 속성, 색상 속성, 배경 속성 등
이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.
CSS 속성 분류
Animation 속성 분류 | CSS3 애니메이션 속성(Animation) | 2D/3D 변환 속성(Transform) | Transition 속성(Transition) | Box 속성 | Marquee 속성 |
Size/Position-- | CSS Dimension 속성(Dimension) | CSS Margin 속성(Margin) | CSS Padding 속성(Padding) | CSS Border 속성(Border and Outline) | CSS 위치 지정 |
--목록/테이블 | 다중 열 | Flexible Box | CSS 목록 속성 | 그리드 속성 | CSS 테이블 속성(테이블) |
텍스트 글꼴 색상 | CSS 텍스트 속성(텍스트) | CSS 글꼴 속성(Font) | Color 속성 | CSS 배경 속성(Background) | |
속성을 드물게 사용하세요. | 하이퍼링크 속성 | 콘텐츠 생성(생성됨 콘텐츠) | 페이지된 미디어 속성에 대한 콘텐츠 | 사용자 인터페이스 속성(사용자 인터페이스) | 페이지된 미디어 속성 |
CSS 인쇄 속성(인쇄) |
Attribute | Description | CSS |
---|---|---|
@keyframes | 애니메이션을 지정합니다. | 3 |
animation | animation-play-state 속성을 제외한 모든 애니메이션 속성에 대한 약식 속성입니다. | 3 |
animation-name | @keyframes 애니메이션의 이름을 지정합니다. | 3 |
animation-duration | 애니메이션이 한 주기를 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다. | 3 |
animation-timing-function | 애니메이션의 속도 곡선을 지정합니다. | 3 |
animation-delay | 애니메이션이 시작되는 시점을 지정합니다. | 3 |
animation-iteration-count | 은 애니메이션이 재생되는 횟수를 지정합니다. | 3 |
animation-direction | 다음 주기에서 애니메이션을 역방향으로 재생할지 여부를 지정합니다. | 3 |
animation-play-state | 애니메이션이 실행 중인지 일시 중지되었는지 지정합니다. | 3 |
animation-fill-mode | 객체 애니메이션 시간 이외의 상태를 지정합니다. | 3 |
Property | Description | CSS |
---|---|---|
Background | 모든 배경 속성을 하나의 명령문으로 설정합니다. | 1 |
background-attachment | 배경 이미지를 고정할지 아니면 페이지의 나머지 부분과 함께 스크롤할지 설정합니다. | 1 |
background-color | 요소의 배경색을 설정합니다. | 1 |
background-image | 요소의 배경 이미지를 설정합니다. | 1 |
배경 위치 | 배경 이미지의 시작 위치를 설정합니다. | 1 |
Background-repeat | 배경 이미지 반복 여부와 방식을 설정합니다. | 1 |
background-clip | 배경의 그리기 영역을 지정합니다. | 3 |
background-origin | 배경 이미지의 위치 지정 영역을 지정합니다. | 3 |
background-size | 배경 이미지의 크기를 지정합니다. | 3 |
Property | Description | CSS |
---|---|---|
border | 모두 설정 테두리 속성. | 1 |
border-bottom | 하나의 명령문에서 모든 하단 테두리 속성을 설정합니다. | 1 |
border-bottom-color | 하단 테두리의 색상을 설정합니다. | 2 |
border-bottom-style | 하단 테두리 스타일을 설정합니다. | 2 |
border-bottom-width | 하단 테두리의 너비를 설정합니다. | 1 |
border-color | 네 개의 테두리 색상을 설정합니다. | 1 |
border-left | 하나의 명령문에서 모든 왼쪽 테두리 속성을 설정합니다. | 1 |
border-left-color | 왼쪽 테두리의 색상을 설정합니다. | 2 |
border-left-style | 왼쪽 테두리 스타일을 설정합니다. | 2 |
border-left-width | 왼쪽 테두리의 너비를 설정합니다. | 1 |
border-right | 하나의 명령문으로 모든 오른쪽 테두리 속성을 설정합니다. | 1 |
border-right-color | 오른쪽 테두리의 색상을 설정합니다. | 2 |
border-right-style | 오른쪽 테두리의 스타일을 설정합니다. | 2 |
border-right-width | 오른쪽 테두리의 너비를 설정합니다. | 1 |
border-style | 네 개의 테두리 스타일을 설정합니다. | 1 |
border-top | 하나의 명령문에서 모든 상단 테두리 속성을 설정합니다. | 1 |
border-top-color | 상단 테두리의 색상을 설정합니다. | 2 |
border-top-style | 상단 테두리의 스타일을 설정합니다. | 2 |
border-top-width | 상단 테두리의 너비를 설정합니다. | 1 |
border-width | 네 개의 테두리 너비를 설정합니다. | 1 |
outline | 하나의 명령문에 모든 개요 속성을 설정합니다. | 2 |
outline-color | 윤곽선의 색상을 설정합니다. | 2 |
outline-style | 윤곽선의 스타일을 설정합니다. | 2 |
outline-width | 윤곽선의 너비를 설정합니다. | 2 |
border-bottom-left-radius | 테두리의 왼쪽 하단 모서리 모양을 정의합니다. | 3 |
border-bottom-right-radius | 테두리의 오른쪽 하단 모서리 모양을 정의합니다. | 3 |
border-image | 단축 속성은 모든 border-image-* 속성을 설정합니다. | 3 |
border-image-outset | 테두리 이미지 영역이 테두리를 초과하는 정도를 지정합니다. | 3 |
border-image-repeat | 이미지 테두리를 반복할지, 둥글게 할지, 늘려야 할지 여부입니다. | 3 |
border-image-slice | 이미지 테두리의 안쪽 오프셋을 지정합니다. | 3 |
border-image-source | 테두리로 사용되는 이미지를 지정합니다. | 3 |
border-image-width | 이미지 테두리의 너비를 지정합니다. | 3 |
border-radius | 단축 속성은 네 가지 border-*-radius 속성을 모두 설정합니다. | 3 |
border-top-left-radius | 테두리의 왼쪽 상단 모서리 모양을 정의합니다. | 3 |
border-top-right-radius | 테두리의 오른쪽 하단 모서리 모양을 정의합니다. | 3 |
box-꾸밈-break | 3 | |
box-shadow | 상자에 하나 이상의 그림자를 추가합니다. | 3 |
Attribute | Description | CSS |
---|---|---|
overflow-x | 콘텐츠가 요소 콘텐츠 영역을 초과하는 경우 콘텐츠의 왼쪽/오른쪽 가장자리를 자를지 여부. | 3 |
overflow-y | 콘텐츠가 요소 콘텐츠 영역을 넘을 경우 콘텐츠의 상단/하단 가장자리를 자를지 여부. | 3 |
overflow-style | 오버플로 요소에 대해 선호하는 스크롤 방법을 지정합니다. | 3 |
rotation | 회전점 속성으로 정의된 점을 중심으로 요소를 회전합니다. | 3 |
rotation-point | 은 왼쪽 위 테두리 가장자리로부터의 오프셋 점을 정의합니다. | 3 |
속성 | 설명 | CSS |
---|---|---|
color-profile | 소스의 색상 프로필. | 3 |
opacity | 요소의 불투명도 수준을 지정합니다. | 3 |
rendering-intent | 기본값이 아닌 렌더링 의도 사양에 색상 프로필을 사용할 수 있습니다. | 3 |
속성 | 설명 | CSS |
---|---|---|
bookmark-label | 북마크. | 3 |
bookmark-level | 북마크 수준을 지정합니다. | 3 |
bookmark-target | 북마크 링크의 대상을 지정합니다. | 3 |
float-offset | 요소는 float 속성이 일반적으로 배치되는 방향과 반대 방향으로 배치됩니다. | 3 |
hyphenate-after | 하이픈으로 연결된 단어에서 하이픈 뒤의 최소 문자 수를 지정합니다. | 3 |
hyphenate-before | 은 하이픈으로 연결된 단어에서 하이픈 앞의 최소 문자 수를 지정합니다. | 3 |
hyphenate-character | 은 하이픈이 발생할 때 표시되는 문자열을 지정합니다. | 3 |
hyphenate-lines | 은 요소에서 연속 하이픈 넣기 줄의 최대 개수를 나타냅니다. | 3 |
hyphenate-resource | 브라우저가 하이픈 연결 지점을 결정하는 데 도움이 되는 외부 리소스(쉼표로 구분된 목록)를 지정합니다. | 3 |
하이픈 | 단락 레이아웃을 개선하기 위해 단어 분할 방법을 설정하세요. | 3 |
image-solution | 이미지의 올바른 해상도를 지정합니다. | 3 |
marks | 문서에 자르기 표시나 십자 표시를 추가하세요. | 3 |
string-set | 3 |
Property | Description | CSS |
---|---|---|
height | 요소 높이 설정 . | 1 |
max-height | 요소의 최대 높이를 설정합니다. | 2 |
max-width | 요소의 최대 너비를 설정합니다. | 2 |
min-height | 요소의 최소 높이를 설정합니다. | 2 |
min-width | 요소의 최소 너비를 설정합니다. | 2 |
width | 요소의 너비를 설정합니다. | 1 |
Property | Description | CSS |
---|---|---|
box-align | 지정 상자의 하위 요소를 정렬하는 방법. | 3 |
box-direction | 상자의 하위 요소 표시 방향을 지정합니다. | 3 |
box-flex | 상자의 하위 요소가 확장 가능한지 여부를 지정합니다. | 3 |
box-flex-group | 플렉스 그룹에 가변 요소를 할당합니다. | 3 |
box-lines | 은 상위 요소 상자의 공간을 초과할 때 디스플레이를 줄바꿈할지 여부를 지정합니다. | 3 |
box-ordinal-group | 은 상자의 하위 요소 표시 순서를 지정합니다. | 3 |
box-orient | 상자의 하위 요소를 가로 또는 세로로 정렬해야 하는지 지정합니다. | 3 |
box-pack | 수평 상자의 수평 위치 또는 수직 상자의 수직 위치를 지정합니다. | 3 |
Property | Description | CSS |
---|---|---|
font | 모든 글꼴 속성을 하나의 명령문으로 설정합니다. | 1 |
font-family | 텍스트의 글꼴 계열을 지정합니다. | 1 |
font-size | 텍스트의 글꼴 크기를 지정합니다. | 1 |
font-size-adjust | 요소의 가로세로 값을 지정합니다. | 2 |
font-stretch | 현재 글꼴 모음을 축소하거나 늘입니다. | 2 |
font-style | 텍스트의 글꼴 스타일을 지정합니다. | 1 |
font-variant | 텍스트를 작은 대문자 글꼴로 표시할지 여부를 지정합니다. | 1 |
font-weight | 글꼴의 두께를 지정합니다. | 1 |
Attribute | Description | CSS |
---|---|---|
content | :before 및 :after 의사 요소와 함께 사용하여 생성된 항목 삽입 내용 . | 2 |
counter-increment | 하나 이상의 카운터를 늘리거나 줄입니다. | 2 |
counter-reset | 하나 이상의 카운터를 생성하거나 재설정합니다. | 2 |
quotes | 중첩된 인용문의 인용 유형을 설정합니다. | 2 |
crop | 을 사용하면 대체 요소가 전체 개체가 아닌 개체의 직사각형 영역만 될 수 있습니다. | 3 |
move-to | 스트림에서 요소를 제거하고 문서의 나중에 지점에 다시 삽입합니다. | 3 |
page-policy | 페이지 발생을 기준으로 요소를 카운터에 적용할지 또는 문자열 값에 적용할지 결정합니다. | 3 |
속성 | 설명 | CSS |
---|---|---|
grid-columns | 그리드. | 3 |
grid-rows | 그리드의 각 열 높이를 지정합니다. | 3 |
Attribute | Description | CSS |
---|---|---|
target | 약어 속성, 대상 설정- 이름, 대상 -새 및 대상 위치 속성 . | 3 |
target-name | 링크를 열어야 하는 위치(링크의 대상)를 지정합니다. | 3 |
target-new | 대상 링크를 새 창에서 열지 아니면 기존 창의 새 탭에서 열지 여부를 지정합니다. | 3 |
target-position | 은 새 대상 링크를 배치할 위치를 지정합니다.列3 | CSS 목록 속성(List) 속성 |
1 | list-style-image | |
---|---|---|
1 | list-style-position | |
1 | list-style-type | |
1 | marker-offset | |
2 | ||
Property |
1 | margin-bottom | |
---|---|---|
1 | margin-left | |
1 | margin-right | |
1 | margin-top | |
1 | ||
Property |
3 | marquee-play-count | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
3 | marquee-speed | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
3 | marquee-style | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
3 |
Multi-column
CSS Padding 속성(Padding)
Paged Media(페이지 미디어) 속성
clear 요소의 어느 쪽이 다른 부동 요소를 허용하지 않는지 지정합니다.
page-break-after요소 뒤에 페이징 동작을 설정합니다.
CSS 텍스트 속성(텍스트)
을 사용하면 변환된 요소의 위치를 변경할 수 있습니다.3
전환을 적용하는 CSS 속성의 이름을 지정합니다.3
|
위 내용은 CSS 속성은 어떤 카테고리로 분류되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!