Properties

시간 구간을 백분률로 나누어 키프레임을 생성하고 동작 및 모습에 대한 변화를 만들어 낼 수 있다. 애니메이션을 생성하기 위해서는 기본적으로 키프레임을 정의하고 시간(필요하다면 지연 시간까지 포함)을 설정한다. 옵션으로는 속도 변화, 애니메이션 진행 방향 조정, 애니메이션 반복 횟수, 키프레임 외부와 연계 방식, 그리고 애니메이션 상태를 정의할 수 있다. 다음은 애니메이션을 생성하기 위해 사용되는 속성들이다.

각 요소는 완전히 투명(기본 값)하거나 색상 또는 하나 이상의 이미지로 채워질 수 있는 배경 레이어가 있다. 배경 속성은 사용할 색상(background-color) 및 이미지(background-image)와 크기, 위치, 타일 등을 지정하는 방법을 제시한다. 배경 관련 속성들은 상속되지 않는다.

요소에게 테두리를 지정하기 위한 다양한 관련 속성들이 준비되어 있다. 테두리에서 갖는 디자인적인 성질은 선의 두께, 종류, 색상이다. 이러한 성질을 갖는 테두리를 요소의 상하좌우에 전체 또는 선택적으로 지정할 수 있다.

컨테이너 내의 컨텐츠를 정렬하는 경우에는 다음과 같이 컨테이너와 정렬 대상과의 관계에 따라 다른 방법을 사용한다. block 수준의 요소 내에 존재하는 inline 또는 linie-block 수준의 요소 table의 th 또는 td 내에 존재하는 콘텐츠 Flex Layout Grid Layout 다음은 Flex와 Grid Layout에서의 정렬을 하고자 할 때 사용되는 축을 보여주고 있다. Flex Layout에서의 정렬 축 Flex Layout에서는 동일한 레이아웃 항목이라도 flex-wrap 속성의 값을 wrap을 주어 다음 행으로 밀려 내려가면 기본적으로 별개의 flex 컨테이너로 처리한다. flex-direction 속성이 row 또는 row-reverse 값을 갖는 경우에는 다음과 같이 두 개의 축을 갖는다. flex-direction 속성이 column 또는 column-reverse 값을 갖는 경우에는 다음과 같이 두 개의 축을 갖는다. 또한 writing-mode 속성의 값이 vertical-rl 또는 vertical-lr 일 경우에도 해당된다. Grid Layout에서의 정렬 축 writing-mode 속성의 값이 horizontal-tb 일 경우 다음과 같이 축을 갖는다. writing-mode 속성의 값이 vertical-rl 또는 vertical-lr 일 경우 다음과 같이 축을 갖는다.

CSS 상자 안팎으로 여백과 간격을 정의한다.

CSS에서 텍스트 콘텐츠에 대해 전경색과 불투명도를 지정할 수 있다.

CSS Containment Module에 속한 기술들을 소개한다.

요소가 화면에 렌더링될 때 추가적으로 적용되는 그래픽 작업이다.

유연한 박스 레이아웃을 다루는 속성들을 다룬다. 새로운 Grid 레이아웃이 나오면서 정렬과 관련된 속성들은 CSS Box Alignment 모듈로 분류되었다.

문서 내에서 글꼴을 선택하고 사용하기 위해 다양한 속성들이 지원된다.

흐름을 페이지, 열 또는 영역으로 분할하는 조각화 모델을 다룬다.

웹 페이지에 콘텐츠를 삽입하는 방법을 다룬다. 

그리드(격자) 를 이용한 레이아웃이며 colum과 row를 동시에 제어하고 배치할 수 있다.

CSS 1, 2에서는 background-image 속성에 사용된 이미지가 단일 URL 값으로 설정될 수 있었다. 현재 CSS Images Module Level 3에서는 2D 그라디언트를 이미지로 추가해서 다룬다. 또한 래스터(비트맵) 이미지를 조작하고 CSS 레이아웃 알고리즘에 의해 결정된 컨테이너 내의 이미지와 같은 대체 요소의 크기 조정 또는 위치 지정을 위한 여러 속성을 추가했다. 그리고 이미지 및 기타 유사한 대체 요소에 대한 CSS 크기 조정 알고리즘을 일반적인 방식으로 정의하도록 지원한다.

마커를 생성하는 목록 항목 표시 유형인 ::marker 가상 요소와 마커의 배치 및 스타일을 제어하는 여러 속성들을 포함한다. 또한 마커의 기본 콘텐츠를 생성하는 데 자주 사용되는 특수 숫자 개체인 counter를 정의한다.

개체의 일부를 완전히 또는 부분적으로 숨기는 두 가지 다른 그래픽 작업인 클리핑(clipping)과 마스킹(masking)을 정의한다.

개요 CSS Multi-column Layout Module Level 1 모듈에서 다중 열 레이아웃(multi column layout)에 관련된 속성을 다룬다. 일반적으로 grid 또는 flex 속성을 통해서 레이아웃 처리를 하는데 부모 요소와 자식 요소들 간의 관계를 정의하고 자식 요소들이 위치를 잡는 방식이다. 반면에 다중 열 레이아웃은 필요한 컬럼의 수와 요소의 수는 무관하고 단지 인라인(inline) 콘텐츠가 생성된 공간(컬럼)에서 자연스러운 흐름을 유지하도록 한다. 다중 열 레이아웃은 인라인 콘텐츠를 가지고 있는 요소에게 허용된 공간을 활용하는 방식으로 공간을 생성한다. 관련 속성

시각적 미디어에서 스크롤이 가능한 오버플로(overflow) 처리와 관련된 CSS 속성을 다룬다.

문장 처리와 관련된 CSS

위치 처리와 흐름

Shape 처리

표

텍스트

변형

전이효과

사용자 인터페이스

값 설정