search

Properties

Properties

CSS Properties

설명

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

  • Animations

    애니메이션
    • animation

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

      애니메이션의 동작을 초 또는 밀리세컨드 단위로 지연시킨다.
    • 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

      요소의 배경과 관련된 모든 속성을 한 번에 설정하는 축약식 속성이다. CSS3 방식과 그 이전 방식으로 정의가 가능하다. 세부 속성의 작성 순서는 정해져 있지 않다.  세부 속성은 생략될 수 있으며 생략이 된 경우에는 해당 속성의 기본 값으로 설정된다.
    • background-attachment

      선택자 요소에 배경으로 설정된 이미지를 스크롤 또는 고정 여부를 설정한다. 'scroll'로 설정된 경우에는 콘텐츠와 함께 배경 이미지도 함께 스크롤 되어진다. 'fixed'로 설정된 경우에는 배경 이미지는 그대로 고정되어 콘텐츠와 스크롤 되어진다.
    • background-blend-mode

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

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

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

      선택자를 갖는 요소에 배경 이미지를 설정한다. CSS 3.0에서는 두 개 이상의 배경 설정이 가능하다.
    • 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 Alignment

    박스 정렬
    • align-content

      Flexible Layout에서의 flex-wrap이 wrap 일 때와 Grid Layout일 경우 항목의 세로 방향 정렬 라인을 설정한다.
    • align-items

      레이아웃 항목의 세로 방향의 영역 설정에 대한 처리 방식을 설정한다. 기본 값은 항목의 영역을 늘려 맞춘다.
    • align-self

      유연한 컨테이너 내부의 자리를 차지하고 있는 선택된 항목에 대한 정렬을 설정한다.
    • column-gap

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

      항목이 기본 축에서 사용 가능한 공간을 모두 사용하지 않는 경우 flex 컨테이너 항목을 정렬한다.
    • justify-items

    • justify-self

    • order

      flex 항목의 위치에 대한 순서를 지정한다.
    • place-content

    • place-items

    • place-self

    • row-gap

      요소간(그리드)의 행 사이의 간격을 지정한다.
    • text-align

      선택자를 갖는 요소내 콘텐츠를 정렬한다.
  • Box Decoration

    박스 디자인
    • box-decoration-break

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

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

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

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

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

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

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

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

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

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

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

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

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

    색상
    • color

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

      요소의 불투명도를 레벨로 설정한다. 요소의 자식 요소까지 적용된다. 0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다.
  • Contents

    콘텐츠
    • clip

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

      가상 요소로 생성할 콘텐츠를 설정한다.
    • image-rendering

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

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

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

    필터 효과
    • backdrop-filter

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

      요소에게 함수를 통해 시각적 효과를 정의한다. 주로 이미지에게 적용한다.
    • isolation

      새로운 Stacking content를 만들어야 하는지의 여부를 정의한다. mix-blend-mode 속성과 함께 사용할 때 특히 유용하다.
    • mix-blend-mode

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

    유연한 박스 레이아웃을 다루는 속성들
    • flex

      부모 요소 안에 있는 컨테이너 항목이 차지하는 크기를 한번에 설정한다.
    • flex-basis

      유연한 레이아웃 항목의 가로 길이를 설정한다. 기본 값은 컨테이너 내 내용의 크기에 따른다.
    • flex-direction

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

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

      같은 컨테이너 내의 레이아웃 항목이 다른 유연한 항목에 비해 얼마나 늘어날지를 설정한다.
    • flex-shrink

      같은 컨테이너 내의 다른 유연한 레이아웃 항목과 비교하여 축소 비율을 지정한다.
    • flex-wrap

      공간이 부족할 경우 유연한 레이아웃 항목의 줄바꿈 여부를 지정한다.
  • Font

    글꼴
    • font

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

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

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

      폰트의 크기를 설정한다. 기본 값은 medium이다.
    • font-stretch

      텍스트를 넓히거나 좁힐 수 있다.
    • font-style

      글꼴의 모양을 설정한다. 기본 값은 normal이다.
    • font-variant

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

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

    그리드(격자) 레이아웃
    • grid

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

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

      그리드 컨테이너의 열 크기를 암시적으로 설정하며 크기가 설정되지 않은 열에도 영향을 준다.
    • grid-auto-flow

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

      그리드 컨테이너의 행 크기를 암시적으로 설정하며 크기가 설정되지 않은 열에도 영향을 준다.
    • grid-column

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

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

      그리드 레이아웃에서 열 사이의 간격을 정의한다. 이후 column-gap 속성으로 변경되어 그리드만을 위한 속성이 아닌 방향으로 바뀌었다.
    • grid-column-start

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

      그리드 레이아웃에서 행과 열 사이의 간격을 한번에 정의하는 축약성 속성이다.
    • grid-row

      그리드 행(row) 내에서 그리드 항목의 위치를 지정하는 grid-row-start와 grid-row-end 속성에 대한 축약성 속성이다.
    • grid-row-end

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

      그리드 레이아웃에서 행 사이의 간격을 지정한다. 이후 row-gap 속성으로 변경되어 그리드만을 위한 속성이 아닌 방향으로 바뀌었다.
    • grid-row-start

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

      grid-template-rows, grid-template-columns, grid-template-areas 속성을 한번에 정의하는 축약성 속성이다. 명시적으로 항목의 크기를 지정할 때 사용한다.
    • grid-template-areas

      그리드 레이아웃 내의 영역을 지정한다. grid-area 속성을 사용하여 그리드 항목의 이름을 지정한 다음 grid-template-areas 속성의 값으로 참조할 수 있다. 각 영역은 인용 부호로 감싸 정의한다. 이름 없는 격자 항목을 나타내려면 마침표를 사용한다.
    • grid-template-columns

      그리드 레이아웃에서 열의 수와 너비를 명시적으로 지정한다. 값은 공백으로 구분된 목록이며 각 값은 각 열의 크기로 지정된다.
    • grid-template-rows

      그리드 레이이웃의 행의 수와 높이를 명시적으로 지정한다. 값은 공백으로 구분된 목록이며 각 값은 각 행의 높이로 지정된다.
  • Lists and Counters

    목록과 번호
    • counter-increment

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

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

      목록 관련 CSS 속성을 한번에 설정하는 축약식 속성이다. 공백으로 구분된 값의 설정 순서는 정해지지 않았다.
    • list-style-image

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

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

      목록의 마커의 모양을 설정한다. 기본 값은 disc이다. 다양한 마커의 모양을 확인하려면 문서 아래의 테스트 도구를 확인하라.
  • Multi column Layout

    다중 열 레이아웃
    • column-count

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

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

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

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

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

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

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

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

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

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

    문장 처리와 관련된 CSS
    • direction

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

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

      콘텐츠의 행간을 조정한다.
    • white-space

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

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

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

      공백 단위로 구성된 문자열이 긴 경우 행의 끝에 다다른 경우 다음 행으로 처리를 어떻게 할 것인지를 설정한다.
    • writing-mode

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

    위치 처리와 흐름
    • bottom

      요소의 아래쪽 위치 값을 설정한다. 요소는 position 속성 값이 absolute 또는 fixed로 설정되어 있어야 한다. 부모 요소의 position 값이 relative이며 하위 요소가 position 값이 absolute라면 부모 요소의 아래쪽으로 부터의 위치 값으로 설정된다. 부모 요소가 position 속성 값이 static인 경우 하위 요소가 position 속성 값을 absolute로 되어 있을 때 위치 기준은 부모 요소가 아니라 웹브라우저의 뷰포트가 된다. 부모 요소가 어떠한 position 값을 가지고 있다하더라도 하위 요소가 position 값이 fixed인 경우에는 웹브라우저의 뷰포트를 기준으로 아래쪽으로 부터의 위치값으로 지정된다.
    • clear

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

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

      요소 자신의 위치를 기본 흐름에서 벗어나 왼쪽이나 오른쪽으로 위치 시킬수 있다. 기본 흐름에서 벗어날 수 있지만 기본 흐름을 갖고 있는 주변 요소 내의 출력 콘텐츠의 영역을 보장해준다.
    • left

      요소의 왼쪽 위치 값을 설정한다. 이때 해당 요소는 position 속성의 값이 absolute 이거나 fixed 또는 relative로 설정되어 있어야 한다. position 속성 값을 relative로 가지는 경우도 left 값을 설정할 수 있지만 이 경우에는 position 값이 static 또는 relative인 직전 inline 요소의 우측이 기준이 된다. 부모 요소가 position 값이 relative를 가지고 하위 요소가 absolute를 갖는 경우에는 부모 요소의 왼쪽이 기준이 되어 위치 값이 설정된다. 부모 요소가 position 속성 값이 static 이고 하위 요소가 position 값이 absolute일 때 하위 요소의 왼쪽 위치 기준은 웹브라우저의 뷰포트가 된다. 부모 요소가 그 이외의 position 속성 값을 가지더라도 하위 요소의 position 값이 fixed 인 경우에는 부모 요소와 상관없이 웹브라우저의 뷰포트를 기준으로 왼쪽으로 부터의 위치값으로 지정된다.
    • margin

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

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

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

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

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

      요소 내의 내용이 크기가 정해진 요소 영역보다 넘치는 경우에 처리할 방식을 설정한다.
    • overflow-x

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

      정해진 크기의 요소 내 내용이 넘치는 경우 세로 방향으로 어떻게 처리할 것인지를 설정한다.
    • position

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

      요소의 오른쪽 위치 값을 설정한다. 요소는 position 속성 값이 absolute 또는 fixed로 설정되어 있어야 한다. 부모 요소가 존재하고 부모 요소의 position 값이 relative이면 부모 요소의 오른쪽으로 부터의 위치 값으로 설정된다. 부모 요소가 position 속성 값이 static인 경우 하위 요소가 position 속성이 absolute 값을 갖는다면 오른쪽 위치 기준은 웹브라우저의 뷰포트가 된다. 부모 요소가 어떠한 position 값을 가지고 있다하더라도 하위 요소가 position 값이 fixed인 경우에는 웹브라우저의 뷰포트를 기준으로 우측으로 부터의 위치값으로 지정된다.
    • top

      요소의 상단 위치 값을 설정한다. 이때 해당 요소는 position 속성의 값이 absolute 이거나 fixed 또는 relative로 설정되어 있어야 한다. position 속성 값을 relative로 가지는 경우도 top 값을 설정할 수 있지만 이 경우에는 position 값이 static 또는 relative인 직전 요소의 하단이 기준이 된다. 부모 요소가 position 값을 relative를 가지고 하위 요소가 absolute를 갖는 경우에는 부모 요소의 상단이 기준이 되어 위치 값이 설정된다. 부모 요소가 position 속성 값이 static 이고 하위 요소가 position 값이 absolute일 때 요소의 상단 위치 기준은 웹브라우저의 뷰포트가 된다. 부모 요소가 그 이외의 position 속성 값을 가지더라도 하위 요소의 position 값이 fixed 인 경우에는 부모 요소와 상관없이 웹브라우저의 뷰포트를 기준으로 하여 상단으로 부터의 위치값으로 지정된다.
    • visibility

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

      position 속성 값이 relative, absolute, fixed로 설정된 요소의 쌓이는 순서를 설정한다.
  • Shapes

    Shape 처리
    • clip-path

      shape을 생성하는 함수를 이용하여 원하는 모양을 만들 수 있다.
    • offset-path

      요소가 따라가야할 모션 경로를 지정하고 부모 컨테이너 또는 SVG  좌표 시스템 내에서 요소의 위치를 정의한다.
    • shape-image-threshold

      알파 채널 임계값을 설정한다.
    • shape-margin

      Shape의 주변과 간격을 설정한다.
    • shape-outside

      인접 인라인 콘텐츠를 형태에 따라 감싸는 처리를 한다. 반드시 요소가 float 속성을 가져야 한다.
  • Table

    • border-collapse

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

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

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

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

      표의 가로크기를 고정시키거나 자동으로 조정되도록 할 수 있다. 표는 자신의 크기를 가지고 있다고 하더라도 셀 안의 콘텐츠의 양에 영향을 받는다. 만일 셀 안의 텍스트가 공백이 없는 경우(한글 제외) 텍스트는 테이블의 크기와는 관계없이 줄바꿈없이 보여지며 이로 인해 테이블의 크기는 자동으로 늘어나게 된다. table-layout 속성을 통해서 이러한 성질을 제어할 수 있다.
    • vertical-align

      inline-level 요소, display 타입이 table-cell인 요소의 세로 방향 정렬을 지정한다. ::first-letter와 ::first-line에도 적용된다.
  • Text

    텍스트
    • hyphens

      문장의 행 내에 더 부드러운 줄바꿈을 만들수 있는지 여부를 정의한다.
    • quotes

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

      탭 문자의 너비를 지정한다. 적용할 수 있는 대상은 block 요소이다.
    • text-decoration

      텍스트의 장식을 설정한다. CSS 1.0에서는 상수를 통해서 선의 스타일 지정만 하는 반면 CSS 3.0에서는 텍스트 상하 동시에 선을 넣을 수 있으며 선의 스타일과 색상까지 지정할 수 있다.
    • 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

      요소가 transform 속성의 rotateX(), rotateY() 함수를 이용해 transition 또는 animation 속성을 통한 뒤집어지는 움직임을 연출할 경우 요소 뒤쪽의 모습을 보여주거나 숨기는 설정을 한다.
    • perspective

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

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

      요소에게 회전, 크기, 이동, 뒤틀림 등의 처리를 할 수 있다. 웹브라우저에 버전에 따라서 3D 변형도 가능하다.
    • transform-origin

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

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

    전이효과
    • transition

      요소에게 전이효과에 관련된 세부 속성을 한꺼번에 정의하여 전이효과를 실행한다. CSS에서의 전이효과는 기본적으로 가지고 있는 요소의 style에서 별도로 정의한 style로 변화되는 모습을 애니메이션처럼 처리해준다. 따라서 animation 속성과 같은 의미의 속성이 존재한다.
    • transition-delay

      전이 효과의 동작을 지연시킨다. 초(s) 단위와 밀리세컨드(ms) 단위로 설정이 가능하다.
    • transition-duration

      전이효과가 지속되는 시간을 설정한다. 초(s) 단위와 밀리세컨드(ms) 단위로 설정이 가능하다.
    • transition-property

      전이 효과로 처리하기 위한 속성을 정의한다. 기본 값은 'all'이며 모든 속성에 전이효과를 지정할 수 있다.
    • transition-timing-function

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

    사용자 인터페이스
    • box-sizing

      웹브라우저별 박스의 width, height을 계산하는 방식의 차이를 해결하기 위한 속성이다.
    • caret-color

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

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

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

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

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

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

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

      요소가 마우스 포인터 이벤트에 반응 여부를 시각적, 기능적으로 설정한다.
    • resize

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

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

      텍스트가 컨테이너 내에서 모두 표시되지 못할 경우 사용자에게 알리는 방식을 설정한다. white-space 속성을 nowrap를 지정하고 overflow 속성을 hidden으로 지정해서 함께 사용한다.
    • user-select

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

    값 설정
    • --*

      사용자 정의 속성을 설정할 때 접두어로 사용한다.
    • all

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