CSS Properties

관련 속성들

• 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

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

  • background-attachment

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

  • background-blend-mode

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

  • 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 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에서 레이아웃 항목의 행과 열 사이의 간격를 설정한다.

  • justify-content

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

  • justify-items

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

  • order

    flex 또는 grid 항목의 위치에 대한 순서를 지정한다.

  • row-gap

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

  • text-align

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

  • vertical-align

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

• 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

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

• Contents

  콘텐츠

  • clip

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

  • content

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

  • object-fit

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

  • object-position

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

• Filter Effects

  필터 효과

  • filter

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

  • isolation

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

  • 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

    폰트의 크기를 설정한다.

  • font-stretch

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

  • font-style

    글꼴의 모양을 설정한다.

  • font-variant

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

  • font-weight

    폰트의 굵기를 설정한다.

• Grid Layout

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

  • 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

    그리드 레이아웃(grid layout)에서 열 사이의 간격을 정의한다.

  • grid-column-start

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

  • grid-gap

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

  • grid-row

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

  • grid-row-end

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

  • grid-row-gap

    그리드 레이아웃(grid layout)에서 행 사이의 간격을 지정한다.

  • grid-row-start

    항목이 시작될 행의 위치를 정의한다.

  • grid-template

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

  • 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

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

• Multi column Layout

  다중 열 레이아웃

  • column-count

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

  • column-fill

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

  • column-gap

    컬럼간의 간격을 설정한다.

  • column-rule

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

  • column-rule-color

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

  • column-rule-style

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

  • column-rule-width

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

  • column-span

    요소가 차지하는 열의 개수를 지정

  • column-width

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

  • columns

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

• Paragraph

  문장 처리와 관련된 CSS

  • direction

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

  • letter-spacing

    문자 간격을 조정한다.

  • line-height

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

  • white-space

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

  • word-break

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

  • word-spacing

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

  • writing-mode

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

• Positioning & Flow

  위치 처리와 흐름

  • bottom

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

  • clear

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

  • display

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

  • float

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

  • left

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

  • margin

    요소의 주변 요소와의 간격을 설정한다.

  • margin-bottom

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

  • margin-left

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

  • margin-right

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

  • margin-top

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

  • overflow

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

  • overflow-x

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

  • overflow-y

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

  • position

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

  • right

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

  • top

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

  • visibility

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

  • z-index

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

• Shapes

  Shape 처리

  • clip-path

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

  • shape-outside

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

• Table

  표

  • border-collapse

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

  • border-spacing

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

  • caption-side

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

  • empty-cells

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

  • table-layout

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

• Text

  텍스트

  • hyphens

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

  • quotes

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

  • tab-size

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

  • text-decoration

    텍스트의 장식을 설정한다.

  • text-decoration-color

    텍스트에 적용할 선의 종류를 지정한다.

  • text-decoration-line

    텍스트에 적용할 선의 종류를 지정한다.

  • text-decoration-style

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

  • text-indent

    텍스트 블록에서 첫 번째 줄의 들여쓰기를 설정한다.

  • text-orientation

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

  • text-shadow

    텍스트에 그림자 처리를 한다.

  • text-transform

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

  • unicode-bidi

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

• Transforms

  변형

  • backface-visibility

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

  • perspective

    원근법을 적용하는 속성이다.

  • perspective-origin

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

  • transform

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

  • transform-origin

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

  • transform-style

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

• Transitions

  전이효과

  • transition

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

  • transition-delay

    전이 효과의 동작을 지연시킨다.

  • transition-duration

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

  • transition-property

    전이 효과로 처리하기 위한 속성을 정의한다.

  • 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

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

  • user-select

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

• Values

  값 설정

  • --*

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

  • all

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