Properties

Properties

Draft
  • bug_report

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

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

    • 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

    박스 정렬

    • align-content

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

    • align-items

      Flex, Grid 레이아웃 항목의 세로 방향의 영역에 대한 처리 방식을 설정한다.

    • align-self

      Flex와 Grid 레이아웃에서 유연한 컨테이너 내부의 자리를 차지하고 있는 선택된 항목에 대한 정렬을 설정한다.

    • column-gap

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

    • gap

      원래 grid-gap 속성을 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

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

  • Contents

    콘텐츠

    • clip

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

    • content

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

    • image-rendering

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

    • object-fit

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

    • object-position

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

  • Filter Effects

    필터 효과

    • backdrop-filter

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

    • 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

    그리드(격자) 레이아웃

    • 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-column-start

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

    • grid-gap

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

    • grid-row

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

    • grid-row-end

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

    • grid-row-gap

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

    • 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

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

    • word-wrap

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

    • writing-mode

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

  • Positioning & Flow

    위치 처리와 흐름

    • bottom

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

    • clear

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

    • display

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

    • float

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

    • left

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

    • margin

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

    • margin-block-end

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

    • margin-block-start

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

    • 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을 생성하는 함수를 이용하여 원하는 모양을 만들 수 있다.

    • offset-path

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

    • shape-image-threshold

      알파 채널 임계값을 설정한다.

    • shape-margin

      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-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-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 및 방향을 제외한 모든 속성을 초기 또는 상속된 값으로 재설정한다.

©2020 devdic.com, Korea

레퍼런스에 사용된 모든 소스 코드의 저작권은 devdic.com에 있으며 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com