CSS Properties
CSS Properties은 요소에게 디자인 처리를 하기 위한 제정된 CSS 표준 속성을 다룬다.
Animations
애니메이션Backgrounds
배경 설정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 컨테이너 항목을 정렬한다.order
flex 항목의 위치에 대한 순서를 지정한다.row-gap
요소간(그리드)의 행 사이의 간격을 지정한다.
Box Decoration
박스 디자인Color
색상color
폰트에 색상을 적용한다.opacity
요소의 불투명도를 레벨로 설정한다. 요소의 자식 요소까지 적용된다. 0에서 1까지의 소수로 설정이 가능하며 0은 투명, 0.5는 반투명, 1은 불투명을 적용한다.
Contents
콘텐츠Filter Effects
필터 효과backdrop-filter
색의 번짐이나 색 요소 뒤의 영역으로 이동 같은 그래픽 효과를 적용 할 수 있다. 요소 뒤에 있는 모든 요소에 적용되므로 효과를 보려면 요소 또는 배경을 최소한 부분적으로 투명하게 만들어야 한다.filter
요소에게 함수를 통해 시각적 효과를 정의한다. 주로 이미지에게 적용한다.isolation
새로운 Stacking content를 만들어야 하는지의 여부를 정의한다. mix-blend-mode 속성과 함께 사용할 때 특히 유용하다.mix-blend-mode
요소의 내용이 부모 배경과 혼합되는 방법을 지정한다.
Flexible Box Layout
유연한 박스 레이아웃flex
부모 요소 안에 있는 컨테이너 항목이 차지하는 크기를 한번에 설정한다. ‘0 1 auto’ 값이 기본 값이다. flex-grow을 0으로 설정시 내용물의 크기에 따라 폭이 결정된다. auto로 설정시 각각 ‘1 1 auto’로 설정된다. none은 ‘0 0 auto’ 로 설정된다.flex-basis
유연한 레이아웃 항목의 가로 길이를 설정한다. 기본 값은 컨테이너 내 내용의 크기에 따른다.flex-direction
Flexible 레이아웃 항목의 방향을 설정한다.flex-flow
flex-direction과 flex-wrap 속성을 한번에 지정하는 축약식 속성이다.flex-grow
같은 컨테이너 내의 레이아웃 항목이 다른 유연한 항목에 얼마나 늘어날 지를 설정한다.flex-shrink
같은 컨테이너 내의 다른 유연한 레이아웃 항목과 비교하여 축소 비율을 지정한다.flex-wrap
공간이 부족할 경우 유연한 레이아웃 항목의 줄바꿈 여부를 지정한다.
Font
글꼴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
목록과 번호Multi column Layout
다중 열 레이아웃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
요소의 위치 결정 방식을 정의한다. 기본적으로 요소는 static 값을 갖는다. 즉 마크업 순서에 따라 요소의 특성에 맞게 화면에 출력이 된다. 그러나 기본 값이 아닌 relative, absolute, fixed 값을 갖는 경우에는 화면에 출력되는 위치는 별도의 위치 속성(top, right, bottom, left) 값을 통해서 출력 위치를 지정할 수 있다.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로 설정된 요소의 쌓이는 순서를 설정한다.
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
텍스트Transforms
변형Transitions
전이효과transition
요소에게 전이효과에 관련된 세부 속성을 한꺼번에 정의하여 전이효과를 실행한다. CSS에서의 전이효과는 기본적으로 가지고 있는 요소의 style에서 별도로 정의한 style로 변화되는 모습을 애니메이션처럼 처리해준다. 따라서 animation 속성과 같은 의미의 속성이 존재한다.transition-delay
전이 효과의 동작을 지연시킨다. 초(s) 단위와 밀리세컨드(ms) 단위로 설정이 가능하다.transition-duration
전이효과가 지속되는 시간을 설정한다. 초(s) 단위와 밀리세컨드(ms) 단위로 설정이 가능하다.transition-property
전이 효과로 처리하기 위한 속성을 정의한다. 기본 값은 'all'이며 모든 속성에 전이효과를 지정할 수 있다.transition-timing-function
주어진 시간 내에 전이효과를 어떠한 방식으로 진행(연출)할 지를 설정한다.
User Interface
사용자 인터페이스Values
값 설정--*
사용자 정의 속성을 설정할 때 접두어로 사용한다.all
unicode-bidi 및 방향을 제외한 모든 속성을 초기 또는 상속된 값으로 재설정한다.
