CSS Properties는 요소에게 디자인 처리를 하기 위한 제정된 CSS 표준 속성을 다룬다.
Animations
시간 구간을 백분률로 나누어 키프레임을 생성하고 동작 및 모습에 대한 변화를 만들어 낼 수 있다. 애니메이션을 생성하기 위해서는 기본적으로 키프레임을 정의하고 시간(필요하다면 지연 시간까지 포함)을 설정한다. 옵션으로는 속도 변화, 애니메이션 진행 방향 조정, 애니메이션 반복 횟수, 키프레임 외부와 연계 방식, 그리고 애니메이션 상태를 정의할 수 있다.
다음은 애니메이션을 생성하기 위해 사용되는 속성들이다.
설정된 애니메이션 실행 시간 내에서 어떠한 흐름(가속과 감속)으로 애니메이션을 실행할지를 설정한다.
Backgrounds
각 요소는 완전히 투명(기본 값)하거나 색상 또는 하나 이상의 이미지로 채워질 수 있는 배경 레이어가 있다. 배경 속성은 사용할 색상(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 일 경우 다음과 같이 축을 갖는다.
Flex Layou에서 플렉스 컨테이너(flex container)에 존재하는 레이아웃 항목에 대한 교차축(cross axis) 방향 정렬과 Grid Layout에서 로우축(row axis) 그리드 트랙(grid track)에 존재하는 레이아웃 항목에 대한 컬럼축(column axis) 방향의 정렬을 설정한다.
Flex Layout의 플렉스 컨테이너(flex container)에 존재하는 특정 레이아웃 항목에 대한 교차축(cross axis) 방향 정렬과 Grid Layout의 로우축(row axis) 그리드 트랙(grid track)에 존재하는 특정 레이아웃 항목에 대한 컬럼축(column axis) 방향의 정렬을 설정한다.
CSS 1, 2에서는 background-image 속성에 사용된 이미지가 단일 URL 값으로 설정될 수 있었다. 현재 CSS Images Module Level 3에서는 2D 그라디언트를 이미지로 추가해서 다룬다.
또한 래스터(비트맵) 이미지를 조작하고 CSS 레이아웃 알고리즘에 의해 결정된 컨테이너 내의 이미지와 같은 대체 요소의 크기 조정 또는 위치 지정을 위한 여러 속성을 추가했다. 그리고 이미지 및 기타 유사한 대체 요소에 대한 CSS 크기 조정 알고리즘을 일반적인 방식으로 정의하도록 지원한다.
SVG의 <mask> 요소가 휘도 또는 알파 마스크로 사용되는지 여부를 설정한다.
Multi column Layout
개요
CSS Multi-column Layout Module Level 1 모듈에서 다중 열 레이아웃(multi column layout)에 관련된 속성을 다룬다. 일반적으로 grid 또는 flex 속성을 통해서 레이아웃 처리를 하는데 부모 요소와 자식 요소들 간의 관계를 정의하고 자식 요소들이 위치를 잡는 방식이다. 반면에 다중 열 레이아웃은 필요한 컬럼의 수와 요소의 수는 무관하고 단지 인라인(inline) 콘텐츠가 생성된 공간(컬럼)에서 자연스러운 흐름을 유지하도록 한다. 다중 열 레이아웃은 인라인 콘텐츠를 가지고 있는 요소에게 허용된 공간을 활용하는 방식으로 공간을 생성한다.
관련 속성