Properties

Properties

  • bug_report

Properties

CSS Properties는 요소에게 디자인 처리를 하기 위한 제정된 CSS 표준 속성을 다룬다.

  • Animations

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

      애니메이션의 여러 속성을 한번에 정의할 수 있도록 해주는 축약식 속성이다.
    • animation-delay

      애니메이션의 동작을 초(s) 또는 밀리세컨드(ms) 단위로 지연시킨다.
    • animation-direction

      애니메이션 키프레임의 실행 순서를 설정한다.
    • animation-duration

      애니메이션의 실행 시간을 초(s) 또는 밀리세컨드(ms) 단위로 설정한다.
    • animation-fill-mode

      키프레임에 설정된 style과 요소에게 기본적으로 적용한 style과의 관계를 설정한다.
    • animation-iteration-count

      애니메이션의 실행 횟수를 설정한다. 기본적으로 1회 실행한다.
    • animation-name

      애니메이션으로 사용할 미리 정의된 키프레임 셋의 이름을 설정한다.
    • animation-play-state

      애니메이션의 동작을 일시 정지와 실행으로 제어한다.
    • animation-timing-function

      설정된 애니메이션 실행 시간 내에서 어떠한 흐름(가속과 감속)으로 애니메이션을 실행할지를 설정한다.
  • Backgrounds

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

      요소의 배경과 관련된 모든 속성을 한 번에 설정하는 축약식 속성이다.
    • background-attachment

      선택자 요소에 배경으로 설정된 이미지를 스크롤 또는 고정 여부를 설정한다.
    • background-clip

      요소 내에서 배경이 적용되는 범위를 주어진 상수 값으로 클리핑(자름) 한다.
    • background-color

      선택자를 갖는 요소에 배경색을 적용한다.
    • background-image

      선택자를 갖는 요소에 배경 이미지를 설정한다.
    • background-origin

      요소 내 배경 이미지의 원점 위치를 설정한다.
    • background-position

      선택자를 갖는 요소의 배경 이미지의 위치를 설정한다.
    • background-repeat

      선택자를 갖는 요소의 배경으로 설정된 이미지의 반복 여부를 설정한다.
    • background-size

      요소에게 적용될 배경 이미지의 크기를 지정한다.
  • Borders

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

      요소의 상하좌우 테두리의 두께, 모양, 색상을 한 번에 설정하는 축약식 속성이다.
    • border-bottom

      요소 하단 테두리의 두께, 모양, 색상 속성을 한번에 설정하는 축약식 속성이다.
    • border-bottom-color

      요소의 아래쪽 테두리의 색상을 설정한다.
    • border-bottom-left-radius

      요소의 하단 왼쪽의 모서리에 대한 둥글기 처리를 할 수 있다.
    • border-bottom-right-radius

      요소의 하단 오른쪽의 모서리에 대한 둥글기 처리를 할 수 있다.
    • border-bottom-style

      요소의 하단 테두리의 모양을 설정한다.
    • border-bottom-width

      요소의 하단 테두리의 두께를 설정한다.
    • border-color

      요소의 테두리의 색상을 설정한다.
    • border-image

      요소의 테두리를 이미지를 이용하여 생성하는 관련 속성을 한번에 설정할 수 있는 축약식 속성이다.
    • border-image-outset

      테두리에 적용된 이미지의 영역이 요소의 테두리 영역을 넘어 확장되는 크기를 설정한다.
    • border-image-repeat

      요소의 네 변 테두리에 이미지를 어떻게 반복적으로 적용할 지를 결정한다.
    • border-image-slice

      요소의 테두리에 적용될 이미지의 범위를 요소의 방향에 따라 좌표, 비율로 설정한다.
    • border-image-source

      요소의 테두리에 적용될 이미지의 경로를 url() 함수를 이용해서 설정한다.
    • border-image-width

      테두리 이미지의 너비를 지정한다.
    • border-left

      요소의 왼쪽 테두리의 두께, 모양, 색상 속성을 한번에 설정하는 축약식 속성이다.
    • border-left-color

      요소의 왼쪽 테두리의 색상을 설정한다.
    • border-left-style

      요소의 왼쪽 테두리의 모양을 설정한다.
    • border-left-width

      요소의 왼쪽 테두리의 두께를 설정한다.
    • border-radius

      요소의 모서리를 둥글게 처리한다.
    • border-right

      요소의 오른쪽 테두리의 두께, 모양, 색상 속성을 한번에 설정하는 축약식 속성이다.
    • border-right-color

      요소의 오른쪽 테두리의 색상을 설정한다.
    • border-right-style

      요소의 오른쪽 테두리의 모양을 설정한다.
    • border-right-width

      요소의 오른쪽 테두리의 두께를 설정한다.
    • border-style

      요소의 테두리의 모양을 설정한다.
    • border-top

      요소의 상단 테두리의 두께, 모양, 색상 속성을 한번에 설정하는 축약식 속성이다.
    • border-top-color

      요소의 위쪽 테두리의 색상을 설정한다.
    • border-top-left-radius

      요소의 상단 왼쪽의 모서리에 대한 둥글기 처리를 할 수 있다.
    • border-top-right-radius

      요소의 상단 오른쪽의 모서리에 대한 둥글기 처리를 할 수 있다.
    • border-top-style

      요소의 상단 테두리의 모양을 설정한다.
    • border-top-width

      요소의 상단 테두리의 두께를 설정한다.
    • border-width

      요소의 테두리의 두께를 설정한다.
    • box-shadow

      요소에게 그림자를 적용한다.
  • Box Alignment

    컨테이너 내의 컨텐츠를 정렬하는 경우에는 다음과 같이 컨테이너와 정렬 대상과의 관계에 따라 다른 방법을 사용한다. 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 일 경우 다음과 같이 축을 갖는다.
    • align-content

      Flex Layout에서 플렉스 컨테이너(flex container)에 대한 교차축(cross axis) 방향 정렬과 Grid Layout에서 로우축(row axis) 그리드 트랙(grid track)에 대한 컬럼축(column axis) 방향으로 정렬을 설정한다.
    • align-items

      Flex Layou에서 플렉스 컨테이너(flex container)에 존재하는 레이아웃 항목에 대한 교차축(cross axis) 방향 정렬과 Grid Layout에서 로우축(row axis) 그리드 트랙(grid track)에 존재하는 레이아웃 항목에 대한 컬럼축(column axis) 방향의 정렬을 설정한다.
    • align-self

      Flex Layout의 플렉스 컨테이너(flex container)에 존재하는 특정 레이아웃 항목에 대한 교차축(cross axis) 방향 정렬과 Grid Layout의 로우축(row axis) 그리드 트랙(grid track)에 존재하는 특정 레이아웃 항목에 대한 컬럼축(column axis) 방향의 정렬을 설정한다.
    • column-gap

      컬럼(열)과 컬럼(열) 사이의 간격을 지정한다.
    • gap

      Flex Layout과 Grid Layout에서 레이아웃 항목의  row-gap, column-gap 속성을 한번에 설정하는 축약식 속성이다.
    • justify-content

      Flex Layout에서 플렉스 컨테이너(flex container) 내 레이아웃 항목을 주축(main axis) 방향으로 정렬을 설정한다. Grid Layout에서는 로우축(row axis) 그리드 트랙(grid track)을 로우축(row axis) 방향으로 정렬을 설정한다.
    • justify-items

      Grid Layout에서 레이아웃 항목을 기본 트랙 내에서 정렬을 지정한다.
    • justify-self

      정렬 대상이 정렬 컨테이너 내에서 정렬되는 방식을 지정한다.
    • order

      Flex 레이아웃 또는 Grid 레이아웃 항목의 위치에 대한 순서를 지정한다.
    • place-content

      align-content 속성과 justify-content 속성 값을 한번에 작성할 수 있는 축약성 속성이다.
    • place-items

      align-items 속성과 justify-items 속성을 동시에 작성할 수 있는 축약성 속성이다.
    • place-self

      align-self 속성과 justify-self 속성 값을 한번에 작성할 수 있는 축약성 속성이다.
    • row-gap

      행(row)과 행(row) 사이의 간격을 지정한다.
  • Box Model

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

      요소의 주변 요소와의 상하좌우 간격을 설정한다.
    • margin-bottom

      요소의 하단 주변 요소와 간격을 설정한다.
    • margin-left

      요소의 왼쪽 주변 요소와 간격을 설정한다.
    • margin-right

      요소의 오른쪽 주변 요소와 간격을 설정한다.
    • margin-top

      요소의 상단 주변 요소와 간격을 설정한다.
    • padding

      요소의 상하좌우 내부 여백을 설정한다.
    • padding-bottom

      요소의 하단 내부 여백을 설정한다.
    • padding-left

      요소의 왼쪽 내부 여백을 설정한다.
    • padding-right

      요소의 오른쪽 내부 여백을 설정한다.
    • padding-top

      요소의 상단 내부 여백을 설정한다.
  • Box Sizing

    • box-sizing

      UA(User Agent)별 박스의 width, height을 계산하는 방식의 차이를 해결하기 위한 속성이다.
    • height

      요소의 세로 크기를 설정한다.
    • max-height

      요소의 최대 세로 크기를 설정한다.
    • max-width

      요소의 최대 가로 크기를 설정한다.
    • min-height

      요소의 최소 세로 크기를 설정한다.
    • min-width

      요소의 최소 가로 크기를 설정한다.
    • width

      요소의 가로 크기를 설정한다.
  • Color

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

      폰트에 색상을 적용한다.
    • opacity

      요소의 불투명도를 레벨로 설정한다.
  • Compositing and Blending

    • background-blend-mode

      복수의 배경이 설정되어 겹쳐진 경우 혼합 방식을 설정할 수 있다.
    • isolation

      새로운 Stacking content를 만들어야 하는지의 여부를 정의한다.
    • mix-blend-mode

      요소의 내용이 부모 배경과 혼합되는 방법을 지정한다.
  • Containment

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

      특정 요소와 콘텐츠가 문서 트리의 다른 부위와 독립(격리)되어 있음을 나타낼 때 사용한다. 웹브라우저는 문서를 렌더링시 필요한 계산을 문서의 전체 DOM이 아닌 일부에서만 수행함으로써 성능 향상에 도움을 준다.
    • content-visibility

      요소가 콘텐츠를 렌더링할지 여부를 제어하고 강력한 포함 집합을 강제하여 유저 에이전트(user agent)가 필요할 때까지 대규모 레이아웃 및 렌더링 작업을 잠재적으로 생략할 수 있도록 한다.
  • Filter Effects

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

      색의 번짐이나 색 요소 뒤의 영역으로 이동 같은 그래픽 효과를 적용 할 수 있다. 적용 요소 뒤에 있는 모든 요소에 적용되므로 효과를 보려면 해당 요소의 배경을 투명하게 만들어야 한다.
    • filter

      요소에게 함수를 통해 시각적 효과를 정의한다.
  • Flexible Box Layout

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

      플렉스 컨테이너 내의 플렉스 항목에 대한 flex-grow, flex-shrink, flex-basis 속성을 한번에 작성한다.
    • flex-basis

      플렉스 레이아웃 항목의 주축 방향의 크기를 설정한다. 기본 값은 컨테이너 내 내용의 크기에 따른다.
    • flex-direction

      플렉스 레이아웃 항목의 방향을 설정한다.
    • flex-flow

      flex-direction과 flex-wrap 속성을 한번에 지정하는 축약식 속성이다.
    • flex-grow

      플렉스 컨테이너 내의 레이아웃 항목이 차지하는 비율을 설정한다.
    • flex-shrink

      플렉스 컨테이너 내의 레이아웃 항목들의 주축 방향의 크기의 합이 플렉스 컨테이너보다 클 경우 축소 비율을 지정한다.
    • flex-wrap

      공간이 부족할 경우 플렉스 레이아웃 항목의 줄바꿈 여부를 지정한다.
  • Fonts

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

      폰트의 종류, 크기, 행간, 스타일, 굵기, 대소문자 처리를 한번에 설정하는 축약형 속성이다.
    • font-family

      글꼴을 지정한다.
    • font-kerning

      글꼴에 저장된 커닝 정보의 사용을 제어한다.
    • font-size

      폰트의 크기를 설정한다.
    • font-style

      글꼴의 모양을 설정한다.
    • font-variant

      영문 소문자를 작은 대문자로(소문자 크기의 대문자)로 변경한다.
    • font-weight

      폰트의 굵기를 설정한다.
  • Fragmentation

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

      요소의 상자가 조각화될 때 요소의 배경, 패딩, 테두리, 테두리 이미지, 상자의 그림자, 여백 및 클립 경로가 적용되는 방식을 지정한다.
  • Generated Content

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

      가상 요소로 생성할 콘텐츠를 설정한다.
  • Grid Layout

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

      그리드 레이아웃을 생성하는 세부 속성들을 한번에 작성하는 축약식 속성이다.
    • grid-area

      그리드 레이아웃에서 각각의 레이아웃 항목의 위치 지정에 관련된 세부 속성을 한번에 작성하는 축약 속성이다.
    • grid-auto-columns

      그리드 레이아웃 컨테이너의 column 크기를 암시적으로 설정하여 명시적으로 크기가 설정되지 않은 column에 사용된다.
    • grid-auto-flow

      자동 배치된 항목이 그리드에 삽입되는 방법을 제어한다.
    • grid-auto-rows

      그리드 레이아웃 컨테이너의 row 크기를 암시적으로 설정하여 명시적으로 크기가 설정되지 않은 row에 사용된다.
    • grid-column

      그리드 컨테이너 내에서 레이아웃 항목의 위치를 지정하는 grid-column-start와 grid-column-end 속성에 대한 축약 속성이다.
    • grid-column-end

      항목이 몇 개의 column으로 확장되는지 또는 항목이 끝나는 column의 줄의 위치를 정의한다.
    • grid-column-start

      항목을 시작할 column의 줄의 위치를 정의한다.
    • grid-row

      그리드 컨테이너 내에서 레이아웃 항목의 위치를 지정하는 grid-row-start와 grid-row-end 속성에 대한 축약 속성이다.
    • grid-row-end

      항목이 몇 개의 row로 확장되는지 또는 항목이 끝나는 row의 위치를 정의한다.
    • grid-row-start

      항목이 시작될 row의 위치를 정의한다.
    • grid-template

      grid-template-rows, grid-template-columns, grid-template-areas 속성을 한번에 정의하는 축약 속성이다.
    • grid-template-areas

      모든 레이아웃 항목에 대한 전체적인 그리드 레이아웃 구조를 쉽게 시각화시키는 방법을 제공한다.
    • grid-template-columns

      그리드 레이아웃에서 colum의 수와 너비를 명시적으로 지정한다.
    • grid-template-rows

      그리드 레이이웃에서 row의 수와 높이를 명시적으로 지정한다.
  • Images

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

      이미지의 방향을 바르게 지정하는 방법을 제공한다.
    • image-rendering

      이미지 스케일링 알고리즘을 설정한다.
    • object-fit

      컨테이너의 크기에 맞게 이미지 또는 비디오 요소의 크기를 조정하는 방법을 지정한다.
    • object-position

      컨테이너 내에 이미지 또는 비디오 요소의 위치를 설정한다.
  • Lists and Counters

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

      하나 이상의 CSS 카운터 값을 늘리거나 줄인다.
    • counter-reset

      하나 이상의 CSS 카운터를 만들거나 재설정한다.
    • list-style

      목록 관련 CSS 속성을 한번에 설정하는 축약식 속성이다.
    • list-style-image

      목록의 항목에 대한 마커를 사용자의 이미지로 설정한다.
    • list-style-position

      목록의 항목에 적용할 마커의 위치를 내어쓰기와 들여쓰기로 설정한다.
    • list-style-type

      목록의 마커의 모양을 설정한다.
  • Masking

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

      이미지가 포함하는 컨테이너보다 클 경우 사각 형태로 클리핑한다.
    • clip-path

      요소의 클리핑 범위를 설정한다.
    • mask

      마스크 설정에 필요한 관련 속성들을 빠르게 작성할 수 있는 축약 속성이다.
    • mask-border

      요소 테두리의 가장자리를 따라 마스크를 만들 수 있는 축약 속성이다.
    • mask-border-mode

      마스크 테두리에 사용되는 혼합 모드(blending mode)를 지정한다.
    • mask-border-outset

      마스크 테두리를 적용할 상자로부터의 거리를 지정한다.
    • mask-border-repeat

      소스 이미지의 가장자리 영역이 요소의 마스크 테두리 크기에 맞게 조정되는 방식을 지정한다.
    • mask-border-slice

      mask-border-source 속성에 의해 설정된 이미지를 영역으로 나눈다. 이 영역은 요소의 마스크 테두리 구성 요소를 형성하는데 사용된다.
    • mask-border-source

      요소의 마스크 테두리를 만드는 데 사용되는 소스 이미지를 설정한다.
    • mask-border-width

      요소의 마스크 테두리 너비를 설정한다.
    • mask-clip

      마스크의 영향을 받는 영역을 결정한다.
    • mask-composite

      현재 마스크 레이어 아래에 마스크 레이어가 있는 합성 작업을 나타낸다.
    • mask-image

      요소의 마스크 레이어로 사용되는 이미지를 설정한다.
    • mask-mode

      mask-image 속성에 의해 정의된 마스크 참조가 휘도 또는 알파 마스크로 처리되는지 여부를 설정한다.
    • mask-origin

      마스크의 원점을 지정한다.
    • mask-position

      정의된 각 마스크 이미지에 대해 mask-origin에서 설정한 마스크 위치 레이어를 기준으로 초기 위치를 설정한다.
    • mask-repeat

      마스크 이미지가 반복되는 방식을 설정한다.
    • mask-size

      마스크 이미지의 크기를 지정한다. 이미지의 크기는 원래 비율을 유지하기 위해 완전히 또는 부분적으로 제한될 수 있다.
    • mask-type

      SVG의 <mask> 요소가 휘도 또는 알파 마스크로 사용되는지 여부를 설정한다.
  • Multi column Layout

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

      컨테이너의 텍스트를 컬럼(열)으로 나룰 숫자를 지정한다.
    • column-fill

      컬럼(열)을 채우는 방법을 지정한다.
    • column-gap

      컬럼간의 간격을 설정한다.
    • column-rule

      컬럼(열) 처리에서 컬럼의 너비, 컬럼 구분선의 스타일 및 색상을 축약식으로 설정한다.
    • column-rule-color

      컬럼(열) 사이의 구분선에 대한 색상을 지정한다.
    • column-rule-style

      컬럼(열) 사이의 구분선에 대한 스타일을 설정한다.
    • column-rule-width

      컬럼(열)을 구분하는 선의 너비를 지정한다.
    • column-span

      요소가 차지하는 열의 개수를 지정한다.
    • column-width

      컬럼(열)의 너비를 지정한다.
    • columns

      컬럼(열)의 너비와 개수를 한번에 설정하는 축약식 속성이다.
  • Overflow

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

      요소 내의 콘텐츠의 크기가 정해진 요소 영역을 벗어나는 경우에 가로, 세로 방향으로 벗어나는 콘텐츠를 속기 방식으로 설정한다.
    • overflow-clip-margin

    • overflow-x

      정해진 크기의 요소 내 콘텐츠가 넘치는 경우 가로 방향으로 어떻게 처리할 것인지를 설정한다.
    • overflow-y

      정해진 크기의 요소 내 콘텐츠가 넘치는 경우 세로 방향으로 어떻게 처리할 것인지를 설정한다.
    • scroll-behavior

      스크롤이 가능한 컨테이너 내에서 링크를 클릭할 때 스크롤 위치에 부드럽게 이동할지에 대한 여부를 지정한다.
    • scrollbar-gutter

      overflow 속성에 의해 제공되는 스크롤바의 존재를 제어하는 기능과는 별도로 작성자에게 스크롤바 거터(gutter)의 존재에 대한 제어를 한다.
    • text-overflow

      텍스트가 컨테이너 내에서 모두 표시되지 못할 경우 사용자에게 알리는 방식을 설정한다.
  • Paragraph

    문장 처리와 관련된 CSS
    • direction

      block-level 요소 내에 텍스트의 (쓰기)방향을 지정한다.
    • letter-spacing

      문자 간격을 조정한다.
    • line-height

      콘텐츠의 행간을 조정한다.
    • tab-size

      보존된 탭 문자를 렌더링하는 데 사용되는 탭의 크기를 결정한다.
    • white-space

      선택자 요소 내부의 공백을 처리하는 방법을 설정하며 줄바꿈에 관여한다.
    • word-break

      행의 끝에 존재하는 단어를 구성하는 문자들이 끊기는 방식을 지정한다.
    • word-spacing

      문장내 공백이 존재하는 경우 공백을 늘리거나 줄인다.
    • writing-mode

      텍스트의 행이 가로 또는 세로로 설정되도록 한다.
  • Positioning & Flow

    위치 처리와 흐름
    • bottom

      요소의 아래쪽 위치 값을 설정한다.
    • clear

      이전 요소에서 float 속성이 적용되는 경우에 그 영향에서 벗어나게 한다.
    • display

      요소의 화면 출력 방식을 설정한다.
    • float

      요소의 위치를 기본 흐름에서 벗어나 부모 요소를 기준으로 왼쪽이나 오른쪽으로 위치시킬 수 있다.
    • left

      요소의 왼쪽 위치 값을 설정한다.
    • margin-block-end

      요소의 쓰기 모드(writing-mode) 설정에 따른 텍스트 방향을 기준으로 논리적인 간격 끝나는 값을 설정한다.
    • margin-block-start

      요소의 쓰기 모드(writing-mode) 설정에 따른 텍스트 방향을 기준으로 논리적인 간격 시작 값을 설정한다.
    • position

      요소의 출력 위치 결정 방식을 정의한다.
    • right

      요소의 오른쪽 위치 값을 설정한다.
    • top

      요소의 상단 위치 값을 설정한다.
    • visibility

      요소의 화면 표시 여부를 설정하며 hidden 설정시 원래 가지고 있던 요소의 영역은 그대로 유지된다.
    • z-index

      스태킹 컨텍스트(stacking context)를 갖는 요소에게 Z축 위치의 순서를 지정한다.
  • Shapes

    Shape 처리
    • shape-outside

      인접 인라인 콘텐츠를 형태에 따라 감싸는 처리를 한다.
  • Table

    • border-collapse

      테이블의 셀 구분선을 처리하기 위한 환경을 설정한다.
    • border-spacing

      테이블에서 인접한 셀과 셀의 간격을 설정한다.
    • caption-side

      테이블 캡션의 위치를 설정한다.
    • empty-cells

      빈 셀에 테두리를 표시할 지 여부를 설정한다.
    • table-layout

      표의 가로크기를 고정시키거나 자동으로 조정되도록 할 수 있다.
    • vertical-align

      inline-level 요소, display 타입이 table-cell인 요소의 세로 방향 정렬을 지정한다.
  • Text

    텍스트
    • hyphens

      컨테이너의 공간에 따라 텍스트가 여러줄에 걸쳐 줄바꿈될 때 단어에 하이픈을 삽입하는 방법을 지정한다.
    • quotes

      인용 부호의 유형을 설정한다.
    • tab-size

      탭 문자의 너비를 지정한다.
    • text-align

      선택자를 갖는 요소내 콘텐츠를 정렬한다.
    • text-combine-upright

      단일 타이포그래피 문자 단위의 공간에 여러 타이포그래피 문자 단위의 조합을 지정한다.
    • text-decoration

      텍스트의 장식을 설정한다.
    • text-decoration-color

      텍스트에 적용할 선의 종류를 지정한다.
    • text-decoration-line

      텍스트에 적용할 선의 종류를 지정한다.
    • text-decoration-style

      텍스트에 적용할 선의 모양을 지정한다.
    • text-indent

      인라인 콘텐츠 줄에 적용되는 들여쓰기를 지정한다. 들여쓰기는 줄 상자의 시작 가장자리에 적용된 여백으로 처리된다.
    • text-justify

      text-align 속성이 'justify'로 설정된 경우 텍스트의 정렬 방법을 지정한다.
    • text-orientation

      한 줄에 있는 텍스트의 방향을 설정한다.
    • text-shadow

      텍스트에 그림자 처리를 한다.
    • text-transform

      텍스트의 대소문자 설정을 한다.
    • unicode-bidi

      direction 속성과 함께 문서의 양방향 텍스트 처리 방법을 설정한다.
  • Transforms

    변형
    • backface-visibility

      요소 뒤쪽의 모습을 보여주거나 숨기는 설정을 한다.
    • perspective

      원근법을 적용하는 속성이다.
    • perspective-origin

      입체 대상을 보고 있는 투시점의 위치를 정의한다.
    • transform

      요소에게 회전, 크기, 이동, 뒤틀림 등의 처리를 할 수 있다.
    • transform-box

      변형과 관련된 참조 상자 타입을 지정한다.
    • transform-origin

      transform 속성을 통해 변형이 적용될 경우에 변형의 기준점을 설정할 수 있다.
    • transform-style

      중첩된 요소에게 변형을 주고자 하는 경우에 3차원 공간에서 렌더링 되는 방법을 지정한다.
  • Transitions

    전이효과
    • transition

      요소에게 전이효과에 관련된 세부 속성을 한꺼번에 정의하여 전이효과를 실행한다.
    • transition-delay

      전이 효과의 동작을 지연시킨다.
    • transition-duration

      전이효과가 지속되는 시간을 설정한다.
    • transition-property

      전이 효과로 처리하기 위한 속성을 정의한다.
    • transition-timing-function

      주어진 시간 내에 전이효과를 어떠한 방식으로 진행(연출)할 지를 설정한다.
  • User Interface

    사용자 인터페이스
    • caret-color

      텍스트 영역 또는 편집 가능한 요소의 커서 색상을 지정한다.
    • cursor

      커서의 모양을 설정한다.
    • outline

      요소에 대한 시각적 집중을 위해서 경계 밖에서 요소의 외곽선을 만드는 축약식 속성이다.
    • outline-color

      요소의 윤곽선의 색상을 설정한다.
    • outline-offset

      요소의 외곽선과 가장자리 사이의 공간을 설정한다.
    • outline-style

      요소 바깥쪽 윤곽선의 모양을 지정한다.
    • outline-width

      요소 바깥쪽 윤곽선의 두께를 지정한다.
    • resize

      사용자가 요소의 크기를 직접 조정할 수 있는지 여부와 그 방법을 지정한다.
    • user-select

      텍스트가 블럭으로 선택되는 여부를 설정할 수 있다.
  • Values

    값 설정
    • --*

      사용자 정의 속성을 설정할 때 연속된 하이픈(--)은 접두어로 사용한다.
    • all

      unicode-bidi 및 방향을 제외한 모든 속성을 초기 또는 상속된 값으로 재설정한다.
  • Will Change

    • will-change

      요소에게 CSS 처리시 예상되는 변화의 종류에 관한 힌트를 웹브라우저에게 제공하게 하여 사전에 최적화한다.