CSS 참고 가이드
- 이전 페이지 CSS 참고 가이드
- 다음 페이지 CSS 브라우저 지원
CSS 속성
A
accent-color | 사용자 인터페이스 컨트롤의 강조 색상을 지정합니다. |
align-content | 요소가 모든 사용 가능한 공간을 사용하지 않을 때 엘라스틱 컨테이너 내 행 사이의 정렬 방식을 정의합니다. |
align-items | 엘라스틱 컨테이너 내 요소의 정렬 방식을 정의합니다. |
align-self | 엘라스틱 컨테이너 내 선택된 요소의 정렬 방식을 정의합니다. |
all | 모든 속성을 초기화합니다(unicode-bidi와 direction을 제외하고). |
animation | 모든 animation-* 속성의 줄임말 속성입니다. |
animation-delay | 애니메이션을 시작하는 지연 시간을 정의합니다. |
animation-direction | 애니메이션이 앞으로 재생되는지, 뒤로 재생되는지, 대칭적으로 재생되는지 정의합니다. |
animation-duration | 애니메이션이 한 주기를 완료하는 데 걸리는 시간을 정의합니다. |
animation-fill-mode | 애니메이션을 재생하지 않을 때(시작 전, 종료 후, 또는 동시에)의 스타일을 정의합니다. |
animation-iteration-count | 애니메이션이 재생되는 횟수를 정의합니다. |
animation-name | @keyframes 애니메이션의 이름을 정의합니다. |
animation-play-state | 애니메이션이 재생되는지 멈춰있는지 정의합니다. |
animation-timing-function | 애니메이션의 속도 곡선을 정의합니다. |
aspect-ratio | 요소의 선호된 너비와 높이 비율을 지정합니다. |
B
backdrop-filter | 요소 배경 영역의 그래픽 효과를 정의합니다. |
backface-visibility | 사용자에게 직면했을 때 요소의 뒷면이 보이는지 여부를 정의합니다. |
background | 모든 background-* 속성의 줄임말 속성입니다. |
background-attachment | 배경 이미지가 페이지의 나머지 부분과 함께 스크롤되는지 고정되는지 설정합니다. |
background-blend-mode | 각 배경 레이어(색/이미지)의 복합 모드를 정의합니다. |
background-clip | 배경(색 또는 이미지)가 요소 내에서 확장되는 거리를 정의합니다. |
background-color | 요소의 배경색을 정의합니다. |
background-image | 요소의 하나 이상의 배경 이미지를 정의합니다. |
background-origin | 배경 이미지의 초기 위치를 정의합니다. |
background-position | 배경 이미지의 위치를 정의합니다. |
background-position-x | 배경 이미지가 x축 상에서의 위치를 지정합니다. |
pr_background-position-y | 배경 이미지가 y축 상에서의 위치를 지정합니다. |
background-repeat | 배경 이미지가 반복되는지 여부 및 방식을 설정합니다. |
background-size | 배경 이미지의 크기를 정의합니다. |
block-size | 요소가 블록 방향에서의 크기를 지정합니다. |
border | border-width, border-style 및 border-color의 축약 속성. |
border-block |
다음 속성의 줄임말 속성입니다: |
border-block-color | 블록 방향에서 시작과 끝 경계선의 색상을 설정합니다. |
border-block-end |
다음 속성의 줄임말 속성입니다: |
border-block-end-color | 블록 방향에서 끝 경계선의 색상을 설정합니다. |
border-block-end-style | 블록 방향에서 끝 경계선의 스타일을 설정합니다. |
border-block-end-width | 블록 방향에서 끝 경계선의 너비를 설정합니다. |
border-block-start |
다음 속성의 줄임말 속성입니다: |
border-block-start-color | 블록 방향에서 시작 경계선의 색상을 설정합니다. |
border-block-start-style | 블록 방향에서 시작 경계선의 스타일을 설정합니다. |
border-block-start-width | 블록 방향에서 시작 경계선의 너비를 설정합니다. |
border-block-style | 블록 방향에서 시작과 끝 경계선의 스타일을 설정합니다. |
border-block-width | 블록 방향에서 시작과 끝 경계선의 너비를 설정합니다. |
border-bottom | border-bottom-width, border-bottom-style 및 border-bottom-color의 축약 속성. |
border-bottom-color | 하단 경계선의 색상을 설정합니다. |
border-bottom-left-radius | 좌하단 경계선의 둥글기를 정의합니다. |
border-bottom-right-radius | 우하단 경계선의 둥글기를 정의합니다. |
border-bottom-style | 하단 경계선의 스타일을 설정합니다. |
border-bottom-width | 하단 경계선의 너비를 설정합니다. |
border-collapse | 테이블의 경계선이 단일 경계선으로 접히거나 분리되는지 설정합니다. |
border-color | 네 테두리의 색상을 설정. |
border-end-end-radius | 요소 블록 끝과 행 내 끝 테두리 간의 모서리 반지름을 설정. |
border-end-start-radius | 요소 블록 끝과 행 내 시작 테두리 간의 모서리 반지름을 설정. |
border-image | border-image-* 속성의 축약 속성. |
border-image-outset | 테두리 이미지 영역이 테두리를 벗어나는 양을 정의. |
border-image-repeat | 테두리 이미지가 반복, 둥글게,还是比较 확장되는지 정의. |
border-image-slice | 테두리 이미지를 어떻게 자르는지 정의. |
border-image-source | 테두리로 사용할 이미지의 경로를 정의. |
border-image-width | 테두리 이미지의 너비를 정의. |
border-inline |
다음 속성의 줄임말 속성입니다: |
border-inline-color | 행 내 방향상 시작과 끝 테두리의 색상을 설정. |
border-inline-end |
다음 속성의 줄임말 속성입니다: |
border-inline-end-color | 행 내 방향상 끝 테두리의 색상을 설정. |
border-inline-end-style | 행 내 방향상 끝 테두리의 스타일을 설정. |
border-inline-end-width | 행 내 방향상 끝 테두리의 너비를 설정. |
border-inline-start |
다음 속성의 줄임말 속성입니다: |
border-inline-start-color | 행 내 방향상 시작 테두리의 색상을 설정. |
border-inline-start-style | 행 내 방향상 시작 테두리의 스타일을 설정. |
border-inline-start-width | 행 내 방향상 시작 테두리의 너비를 설정. |
border-inline-style | 행 내 방향상 시작과 끝 테두리의 스타일을 설정. |
border-inline-width | 행 내 방향상 시작과 끝 테두리의 너비를 설정. |
border-left | 모든 border-left-* 속성의 축약 속성. |
border-left-color | 왼쪽 테두리의 색상을 설정. |
border-left-style | 왼쪽 테두리의 스타일을 설정. |
border-left-width | 왼쪽 테두리의 너비를 설정. |
border-radius | 네 border-*-radius 속성의 축약 속성. |
border-right | 모든 border-right-* 속성의 축약 속성. |
border-right-color | 오른쪽 테두리의 색상을 설정합니다. |
border-right-style | 오른쪽 테두리의 스타일을 설정합니다. |
border-right-width | 오른쪽 테두리의 너비를 설정합니다. |
border-spacing | 연속된 셀 테두리 간의 거리를 설정합니다. |
border-start-end-radius | 요소의 블록 시작과 행 내 종료 간의 모서리 반지름을 설정합니다. |
border-start-start-radius | 요소의 블록 시작과 행 내 시작 간의 모서리 반지름을 설정합니다. |
border-style | 네 가지 테두리의 스타일을 설정합니다. |
border-top | border-top-width, border-top-style 및 border-top-color의 축약 속성. |
border-top-color | 상단 테두리의 색상을 설정합니다. |
border-top-left-radius | 왼쪽 상단 모서리의 테두리 둥글기를 정의합니다. |
border-top-right-radius | 오른쪽 상단 모서리의 테두리 둥글기를 정의합니다. |
border-top-style | 상단 테두리의 스타일을 설정합니다. |
border-top-width | 상단 테두리의 너비를 설정합니다. |
border-width | 네 가지 테두리의 너비를 설정합니다. |
bottom | 요소가 부모 요소의 하단에 대한 위치를 설정합니다. |
box-decoration-break | 요소가 페이지 기호나 행 기호에서의 배경과 테두리의 행동을 설정하거나, 행 내 요소에서의 행동을 설정합니다. |
box-reflect | 요소에 반사 효과를 생성합니다. |
box-shadow | 요소에 하나 또는 여러 그림자를 추가합니다. |
box-sizing | 요소의 너비와 높이 계산 방식을 정의합니다: 여기서 내간격과 테두리가 포함되어야 하는지 여부를 정의합니다. |
break-after | 지정된 요소 뒤에 page-、column- 또는 region-break가 나타나야 하는지 정의합니다. |
break-before | 지정된 요소 앞에 page-、column- 또는 region-break가 나타나야 하는지 정의합니다. |
break-inside | 지정된 요소 내에서 page-、column- 또는 region-break가 나타나야 하는지 정의합니다. |
C
caption-side | 테이블 제목의 배치 방식을 정의합니다. |
caret-color | input, textarea 또는 어떤 편집 가능 요소에서의 커서 색상을 정의합니다. |
@charset | 스타일 시트에서 사용하는 문자 인코딩을 정의합니다. |
clear | 요소의 어떤 측에도 요소를 부浮할 수 없도록 정의합니다 |
clip | 정적 위치의 요소를 잘라냅니다. |
clip-path | 요소를 기본 형상이나 SVG 소스로 잘라냅니다. |
color | 텍스트의 색상을 설정. |
color-scheme | 요소가 어느 운영 체제配色 패키지를 사용하여 렌더링할지 지시. |
column-count | 요소가 얼마나 많은 열로 나눌지 정의. |
column-fill | 열을 채우는 방법을 지정합니다. (균형 맞춤 여부). |
column-gap | 열 간격을 규정. |
column-rule | 모든 column-rule-* attribute의 줄임attribute. |
column-rule-color | 열 간의 규칙의 색상을 규정. |
column-rule-style | 열 간의 규칙 스타일을 규정. |
column-rule-width | 열 간의 규칙 너비를 규정. |
column-span | 요소가 얼마나 많은 열을 건너야 할지 정의. |
column-width | 열 너비를 규정. |
columns | column-width와 column-count의 줄임attribute. |
@container | 컨테이너의 크기나 스타일에 따라 컨테이너 내 요소의 스타일을 정의. |
counter-increment | 하나 이상의 CSS 카운터의 값을 증가하거나 감소. |
counter-reset | 하나 이상의 CSS 카운터를 생성하거나 초기화. |
counter-set | 하나 이상의 CSS 카운터를 생성하거나 설정. |
@counter-style | 사용자 정의 카운터 스타일을 정의할 수 있게 합니다. |
cursor | 지정된 요소에 마우스 포인터가 가지고 있을 때 표시할 마우스 포인터. |
D
direction | 텍스트 방향/글쓰기 방향을 규정. |
display | HTML 요소를 어떻게 표시할지 정의. |
E
empty-cells | 표格의 빈 셀에 경계선과 배경을 표시할지 여부를 규정. |
F
filter | 요소가 표시되기 전의 효과를 정의합니다. 예를 들어, 흐림이나 색상 이동. |
flex | flex-grow, flex-shrink 및 flex-basis의 줄임attribute. |
flex-basis | 융통적인 요소의 초기 길이를 규정. |
flex-direction | 융통적인 요소의 방향을 규정. |
flex-flow | flex-direction과 flex-wrap의 줄임属性. |
flex-grow | 규정 사항이 나머지 사항에 비해 증가한 양. |
flex-shrink | 규정 사항이 나머지 사항에 비해 줄인 양. |
flex-wrap | 플렉스 아이템이 줄 바꿈되어야 하는지 여부를 정의합니다. |
float | 박스에 풀링이 되어야 하는지 여부를 정의합니다. |
font | font-style, font-variant, font-weight, font-size/line-height 및 font-family의 줄임属性을 정의합니다. |
@font-face | 웹 세이프 글꼴 이외의 다른 글꼴을 다운로드하고 사용할 수 있는 규칙을 허용합니다. |
font-family | 텍스트의 글꼴 가족(글꼴 시리즈)을 정의합니다. |
font-feature-settings | OpenType 글꼴의 고급 인쇄 기능을 제어할 수 있도록 합니다. |
@font-feature-values | font-variant-alternate에서의 일반 이름을 사용하여 OpenType에서 다른 방식으로 활성화할 수 있는 기능을 작성자가 사용할 수 있도록 합니다. |
font-kerning | 글자 간격 조정 정보(글자 간격) 사용을 제어합니다. |
font-language-override | 특정 언어의 글자 형태가 글꼴 사용에서 제어됩니다. |
@font-palette-values | 폰트 팔레트의 기본 값을 사용자 정의할 수 있도록 합니다. |
font-size | 텍스트의 글꼴 크기를 정의합니다. |
font-size-adjust | 폰트 리턴이 발생할 때도 읽을 수 있는 유지합니다. |
font-stretch | 폰트 시리즈에서 일반적인, 압축된 또는 확장된 글꼴을 선택합니다. |
font-style | 텍스트의 글꼴 스타일을 정의합니다. |
font-synthesis | 브라우저가 결합할 수 있는 부족한 글꼴(粗体 또는 Italic)을 제어합니다. |
font-variant | 텍스트가 소형 대문자로 표시되어야 하는지 여부를 정의합니다. |
font-variant-alternates | @font-feature-values에서 정의된 대체 이름과 연관된 대체 글자 사용을 제어합니다. |
font-variant-caps | 대문자 대체 글자 사용을 제어합니다. |
font-variant-east-asian | 동아시아 글자(예: 중국어와 일본어)의 대체 글자 사용을 제어합니다. |
font-variant-ligatures | 요소의 텍스트 내용에 사용할 연결 문자 및 문맥 형식을 제어합니다. |
font-variant-numeric | 숫자, 분수 및 순서 표시의 대체 글자 사용을 제어합니다. |
font-variant-position | 제어되는 작은 글자의 대체 글자 사용, 이 글자는 글자 기준선에 상표 또는 하표로 정위치됩니다. |
font-weight | 글자의 두께를 정의. |
G
grid | grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns 및 grid-auto-flow 속성의 축약 속성. |
grid-area | 그리드 항목의 이름을 지정하거나 grid-row-start, grid-column-start, grid-row-end 및 grid-column-end 속성의 축약 속성을 사용할 수 있습니다. |
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-gap 및 grid-column-gap의 축약 속성. |
grid-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-areas 속성의 축약 속성. |
grid-template-areas | 이름 지정된 그리드 항목을 사용하여 열과 행을 표시하는 방법을 정의. |
grid-template-columns | 그리드 레이아웃에서 열의 크기와 열 수를 지정. |
grid-template-rows | 그리드 레이아웃에서 행의 크기를 지정. |
H
hanging-punctuation | 행 상자 밖에 포인트 상자를 배치할 수 있는지 정의. |
height | 요소의 높이를 설정. |
hyphens | 단어를 어떻게 분할하여 문단의 레이아웃을 개선할지 설정. |
hyphenate-character | 설정할 단어를 줄바꿈 전에 사용할 연결문자. |
I
image-rendering | 이미지 확대 알고리즘 유형을 지정. |
@import | 스타일 시트를 다른 스타일 시트에 가져오는 것을 허용. |
initial-letter | 서론의 크기를 지정하고, 선택적으로 서론이 내려야 할 줄 수를 지정. |
inline-size | 요소가 행 내 방향에서의 크기를 지정. |
inset | 요소와 부모 요소 간의 거리를 지정. |
inset-block | 요소가 부모 요소와 블록 방향에서의 거리를 지정. |
inset-block-end | 요소가 부모 요소와 블록 방향에서의 종료 부분과의 거리를 지정. |
inset-block-start | 요소가 부모 요소와 블록 방향에서의 시작 부분과의 거리를 지정. |
inset-inline | 요소가 부모 요소와 행 내 방향에서의 거리를 지정. |
inset-inline-end | 요소가 부모 요소와 행 내 방향에서의 종료 부분과의 거리를 지정. |
inset-inline-start | 요소가 부모 요소와 행 내 방향에서의 시작 부분과의 거리를 지정. |
isolation | 요소가 새로운 스택 콘텐츠를 생성해야 하는지 정의. |
J
justify-content | 프로젝트가 모든 사용 가능한 공간을 사용하지 않을 때, 프로젝트가 유연 컨테이너 내에서의 정렬 방식을 정의. |
justify-items | 그리드 아이템이 행 내 방향에서의 정렬 방식을 정의. 그리드 컨테이너에 설정. |
justify-self | 그리드 아이템이 행 내 방향에서의 정렬 방식을 정의. 그리드 아이템에 설정. |
K
@keyframes | 애니메이션 코드를 정의. |
L
@layer | CSS 스타일의 순서를 평가하는 방식을 제어. |
left | 정위치 요소의 왼쪽 위치를 규정합니다. |
letter-spacing | 텍스트 내의 문자 간격을 증가 또는 감소. |
line-break | 행을 어떻게/여부로 브레이크할 것인가. |
line-height | 줄 높이를 설정. |
list-style | 한 줄 선언에서 모든 리스트 속성을 설정. |
list-style-image | 이미지를 리스트 아이템 표시기로 지정. |
list-style-position | 리스트 아이템 표시기 위치를 정의. |
list-style-type | 리스트 아이템 표시기 유형을 정의. |
M
margin | 한 줄 선언에서 모든 외곽 여백 속성을 설정. |
margin-block | 블록 방향의 외곽 여백을 지정. |
margin-block-end | 블록 방향 종료 부분의 외곽 여백을 지정. |
margin-block-start | 블록 방향 시작 부분의 외곽 여백을 지정. |
margin-bottom | 요소의 하 외곽 여백을 설정. |
margin-inline | 지정 행 내 방향의 외곽 여백. |
margin-inline-end | 행 내 방향에서 끝 외경을 지정합니다. |
margin-inline-start | 행 내 방향에서 시작 외경을 지정합니다. |
margin-left | 요소의 왼쪽 외경을 설정합니다. |
margin-right | 요소의 오른쪽 외경을 설정합니다. |
margin-top | 요소의 상단 외경을 설정합니다. |
marker | 요소 경로의 모든 정점(첫 번째, 중간, 마지막)에서 그려질 레이어를 가리킵니다. |
marker-end | 요소 경로의 마지막 정점에서 그려질 레이어를 가리킵니다. |
marker-mid | 요소 경로의 모든 중간 정점에서 그려질 레이어를 가리킵니다. |
marker-start | 요소 경로의 첫 번째 정점에서 그려질 레이어를 가리킵니다. |
mask |
다음 속성의 줄임말 속성입니다: |
mask-clip | 마스크 이미지에 영향을 받는 영역을 지정합니다. |
mask-composite | 현재 마스크 레이어와 아래의 마스크 레이어에서 사용할 합성 작업을 지정합니다. |
mask-image | 요소의 마스크 레이어로 사용할 이미지를 지정합니다. |
mask-mode | 마스크 레이어 이미지가 밝기 마스크로 treating 여부를 지정합니다. |
mask-origin | 마스크 레이어 이미지의 원래 위치를 지정합니다(마스크 위치 영역). |
mask-position | 마스크 레이어 이미지의 시작 위치를 설정합니다(마스크 위치 영역에 대한 상대적 위치). |
mask-repeat | 마스크 레이어 이미지의 반복 방식을 지정합니다. |
mask-size | 마스크 레이어 이미지의 크기를 지정합니다. |
mask-type | SVG |
max-height | 요소의 최대 높이를 설정합니다. |
max-width | 요소의 최대 너비를 설정합니다. |
@media | 다른 미디어 타입, 장치, 크기에 대해 스타일 규칙을 설정합니다. |
max-block-size | 요소가 블록 방향에서 최대 크기를 설정합니다. |
max-inline-size | 요소가 행 내 방향에서 최대 크기를 설정합니다. |
min-block-size | 요소가 블록 방향에서 최소 크기를 설정합니다. |
min-inline-size | 요소가 행 내 방향에서 최소 크기를 설정합니다. |
min-height | 요소의 최소 높이를 설정합니다. |
min-width | 요소의 최소 너비를 설정합니다. |
mix-blend-mode | 요소의 내용이 직접 부모의 배경과 어떻게 혼합되어야 하는지 정의합니다. |
N
@namespace | 스타일 시트에서 사용하는 XML 이름 공간을 정의합니다. |
O
object-fit | 정의된 요소의 내용이 사용되는 높이와 너비에 따라 만들어진 상자에 어떻게 맞춰야 하는지 정의합니다. |
object-position | 대체 요소가 그 프레임 내에 어떤 정렬 방식을 가지는지 지정. |
offset |
다음 속성의 줄임말 속성입니다: |
offset-anchor | 요소가 경로 위에 고정된 포인트를 지정. |
offset-distance | 애니메이션 요소가 경로 위의 위치를 지정. |
offset-path | 요소가 경로 애니메이션을 통해 경로를 지정. |
offset-position | 요소가 경로 애니메이션을 통해 초기 위치를 지정. |
offset-rotate | 요소가 경로 애니메이션을 통해 회전할 때 회전을 지정. |
opacity | 요소의 불투명도 등급을 설정. |
order | 에라스틱 아이템이 나머지 아이템에 비해 순서를 설정. |
orphans | 페이지나 열 하단에 유지해야 하는 최소 행 수를 설정. |
orphans | 페이지에서 분페이지가 일어났을 때 페이지 하단에 유지해야 하는 최소 행 수를 설정. |
outline | outline-width, outline-style 및 outline-color 속성의 축약 속성. |
outline-color | 대기표의 색상을 설정. |
outline-offset | 대기표를 옮기고, 그것을 테두리 가장자리 밖에 그립니다. |
outline-style | 대기표의 스타일을 설정. |
outline-width | 대기표의 너비를 설정. |
overflow | 내용이 요소의 프레임을 벗어났을 때 어떤 일이 일어날지 정의. |
overflow-anchor | 뉴 컨텐츠가 스크롤 가능 컨테이너에 로드될 때, 보이는 영역의 내용이 아래로 밀릴지 여부를 지정. |
overflow-wrap | 긴 단어가 컨테이너를 벗어났을 때 브라우저가 줄을 끊을 수 있는지 지정. |
overflow-wrap | 단어 내에서 방출을 방지하기 위해 문자열이 길어서 그것이 포함된 블록에 맞지 않을 때 브라우저가 단어를 접는지 정의. |
overflow-x | 내용의 좌우 단면을 잘라내고, 그것이 요소의 내용 영역을 벗어났을 때 정의. |
overflow-y | 내용의 상하 단면을 잘라내고, 그것이 요소의 내용 영역을 벗어났을 때 정의. |
overscroll-behavior | x와 y 축 방향으로 스크롤 라인이나 과도한 스크롤 효과가 있는지 지정. |
overscroll-behavior-block | 블록 방향으로 스크롤 라인이나 과도한 스크롤 효과가 있는지 지정. |
overscroll-behavior-inline | 행 내 방향으로 스크롤 라인이나 과도한 스크롤 효과가 있는지 지정. |
overscroll-behavior-x | x 축 방향으로 스크롤 라인이나 과도한 스크롤 효과가 있는지 지정. |
overscroll-behavior-y | y 축 방향으로 스크롤 라인이나 과도한 스크롤 효과가 있는지 지정. |
P
padding | 모든 padding-* 속성의 축약 속성. |
padding-block | 블록 방향상의 내간격을 지정합니다. |
padding-block-end | 블록 방향상 종료 지점의 내간격을 지정합니다. |
padding-block-start | 블록 방향상 시작 지점의 내간격을 지정합니다. |
padding-bottom | 요소의 하단 내간격을 설정합니다. |
padding-inline | 행 내 방향상의 내간격을 지정합니다. |
padding-inline-end | 행 내 방향상 종료 지점의 내간격을 지정합니다. |
padding-inline-start | 행 내 방향상 시작 지점의 내간격을 지정합니다. |
padding-left | 요소의 좌측 내간격을 설정합니다. |
padding-right | 요소의 우측 내간격을 설정합니다. |
padding-top | 요소의 상단 내간격을 설정합니다. |
@page | 인쇄 페이지의 크기, 방향 및 마진을 사용자 정의할 수 있습니다. |
page-break-after | 요소 이후의 페이지 분리(페이지브레이크) 행동을 설정합니다. |
page-break-before | 요소 이전의 페이지 분리(페이지브레이크) 행동을 설정합니다. |
page-break-inside | 요소 내의 페이지 분리(페이지브레이크) 행동을 설정합니다. |
paint-order | SVG 요소나 텍스트의 그리기 순서를 설정합니다. |
perspective | 3D 정위치 요소에 시각적 거리를 제공합니다. |
perspective-origin | 사용자가 3D 정위치 요소를 볼 위치를 정의합니다. |
place-content | 플렉스박스와 구분 레이아웃의 align-content 및 justify-content 속성 값을 지정합니다. |
place-items | 구분 레이아웃의 align-items 및 justify-items 속성 값을 지정합니다. |
place-self | 구분 레이아웃의 align-self 및 justify-self 속성 값을 지정합니다. |
pointer-events | 요소가 포인터 이벤트에 대한 반응을 정의합니다. |
position | 요소의 정위치 방법을 규정하는 타입(정적, 상대적, 절대적 또는 고정적)을 지정합니다. |
@property | 자바스크립트를 실행하지 않고도 스타일 시트에서 사용자 정의 CSS 속성을 정의할 수 있습니다. |
Q
quotes | 쌍따옴표 유형을 설정합니다. |
R
resize | 사용자가 요소의 크기를 어떻게 조정할지 및 조정할지 정의합니다. |
right | 정위치 요소의 왼쪽 위치를 규정합니다. |
rotate | 요소의 회전을 지정합니다. |
row-gap | 구분격자 행 간의 간격을 지정합니다. |
S
스케일 | 확대 또는 축소하여 요소의 크기를 지정합니다. |
@scope | 특정 DOM 자식 트리의 요소를 선택하고, 구체적인 선택자를 작성하지 않고 정확하게 요소를 정위치할 수 있게 합니다. |
scroll-behavior | 스크롤 가능 프레임에서 원활하게 스크롤되도록 규정합니다. 직접 점프하지 않습니다. |
scroll-margin | 흡착 위치와 컨테이너 간의 백그라운드 마argins을 지정합니다. |
scroll-margin-block | 블록 방향에서 흡착 위치와 컨테이너 간의 백그라운드 마argins을 지정합니다. |
scroll-margin-block-end | 블록 방향에서 흡착 위치와 컨테이너 종료 위치 간의 백그라운드 마argins을 지정합니다. |
scroll-margin-block-start | 블록 방향에서 흡착 위치와 컨테이너 시작 위치 간의 백그라운드 마argins을 지정합니다. |
scroll-margin-bottom | 하단 흡착 위치와 컨테이너 간의 백그라운드 마argins을 지정합니다. |
scroll-margin-inline | 행내 방향에서 흡착 위치와 컨테이너 간의 백그라운드 마argins을 지정합니다. |
scroll-margin-inline-end | 행내 방향에서 흡착 위치와 컨테이너 종료 위치 간의 백그라운드 마argins을 지정합니다. |
scroll-margin-inline-start | 행내 방향에서 흡착 위치와 컨테이너 시작 위치 간의 백그라운드 마argins을 지정합니다. |
scroll-margin-left | 왼쪽 흡착 위치와 컨테이너 간의 백그라운드 마argins을 지정합니다. |
scroll-margin-right | 오른쪽 흡착 위치와 컨테이너 간의 백그라운드 마argins을 지정합니다. |
scroll-margin-top | 위쪽 흡착 위치와 컨테이너 간의 백그라운드 마argins을 지정합니다. |
scroll-padding | 컨테이너부터 자식 요소 흡착 위치의 거리를 지정합니다. |
scroll-padding-block | 블록 방향에서 컨테이너부터 자식 요소 흡착 위치의 거리를 지정합니다. |
scroll-padding-block-end | 블록 방향에서 컨테이너 종료부터 자식 요소 흡착 위치의 거리를 지정합니다. |
scroll-padding-block-start | 블록 방향에서 컨테이너 시작부터 자식 요소 흡착 위치의 거리를 지정합니다. |
scroll-padding-bottom | 컨테이너 하단부터 자식 요소 흡착 위치의 거리를 지정합니다. |
scroll-padding-inline | 행내 방향에서 컨테이너부터 자식 요소 흡착 위치의 거리를 지정합니다. |
scroll-padding-inline-end | 행내 방향에서 컨테이너 종료 위치부터 자식 요소 흡착 위치의 거리를 지정합니다. |
scroll-padding-inline-start | 행내 방향에서 컨테이너 시작 위치부터 자식 요소 흡착 위치의 거리를 지정합니다. |
scroll-padding-left | 컨테이너의 왼쪽에서 자식 요소의 부착 위치까지의 거리를 지정합니다. |
scroll-padding-right | 컨테이너의 오른쪽에서 자식 요소의 부착 위치까지의 거리를 지정합니다. |
scroll-padding-top | 컨테이너의 상단에서 자식 요소의 부착 위치까지의 거리를 지정합니다. |
scroll-snap-align | 사용자가 스크롤을 멈추면 요소의 위치를 지정합니다. |
scroll-snap-stop | 터치패드나 터치스크린에서 빠르게 슬라이딩한 후의 스크롤 행동을 지정합니다. |
scroll-snap-type | 스크롤할 때의 부착 행동을 지정합니다. |
scrollbar-color | 요소의 스크롤바의 색상을 지정합니다. |
shape-outside | 행 내용의 둘레 모양을 정의합니다. |
@starting-style | 요소가 첫 번째 스타일 업데이트 전에 사용할 시작 스타일을 정의합니다. |
@supports | 브라우저가 특정 CSS 특성을 지원하는지 테스트하는 데 사용됩니다. |
T
tab-size | 탭의 너비를 규정합니다. |
table-layout | 셀, 행, 열에 대한 레이아웃을 정의하는 알고리즘을 정의합니다. |
text-align | 문자의 수평 정렬 방식을 규정합니다. |
text-align-last | text-align이 "justify"로 설정된 경우에 강제 줄 바꿈 전에 블록이나 줄의 마지막 줄을 어떻게 정렬할지 설명합니다. |
text-combine-upright | 여러 문자를 단일 문자의 공간에 결합합니다. |
text-decoration | 문단 장식을 규정합니다. |
text-decoration-color | 문단 장식(text-decoration)의 색상을 규정합니다. |
text-decoration-line | 문단 장식(text-decoration)의 행 유형을 규정합니다. |
text-decoration-style | 문단 장식(text-decoration)의 행 스타일을 규정합니다. |
text-decoration-thickness | 장식선의 두께를 규정합니다. |
text-emphasis |
다음 속성의 줄임말 속성입니다: |
text-emphasis-color | 강조 표시의 색상을 지정합니다. |
text-emphasis-position | 강조 표시의 위치를 지정합니다. |
text-emphasis-style | 강조 표시의 스타일을 지정합니다. |
text-indent | 문단 블록(text-block)의 첫 번째 줄의 인쇄 간격을 규정합니다. |
text-justify | text-align이 "justify"로 설정된 경우에 사용되는 정렬 방법을 규정합니다. |
text-orientation | 줄 내에서 문자의 방향을 정의합니다. |
text-overflow | 텍스트가 포함 요소를 초과할 때 발생하는 사건을 정의합니다. |
text-shadow | 텍스트 셰도우를 추가합니다. |
text-transform | 텍스트의 대문자를 제어합니다. |
text-underline-offset | 밑줄 텍스트 장식의 오프셋 거리를 지정합니다. |
text-underline-position | 밑줄 텍스트 장식의 위치를 지정합니다. |
top | 정위치된 요소의 최상단 위치를 정의합니다. |
transform | 2D 또는 3D 변환을 요소에 적용합니다. |
transform-origin | 변환 요소의 위치를 변경할 수 있게 합니다. |
transform-style | 3D 공간에서 내포된 요소를 렌더링하는 방법을 정의합니다. |
transition | 모든 transition-* 속성의 줄이징 속성. |
transition-delay | 이전 효과를 적절히 시작하는 방법을 정의합니다. |
transition-duration | 이전 효과를 완료하기 위해 필요한 초 또는 밀리초를 정의합니다. |
transition-property | 이전 효과에 대응하는 CSS 속성 이름을 정의합니다. |
transition-timing-function | 이전 효과의 속도 곡선을 정의합니다. |
translate | 요소의 위치를 지정합니다. |
U
unicode-bidi | direction 속성과 함께 사용하여, 동일한 문서 내에서 여러 언어를 지원하기 위해 텍스트를 덮어쓰기를 설정하거나 반환합니다. |
user-select | 요소의 텍스트를 선택할 수 있는지 여부를 정의합니다. |
V
vertical-align | 요소의 수직 정렬 방식을 설정합니다. |
visibility | 요소가 보이는지 여부를 정의합니다. |
W
white-space | 요소 내의 공백 문자를 처리하는 방식을 정의합니다. |
widows | 페이지 또는 열 상단에 유지해야 하는 최소 줄 수를 설정합니다. |
widows | 요소 내에서 페이지 분할이 발생할 경우 페이지 상단에 유지해야 하는 최소 줄 수를 설정합니다. |
width | 요소의 너비를 설정합니다. |
word-break | 단어가 줄의 끝에 도달했을 때 줄 바꿈 방식을 정의합니다. |
word-spacing | 문자 속의 단어 간격을 증가하거나 감소시킵니다. |
word-wrap | 긴 단어를 접을 수 없게 하여 다음 줄로 이동할 수 있게 합니다. |
writing-mode | 문자 줄이水平的 또는垂直布局을 정의합니다. |
Z
z-index | 정위치된 요소의 쌓임 순서를 설정합니다. |
zoom | 지정된 요소의 확대 인자. 요소를 확대하고 축소할 수 있습니다. |
- 이전 페이지 CSS 참고 가이드
- 다음 페이지 CSS 브라우저 지원