Properties

Properties

  • bug_report

Properties

개요

CSS Properties는 요소에게 디자인 처리를 하기 위한 제정된 CSS 표준 속성을 다룬다. CSS1과 비교한다면 엄청난 수의 속성들이 생겨났고 현재도 새로운 속성들이 생기고 있는 중이다. 속성의 분류는 CSS 버전 체계의 변화를 반영하였다. 즉 카테고리는 새로운 버전 체계의 모듈 단위와 일치한다. 다만 'CSS Backgrounds and Borders Module'은 내용이 방대해서 Backgrunds(배경)와 Borders(테두리)로 나누어서 정리했다. 각 카테고리 항목의 링크를 열면 관련 설명을 볼 수가 있다.

참고로 CSS3부터 버전 체계의 변경이 있었으므로 이전의 버전 체계에서 현재의 버전 체계로의 연속성이 없는 속성의 경우는 'CSS2 and earlier' 분류에 담았다.

분류(모듈)별 속성 목록

  • 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

      요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.

    • 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

      요소의 테두리에 적용될 이미지를 설정한다.

    • 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

    정렬에 대한 기술적인 주제를 다룬다.

    • 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

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

    • 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

    요소의 텍스트와 콘텐츠에 대한 전경색과 불투명도를 지정할 수 있는 기술적인 주제를 다룬다.

    • color

      전경색(폰트)의 색상을 적용한다.

    • opacity

      요소의 불투명도를 설정한다.

  • Compositing and Blending

    CSS 합성을 제어하는 데 사용되는 속성과 컴포지팅(compositing) 및 블렌딩 알고리즘에 대한 기술적인 주제를 다룬다.

    • background-blend-mode

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

    • isolation

      새로운 스태킹 컨텍스트(stacking context)를 만들어야 하는지의 여부를 정의한다.

    • mix-blend-mode

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

  • Containment

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

    • contain

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

    • container-name

      쿼리 컨테이너 이름 목록을 지정한다. @container 규칙에서 대상이 될 쿼리 컨테이너를 필터링할 때 사용한다.

    • container-type

      컨테이너 크기 쿼리(container size queries)와 같이 명시적 포함이 필요한 컨테이너 쿼리(container queries) 목적의 쿼리 컨테이너로 요소를 설정하여 하위 스타일 규칙이 크기(size) 및 레이아웃(layout)의 다양한 측면을 쿼리하고 그에 따라 응답할 수 있도록 한다.

    • content-visibility

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

  • CSS2 and earlier

    현재의 모듈 체계로 버전 관리되기 전의 버전 체계에서 더 이상의 업데이트가 없는 속성들을 나타낸다

    • border-collapse

      테이블의 셀(cell) 테두리를 처리하기 위한 환경을 설정한다.

    • border-spacing

      테이블에서 인접한 셀(cell)과 셀(cell)의 간격을 설정한다.

    • empty-cells

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

    • table-layout

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

    • z-index

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

  • Custom Properties and Values

    사용자 정의 값과 상속에 대한 내용을 다룬다.

    • --*

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

    • all

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

  • Display

    이 모듈은 CSS 포맷팅(formatting) 박스(box) 트리(tree)가 도큐멘트(document) 요소(element) 트리(tree)에서 생성되는 방법을 설명하고 이를 제어하는 디스플레이 속성을 정의한다.

    • display

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

    • order

      플렉스 레이아웃(flex layout) 또는 그리드 레이아웃(grid layout) 항목의 위치에 대한 순서를 지정한다.

    • visibility

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

  • Filter Effects

    요소가 화면에 렌더링될 때 추가적으로 적용되는 그래픽 작업에 대한 기술적인 주제를 다룬다.

    • backdrop-filter

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

    • filter

      요소에게 시각적 효과를 정의한다.

  • Flexible Box Layout

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

    • flex

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

    • flex-basis

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

    • flex-direction

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

    • flex-flow

      flex-direction과 flex-wrap 속성을 한번에 지정하는 속기 속성이다.

    • flex-grow

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

    • flex-shrink

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

    • flex-wrap

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

  • Fonts

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

    • font

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

    • font-family

      글꼴을 지정한다.

    • font-feature-settings

      OpenType 글꼴 기능에 대한 낮은 수준의 제어를 제공한다.

    • font-kerning

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

    • font-optical-sizing

      문자의 두께가 글꼴의 크기에 따라 변경되는 것을 조정한다.

    • font-palette

      @font-palette-values 규칙에서 정의한 글꼴에 적용할 팔레트를 설정하거나 유저 에이전트에서 제공하는 팔레트를 지정한다.

    • font-size

      글꼴의 크기를 설정한다.

    • font-stretch

      텍스트를 넓히거나 좁힐 수 있다.

    • font-style

      글꼴의 모양을 설정한다.

    • font-variant

      모든 font-variant 하위 속성을 속기로 설정한다.

    • font-variant-alternates

      글꼴의 기본 글리프(glyphs) 외에도 다양한 대체 글리프(glyphs)를 제공하도록 대체 글리프(glyphs)의 선택을 제어한다.

    • font-variant-caps

      소문자, 작은 대문자 또는 제목에 사용되는 대체 글리프(glyphs)를 선택할 수 있다.

    • font-variant-east-asian

      동아시아 지역의 언어로 작성하는 텍스트에서 글리프(glyphs) 대체 및 크기 조정을 제어할 수 있다.

    • font-variant-ligatures

      합자 및 문맥 형태를 글리프(glyphs)를 결합하여 보다 조화로운 형태로 만든다.

    • font-variant-numeric

      숫자 형식에 대한 제어를 지정한다.

    • font-variant-position

      타이포그래피(typographic) 아래첨자 및 위첨자 글리프(glyphs)를 활성화한다.

    • font-variation-settings

      OpenType 또는 TrueType 글꼴 변형에 대한 낮은 수준의 제어를 제공한다. 널리 사용되지 않지만 특정 사용 사례에 필요한 글꼴 변형에 대한 액세스를 제공하기 위한 방법이다.

    • font-weight

      폰트의 굵기를 설정한다.

  • Fragmentation

    흐름을 페이지, 열 또는 영역으로 분할하는 조각화 모델에 대한 기술적인 주제를 다룬다.

    • box-decoration-break

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

    • break-after

      생성된 박스 이후에 페이지(page), 열(column) 또는 영역 나누기가 동작하는 방식을 지정한다. 생성된 박스가 없으면 속성은 무시된다.

    • break-before

      생성된 박스 앞에서 페이지(page), 열(column) 또는 영역 나누기가 동작하는 방식을 지정한다. 생성된 박스가 없으면 속성은 무시된다.

    • break-inside

      요소의 기본 박스 내에서 페이지(page)/열(column)/영역 나누기 동작을 지정한다.

  • Generated Content

    웹 페이지에 동적으로 콘텐츠를 삽입하는 기술적인 주제를 다룬다.

    • content

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

    • quotes

      인용 부호의 유형을 설정한다.

  • 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

    이미지 처리에 사용되는 속성들을 나타낸다.

    • image-orientation

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

    • image-rendering

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

    • object-fit

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

    • object-position

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

  • Inline Layout

    인라인 요소의 레이아웃과 관련된 속성들을 나타낸다.

    • line-height

      콘텐츠의 행간을 조정한다.

    • vertical-align

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

  • Lists and Counters

    콘텐츠가 목록 유형인 경우 목록 항목의 디자인적인 성질을 다룬다.

    • counter-increment

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

    • counter-reset

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

    • list-style

      목록 관련 CSS 속성을 한번에 설정하는 속기 속성이다.

    • list-style-image

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

    • list-style-position

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

    • list-style-type

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

  • Logical Properties and Values

    논리적인 방향이 적용된 다양한 속성들을 다룬다.

    • block-size

      writing-mode 속성에 따라 블록 레벨 박스(block level box)의 너비 또는 높이를 설정한다.

    • border-block

      블록 축(block axis)의 양쪽 끝 가장자리에  테두리의 두께, 모양, 색상을 한번에 지정하는 속기 속성이다.

    • border-block-color

      논리적인 방향을 갖는 border-block-start-color와 border-block-end-color 속성 값을 한번에 작성할 수 있는 속기 속성이다.

    • border-block-end

      블록 축(block axis)의 끝 가장자리에  테두리의 두께, 모양, 색상을 한번에 지정하는 속기 속성이다.

    • border-block-end-color

      물리적인 방향을 갖는 border-bottom-color 속성이 논리적인 방향으로 대체된 속성이다.

    • border-block-end-style

      물리적인 방향을 갖는 border-bottom-style 속성이 논리적인 방향으로 대체된 속성이다.

    • border-block-end-width

      물리적인 방향을 갖는 border-bottom-width 속성이 논리적인 방향으로 대체된 속성이다.

    • border-block-start

      블록 축(block axis)의 시작 가장자리에  테두리의 두께, 모양, 색상을 한번에 지정하는 속기 속성이다.

    • border-block-start-color

      물리적인 방향을 갖는 border-top-color 속성이 논리적인 방향으로 대체된 속성이다.

    • border-block-start-style

      물리적인 방향을 갖는 border-top-style 속성이 논리적인 방향으로 대체된 속성이다.

    • border-block-start-width

      물리적인 방향을 갖는 border-top-width 속성이 논리적인 방향으로 대체된 속성이다.

    • border-block-style

      논리적인 방향을 갖는 border-block-start-style과 border-block-end-style 속성 값을 한번에 작성할 수 있는 속기 속성이다.

    • border-block-width

      논리적인 방향을 갖는 border-block-start-width 와 border-block-end-width 속성 값을 한번에 작성할 수 있는 속기 속성이다.

    • border-end-end-radius

      물리적인 방향을 갖는 border-bottom-right-radius 속성을 논리적인 방향으로 추가 되었다.

    • border-end-start-radius

      물리적인 방향을 갖는 border-bottom-left-radius 속성을 논리적인 방향으로 추가 되었다.

    • border-inline

      인라인 축(inline axis)의 양쪽 끝 가장자리에  테두리의 두께, 모양, 색상을 한번에 지정하는 속기 속성이다.

    • border-inline-color

      논리적인 방향을 갖는 border-inline-start-color와 border-inline-end-color 속성 값을 한번에 작성할 수 있는 속기 속성이다.

    • border-inline-end

      인라인 축(inline axis)의 끝 가장자리에  테두리의 두께, 모양, 색상을 한번에 지정하는 속기 속성이다.

    • border-inline-end-color

      물리적인 방향을 갖는 border-right-color 속성이 논리적인 방향으로 대체된 속성이다.

    • border-inline-end-style

      물리적인 방향을 갖는 border-right-style 속성이 논리적인 방향으로 대체된 속성이다.

    • border-inline-end-width

      물리적인 방향을 갖는 border-right-width 속성이 논리적인 방향으로 대체된 속성이다.

    • border-inline-start

      인라인 축(inline axis)의 시작 가장자리에  테두리의 두께, 모양, 색상을 한번에 지정하는 속기 속성이다.

    • border-inline-start-color

      물리적인 방향을 갖는 border-left-color 속성이 논리적인 방향으로 대체된 속성이다.

    • border-inline-start-style

      물리적인 방향을 갖는 border-left-style 속성이 논리적인 방향으로 대체된 속성이다.

    • border-inline-start-width

      물리적인 방향을 갖는 border-left-width 속성이 논리적인 방향으로 대체된 속성이다.

    • border-inline-style

      논리적인 방향을 갖는 border-inline-start-style과 border-inline-end-style 속성 값을 한번에 작성할 수 있는 속기 속성이다.

    • border-inline-width

      논리적인 방향을 갖는 border-inline-start-width 와 border-inline-end-width 속성 값을 한번에 작성할 수 있는 속기 속성이다.

    • border-start-end-redius

      물리적인 방향을 갖는 border-top-right-radius 속성을 논리적인 방향으로 추가 되었다.

    • border-start-start-radius

      물리적인 방향을 갖는 border-top-left-radius 속성을 논리적인 방향으로 추가 되었다.

    • caption-side

      테이블 캡션의 위치를 설정한다.

    • clear

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

    • float

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

    • inline-size

      writing-mode 속성에 따라 인라인 레벨 박스(inline level box)의 너비 또는 높이를 설정한다.

    • inset

      논리적인 네 방향에 대한 위치 값을 한번에 설정하는 속기 속성이다.

    • inset-block

      inset-block-start 속성과 inset-block-end 속성을 한번에 설정하는 속기 속성이다.

    • inset-block-end

      물리적인 bottom 속성을 논리적인 위치로 설정한다.

    • inset-block-start

      물리적인 top 속성을 논리적인 위치로 설정한다.

    • inset-inline

      inset-inline-start 속성과 inset-inline-end 속성을 한번에 설정하는 속기 속성이다.

    • inset-inline-end

      물리적인 right 속성을 논리적인 위치로 설정한다.

    • inset-inline-start

      물리적인 left 속성을 논리적인 위치로 설정한다.

    • margin-block

      쓰기 모드(writing-mode) 설정에 따른 블록 축(block axis)의 양쪽 가장자리의 마진(margin) 값을 한번에 설정한다.

    • margin-block-end

      쓰기 모드(writing-mode) 설정에 따른 블록 축(block axis)의 끝쪽 가장자리의 마진(margin) 값을 한번에 설정한다.

    • margin-block-start

      쓰기 모드(writing-mode) 설정에 따른 블록 축(block axis)의 시작쪽 가장자리의 마진(margin) 값을 한번에 설정한다.

    • margin-inline

      쓰기 모드(writing-mode) 설정에 따른 인라인 축(inline axis)의 양쪽 가장자리의 마진(margin) 값을 한번에 설정하는 속기 속성이다.

    • margin-inline-end

      쓰기 모드(writing-mode) 설정에 따른 인라인 축(inline axis)의 끝쪽 가장자리의 마진(margin) 값을 한번에 설정한다.

    • margin-inline-start

      쓰기 모드(writing-mode) 설정에 따른 인라인 축(inline axis)의 시작쪽 가장자리의 마진(margin) 값을 한번에 설정한다.

    • max-block-size

      블록 축(block axis)의 박스의 최대 크기를 설정한다.

    • max-inline-size

      인라인 축(inline axis)의 박스의 최대 크기를 설정한다.

    • min-block-size

      블록 축(block axis)의 박스 최소 크기를 설정한다.

    • min-inline-size

      인라인 축(inline axis)의 박스 최소 크기를 설정한다.

    • padding-block

      쓰기 모드(writing-mode) 설정에 따른 블록 축(block axis)의 양쪽 가장자리의 패딩(padding) 값을 한번에 설정하는 속기 속성이다.

    • padding-block-end

      쓰기 모드(writing-mode) 설정에 따른 블록 축(block axis)의 끝쪽 가장자리의 패딩(padding) 값을 한번에 설정한다.

    • padding-block-start

      쓰기 모드(writing-mode) 설정에 따른 블록 축(block axis)의 시작쪽 가장자리의 패딩(padding) 값을 한번에 설정한다.

    • padding-inline

      쓰기 모드(writing-mode) 설정에 따른 인라인 축(inline axis)의 양쪽 가장자리의 패딩(padding) 값을 한번에 설정하는 속기 속성이다.

    • padding-inline-end

      쓰기 모드(writing-mode) 설정에 따른 인라인 축(inline axis)의 끝쪽 가장자리의 패딩(padding) 값을 한번에 설정한다.

    • padding-inline-start

      쓰기 모드(writing-mode) 설정에 따른 인라인 축(inline axis)의 시작쪽 가장자리의 패딩(padding) 값을 한번에 설정한다.

  • 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> 요소가 휘도 또는 알파 마스크로 사용되는지 여부를 설정한다.

  • Motion Path

    시간에 따른 개체의 위치 전환에 대한 기술적인 주제를 다룬다.

    • offset

      정의된 경로를 따라 요소에게 애니메이션을 적용하는 데 필요한 관련 속성을 한번에 작성할 수 있도록 하는 속기 속성이다.

    • offset-anchor

      offset-path 속성으로 지정된 경로 상에서 움직이는 요소의 내부 기준 위치를 설정한다.

    • offset-distance

      offset-path 따라 박스의 위치를 지정한다.

    • offset-path

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

    • offset-position

      offset-path의 초기 위치를 정의한다.

    • offset-rotate

      offset-path로 지정된 경로에 배치될 때 요소의 방향을 설정한다.

  • Multi column Layout

    다중 열 레이아웃(multi column layout)에 관련된 속성을 다룬다.

    • column-count

      컨테이너의 텍스트를 열(column)로 나룰 숫자를 지정한다.

    • column-fill

      열(column)을 채우는 방법을 지정한다.

    • column-gap

      열(column)간의 간격을 설정한다.

    • column-rule

      열(column) 처리에서 열(column)의 너비와 구분선의 스타일 및 색상을 속기로 설정한다.

    • column-rule-color

      열(column) 사이의 구분선에 대한 색상을 지정한다.

    • column-rule-style

      열(column) 사이의 구분선에 대한 스타일을 설정한다.

    • column-rule-width

      열(column)을 구분하는 선의 너비를 지정한다.

    • column-span

      요소가 차지하는 열(column)의 개수를 지정한다.

    • column-width

      열(column)의 너비를 지정한다.

    • columns

      열(column)의 너비와 개수를 한번에 설정하는 속기 속성이다.

  • Overflow

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

    • overflow

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

    • overflow-clip-margin

      overflow 속성 값이 clip인 경우 클리핑 되기 전에 페인트될 수 있는 바깥쪽 범위를 지정한다.

    • overflow-x

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

    • overflow-y

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

    • scroll-behavior

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

    • scrollbar-gutter

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

    • text-overflow

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

  • Positioned Layout

    콘텐츠와 겹칠 수 있도록 요소의 위치를 지정할 수 있는 속성들을 나타낸다.

    • bottom

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

    • inset-block-end

      물리적인 bottom 속성을 논리적인 위치로 설정한다.

    • inset-block-start

      물리적인 top 속성을 논리적인 위치로 설정한다.

    • inset-inline-end

      물리적인 right 속성을 논리적인 위치로 설정한다.

    • inset-inline-start

      물리적인 left 속성을 논리적인 위치로 설정한다.

    • left

      요소의 왼쪽 위치 값을 설정한다.

    • position

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

    • right

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

    • top

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

  • Shapes

    요소의 부동 영역의 형상을 제어하는 기술을 주제로 한다.

    • shape-image-threshold

      이미지를 사용하여 쉐입(shape)을 추출하는 데 사용되는 알파 채널 임계값을 설정한다.

    • shape-margin

      쉐입(shape)의 주변과 간격을 설정한다.

    • shape-outside

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

  • Text

    소스 상의 콘텐츠 텍스트를 형식이 지정된 줄 바꿈 텍스트로 변환하는 것을 제어하는 기술을 주제로 한다.

    • hyphens

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

    • letter-spacing

      문자 간격을 조정한다.

    • tab-size

      탭 문자의 너비를 지정한다.

    • text-align

      text-align-all 및 text-align-last 속성을 설정하고 콘텐츠가 줄 상자를 완전히 채우지 않는 경우 블록의 인라인 수준 콘텐츠가 인라인 축을 따라 정렬되는 방법을 정의하는 속기 속성이다.

    • text-align-all

      text-align-last 속성의 auto가 아닌 값으로 재정의된 마지막 줄을 제외하고 블록 컨테이너에 있는 모든 인라인 콘텐츠 줄의 인라인 정렬을 지정한다.

    • text-align-last

      블록의 마지막 줄 또는 강제 줄 바꿈 직전의 줄이 정렬되는 방식을 지정한다.

    • text-indent

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

    • text-justify

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

    • text-transform

      텍스트의 대소문자 설정을 한다.

    • white-space

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

    • word-break

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

    • word-spacing

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

  • Text Decoration

    텍스트의 장식, 즉 글꼴 및 타이포그래피 규칙에 따라 일단 조판된 텍스트의 글리프 장식을 위한 기술적인 주제를 다룬다.

  • Transforms

    3차원 공간에서 요소를 변환하는 기술을 주제로 한다.

    • backface-visibility

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

    • perspective

      3D 시각적 효과를 위한 원근법을 적용하는 속성이다.

    • perspective-origin

      입체 대상을 보고 있는 투시점의 위치를 정의한다. perspective 속성의 원점을 지정한다.

    • rotate

      rotate() 함수를 독립적인 속성으로 지정한다.

    • scale

      scale() 함수를 독립적인 속성으로 지정한다.

    • transform

      요소에게 회전, 크기, 이동, 뒤틀림 등의 2D 또는 3D 변형 처리를 할 수 있다.

    • transform-box

      변형과 관련된 참조 박스 타입을 지정한다.

    • transform-origin

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

    • transform-style

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

    • translate

      translate() 함수를 독립적인 속성으로 지정한다.

  • Transitions

    암시적 전환을 가능하게 하는 기술을 주제로 한다.

  • User Interface

    사용자 인터페이스 관련 속성 및 값의 스타일을 지정할 수 있도록 하는 기술적인 내용을 주제로 한다.

    • caret-color

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

    • cursor

      커서의 모양을 설정한다.

    • outline

      요소에 대한 시각적 집중을 위해서 경계 밖에서 요소의 외곽선을 만드는 속기 속성이다.

    • outline-color

      요소의 윤곽선의 색상을 설정한다.

    • outline-offset

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

    • outline-style

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

    • outline-width

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

    • resize

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

    • user-select

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

  • Will Change

    CSS 최적화와 속도 개선 등에 관한 기술적인 주제를 다룬다.

    • will-change

      요소에게 CSS 처리시 예상되는 변화의 종류에 관한 힌트를 유저 에이전트(user agent)에게 제공하게 하여 사전에 최적화한다.

  • Writing Modes

    다양한 국제 쓰기 모드를 지원하는 기술을 주제로 한다.

    • direction

      블록 레벨 요소 내에 텍스트의 (쓰기)방향을 지정한다.

    • text-combine-upright

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

    • text-orientation

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

    • unicode-bidi

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

    • writing-mode

      텍스트의 행이 가로 또는 세로로 배치되는지 여부와 블록이 진행되는 방향을 지정한다.

©2023 devdic.com, Korea

출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com