English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
스타일 객체는 단일 스타일 선언을 나타냅니다。
문서에서나, 스타일을 적용한 요소에서 스타일 객체를 접근할 수 있습니다。
다음 표는 Style 객체의 속성을 나열합니다。
“CSS” 열은 해당 속성이哪个CSS 버전에서 정의되었는지를 나타냅니다（CSS1，CSS2또는 CSS3）。
| 속성 | 설명 | CSS |
|---|---|---|
| alignContent | 항목이 모든 사용 가능한 공간을 사용하지 않았을 때, 에라스틱 컨테이너 내 각 행 간의 정렬 방식을 설정하거나 반환 | 3 |
| alignItems | 에라스틱 컨테이너 내 항목의 정렬 방식을 설정하거나 반환 | 3 |
| alignSelf | 에라스틱 컨테이너 내 선택된 항목의 정렬 방식을 설정하거나 반환 | 3 |
| animation | 모든 애니메이션 속성의 줄임말 속성, animationPlayState 속성을 제외한 모든 것 | 3 |
| animationDelay | 애니메이션을 시작하는 시간을 설정하거나 반환 | 3 |
| animationDirection | 애니메이션이 반복적으로 재생되어야 하는지 설정하거나 반환 | 3 |
| animationDuration | 애니메이션이 한 주기를 완료하는 데 필요한 시간 또는 밀리초를 설정하거나 반환 | 3 |
| animationFillMode | 애니메이션이 실행되지 않은 시간에 적용되는 값을 설정하거나 반환 | 3 |
| animationIterationCount | 애니메이션을 재생할 횟수를 설정하거나 반환 | 3 |
| animationName | @keyframes 애니메이션의 이름을 설정하거나 반환 | 3 |
| animationTimingFunction | 애니메이션의 속도 곡선을 설정하거나 반환 | 3 |
| animationPlayState | 애니메이션이 실행되거나 일시정지되도록 설정하거나 반환 | 3 |
| background | 모든 배경 속성을 하나의 선언으로 설정하거나 반환 | 1 |
| backgroundAttachment | 배경 이미지가 고정되었는지 페이지와 함께 스크롤되는지 설정하거나 반환 | 1 |
| backgroundColor | 요소의 배경색을 설정하거나 반환 | 1 |
| backgroundImage | 요소의 배경 이미지를 설정하거나 반환 | 1 |
| backgroundPosition | 배경 이미지의 시작 위치를 설정하거나 반환 | 1 |
| backgroundRepeat | 배경 이미지를 반복하는 방법을 설정하거나 반환 | 1 |
| backgroundClip | 배경을 그리는 영역을 설정하거나 반환 | 3 |
| backgroundOrigin | 배경 이미지의 정위치 영역을 설정하거나 반환 | 3 |
| backgroundSize | 배경 이미지의 크기를 설정하거나 반환 | 3 |
| backfaceVisibility | 화면에 직면하지 않았을 때 요소가 보이도록 설정하거나 반환 | 3 |
| border | borderWidth, borderStyle, borderColor를 한 문장에서 설정하거나 반환합니다 | 1 |
| borderBottom | 한 문장에서 모든 borderBottom 속성을 설정하거나 반환합니다 | 1 |
| borderBottomColor | 하단 경계선의 색상을 설정하거나 반환합니다 | 1 |
| borderBottomLeftRadius | 왼쪽 하단 경계선의 형상을 설정하거나 반환합니다 | 3 |
| borderBottomRightRadius | 오른쪽 하단 경계선의 형상을 설정하거나 반환합니다 | 3 |
| borderBottomStyle | 하단 경계선의 스타일을 설정하거나 반환합니다 | 1 |
| borderBottomWidth | 하단 경계선의 너비를 설정하거나 반환합니다 | 1개 |
| borderCollapse | 표格 경계선을 단일 경계선으로 병합할지 여부를 설정하거나 반환합니다 | 2 |
| borderColor | 요소의 경계선 색상을 설정하거나 반환합니다(최대 네 가지 값이 있을 수 있습니다) | 1 |
| borderImage | 모든 borderImage 속성을 설정하거나 반환하는 단축 속성을 사용합니다 | 3 |
| borderImageOutset | 경계선 이미지 영역이 경계선을 벗어나는 양을 설정하거나 반환합니다 | 3 |
| borderImageRepeat | 이미지 경계선을 반복하거나 내림, 늘리거나 설정하거나 반환합니다 | 3 |
| borderImageSlice | 이미지 경계선의 내부 이동을 설정하거나 반환합니다 | 3 |
| borderImageSource | 경계선으로 사용되는 이미지를 설정하거나 반환합니다 | 3 |
| borderImageWidth | 이미지 경계선의 너비를 설정하거나 반환합니다 | 3 |
| borderLeft | 한 문장에서 모든 borderLeft 속성을 설정하거나 반환합니다 | 1 |
| borderLeftColor | 왼쪽 경계선의 색상을 설정하거나 반환합니다 | 1 |
| borderLeftStyle | 왼쪽 경계선의 스타일을 설정하거나 반환합니다 | 1 |
| borderLeftWidth | 왼쪽 경계선의 너비를 설정하거나 반환합니다 | 1개 |
| borderRadius | 모든 네 개의 borderRadius 속성을 설정하거나 반환하는 단축 속성을 사용합니다 | 3 |
| borderRight | 한 문장에서 모든 borderRight 속성을 설정하거나 반환합니다 | 1 |
| borderRightColor | 오른쪽 경계선의 색상을 설정하거나 반환합니다 | 1 |
| borderRightStyle | 오른쪽 경계선의 스타일을 설정하거나 반환합니다 | 1 |
| borderRightWidth | 오른쪽 경계선의 너비를 설정하거나 반환합니다 | 1 |
| borderSpacing | 표格의 셀 간의 공간을 설정하거나 반환합니다 | 2 |
| borderStyle | 요소의 경계선 스타일을 설정하거나 반환합니다(최대 네 가지 값이 있을 수 있습니다) | 1 |
| borderTop | 한 문장에서 모든 borderTop 속성을 설정하거나 반환합니다 | 1 |
| borderTopColor | 위 경계선의 색상을 설정하거나 반환합니다 | 1 |
| borderTopLeftRadius | 왼쪽 위 경계선의 모양을 설정하거나 반환합니다 | 3 |
| borderTopRightRadius | 오른쪽 위 경계선의 모양을 설정하거나 반환합니다 | 3 |
| borderTopStyle | 위 경계선의 스타일을 설정하거나 반환합니다 | 1 |
| borderTopWidth | 위 경계선의 너비를 설정하거나 반환합니다 | 1 |
| borderWidth | 요소 경계선의 너비를 설정하거나 반환합니다(최대 네 가지 값이 있을 수 있습니다) | 1 |
| bottom | 정위치 요소의 하단 위치를 설정하거나 반환합니다 | 2 |
| boxDecorationBreak | 페이지 심보나 행 내 요소의 줄 바꿈 심보에서 배경과 경계선의 행동을 설정하거나 반환합니다 | 3 |
| boxShadow | 한 개나 여러 개의 그림자를 프레임에 추가합니다 | 3 |
| boxSizing | 특정 요소가 어떤 방식으로 해당 영역에 맞춰지게 할 수 있도록 정의합니다 | 3 |
| captionSide | 테이블 제목의 위치를 설정하거나 반환합니다 | 2 |
| clear | 浮动 요소에 비해 요소의 위치를 설정하거나 반환합니다 | 1 |
| clip | 정위치 요소의 어느 부분이 보이게 할지 설정하거나 반환합니다 | 2 |
| color | 텍스트의 색상을 설정하거나 반환합니다 | 1 |
| columnCount | 요소가 얼마나 많은 칼럼으로 나누어야 하는지 설정하거나 반환합니다 | 3 |
| columnFill | 칼럼을 어떻게 채울지 설정하거나 반환합니다 | 3 |
| columnGap | 칼럼 사이의 간격을 설정하거나 반환합니다 | 3 |
| columnRule | 모든 columnRule 속성을 설정하거나 반환하는 약자 속성 | 3 |
| columnRuleColor | 칼럼 사이 규칙의 색상을 설정하거나 반환합니다 | 3 |
| columnRuleStyle | 칼럼 사이의 규칙 스타일을 설정하거나 반환합니다 | 3 |
| columnRuleWidth | 칼럼 사이의 규칙 너비를 설정하거나 반환합니다 | 3 |
| columns | columnWidth와 columnCount를 설정하거나 반환하는 약자 속성 | 3 |
| columnSpan | 요소가 얼마나 많은 칼럼을 건너뛰어야 하는지 설정하거나 반환합니다 | 3 |
| columnWidth | 칼럼의 너비를 설정하거나 반환합니다 | 3 |
| content | pseudo-element :before와 :after와 함께 사용하여 생성된 내용을 삽입합니다 | 2 |
| counterIncrement | 한 개나 여러 개의 카운터를 증가시킵니다 | 2 |
| counterReset | 한 개나 여러 개의 카운터를 생성하거나 초기화합니다 | 2 |
| cursor | 마우스 포인터에 표시할 커서 유형을 설정하거나 반환합니다 | 2 |
| direction | 텍스트 방향을 설정하거나 반환합니다 | 2 |
| display | 요소의 표시 유형을 설정하거나 반환합니다 | 1 |
| emptyCells | 빈 셀의 경계선과 배경을 표시할지 여부를 설정하거나 반환합니다 | 2 |
| filter | 이미지 필터(ぼや기와 채도와 같은視覚 효과)를 설정하거나 반환합니다 | 3 |
| flex | 프로젝트가 나머지 부분에 비해 길이를 설정하거나 반환합니다 | 3 |
| flexBasis | 유연한 물질의 초기 길이 설정 또는 반환 | 3 |
| flexDirection | 유연한 항목의 방향 설정 또는 반환 | 3 |
| flexFlow | flexDirection과 flexWrap 속성의 요약 속성 | 3 |
| flexGrow | 항목이 나머지 항목에 비해 증가될 양 설정 또는 반환 | 3 |
| flexShrink | 항목이 나머지 항목에 비해 축소될 방식 설정 또는 반환 | 3 |
| flexWrap | 유연한 항목이 포장되어야 하는지 설정 또는 반환 | 3 |
| cssFloat | 요소의 수평 정렬 방식 설정 또는 반환 | 1 |
| font | fontStyle, fontVariant, fontWeight, fontSize, lineHeight, fontFamily를 하나의 선언에서 설정 또는 반환 | 1 |
| fontFamily | 텍스트의 폰트 시리즈를 설정 또는 반환 | 1 |
| fontSize | 텍스트의 폰트 크기를 설정 또는 반환 | 1 |
| fontStyle | 폰트 스타일이 일반, 기울임, 또는 기울임인지 설정 또는 반환 | 1 |
| fontVariant | 소문자 대문자로 텍스트를 표시할지 설정 또는 반환 | 1 |
| fontWeight | 폰트의 두껍기 설정 또는 반환 | 1 |
| fontSizeAdjust | 폰트 회귀가 발생할 때 텍스트의 읽기 쉽기를 유지 | 3 |
| fontStretch | 폰트 시리즈에서 일반, 압축된, 또는 확장된 폰트를 선택 | 3 |
| hangingPunctuation | 점호가 행 브러시 밖에 위치할 수 있는지 지정 | 3 |
| height | 요소의 높이 설정 또는 반환 | 1 |
| hyphens | 단락 레이아웃을 개선하기 위해 단어를 어떻게 분할할지 설정 | 3 |
| icon | 저자가 표지 스타일의 대체 스타일을 사용할 수 있도록 합니다 | 3 |
| imageOrientation | 사용자代理가 이미지에 적용할 오른쪽 또는 시계 방향 회전 지정 | 3 |
| isolation | 요소가 새로운 스택 내용을 생성해야 하는지 정의 | 3 |
| justifyContent | 모든 사용 가능한 공간을 사용하지 않을 때, 유연한 컨테이너 내 항목의 정렬 방식 설정 또는 반환 | 3 |
| left | 정위치 요소의 왼쪽 위치 설정 또는 반환 | 2 |
| letterSpacing | 텍스트 행 내 문자 간의 간격 설정 또는 반환 | 1 |
| lineHeight | 텍스트 행 간의 거리 설정 또는 반환 | 1 |
| listStyle | listStyleImage, listStylePosition, listStyleType를 하나의 선언에서 설정 또는 반환 | 1 |
| listStyleImage | 이미지를 리스트 항목 표시로 설정 또는 반환 | 1 |
| listStylePosition | 리스트 항목 표시 위치 설정 또는 반환 | 1 |
| listStyleType | 리스트 항목 표시 유형 설정 또는 반환 | 1 |
| margin | 요소의 마진을 설정하거나 반환합니다(최대 네 가지 값을 포함할 수 있습니다) | 1 |
| marginBottom | 요소의 하단 마진을 설정하거나 반환합니다 | 1 |
| marginLeft | 요소의 왼쪽 마진을 설정하거나 반환합니다 | 1 |
| marginRight | 요소의 오른쪽 마진을 설정하거나 반환합니다 | 1 |
| marginTop | 요소의 상단 마진을 설정하거나 반환합니다 | 1 |
| maxHeight | 요소의 최대 높이를 설정하거나 반환합니다 | 2 |
| maxWidth | 요소의 최대 너비를 설정하거나 반환합니다 | 2 |
| minHeight | 요소의 최소 높이를 설정하거나 반환합니다 | 2 |
| minWidth | 요소의 최소 너비를 설정하거나 반환합니다 | 2 |
| navDown | 아래로 이동 키를 사용할 때의 탐색 위치를 설정하거나 반환합니다 | 3 |
| navIndex | 요소의 탭 순서를 설정하거나 반환합니다 | 3 |
| navLeft | 왼쪽으로 이동 키를 사용할 때 탐색할 위치를 설정하거나 반환합니다 | 3 |
| navRight | 오른쪽으로 이동 키를 사용할 때의 탐색 위치를 설정하거나 반환합니다 | 3 |
| navUp | 아래로 이동 키를 사용할 때의 탐색 위치를 설정하거나 반환합니다 | 3 |
| objectFit | 대체 요소의 내용이 사용된 높이와 너비를 기반으로 한 박스에 어떻게 맞춰져야 하는지 지정합니다 | 3 |
| objectPosition | 대체 요소가 그 블록 내에서 어떻게 정렬되어야 하는지 지정합니다 | 3 |
| opacity | 요소의 불투명도 수준을 설정하거나 반환합니다 | 3 |
| order | 엘라스틱 아이템이 나머지 아이템에 비해 순서를 설정하거나 반환합니다 | 3 |
| orphans | 요소 내에서 페이지 브레이크가 발생할 때 페이지 하단에 유지해야 하는 요소의 최소 행 수를 설정하거나 반환합니다 | 2 |
| outline | 모든 테두리 속성을 하나의 선언에서 설정하거나 반환합니다 | 2 |
| outlineColor | 요소 주위의 테두리 색상을 설정하거나 반환합니다 | 2 |
| outlineOffset | 테두리를 이동시키고, 그림자를 테두리 경계 밖으로 그립니다 | 3 |
| outlineStyle | 요소 주위의 테두리 스타일을 설정하거나 반환합니다 | 2 |
| outlineWidth | 요소 주위의 테두리 너비를 설정하거나 반환합니다 | 2 |
| overflow | 요소의 프레임 밖에 나타나는 콘텐츠 처리 방식을 설정하거나 반환합니다 | 2 |
| overflowX | 콘텐츠의 왼쪽에 지정합니다/오른쪽 경계가 요소의 내용 영역을 벗어나면 어떻게 처리할지 | 3 |
| overflowY | 콘텐츠의 상단에 지정합니다/하단 경계가 요소의 내용 영역을 벗어나면 어떻게 처리할지 | 3 |
| padding | 요소의 패딩을 설정하거나 반환합니다(최대 네 가지 값을 포함할 수 있습니다) | 1 |
| paddingBottom | 요소의 하단 패딩을 설정하거나 반환합니다 | 1 |
| paddingLeft | 요소의 왼쪽 패딩을 설정하거나 반환합니다 | 1 |
| paddingRight | 요소의 오른쪽 패딩을 설정하거나 반환합니다 | 1 |
| paddingTop | 요소의 상단 패딩을 설정하거나 반환합니다 | 1 |
| pageBreakAfter | 페이지 브레이크 행동을 설정하거나 반환합니다 | 2 |
| pageBreakBefore | 요소 앞의 페이지 분리 행동 설정 또는 반환 | 2 |
| pageBreakInside | 요소 내의 페이지 분리 행동 설정 또는 반환 | 2 |
| perspective | 시각적으로 확인하는 방법 설정 또는 반환3D 요소의 시각적 관점 설정 또는 반환 | 3 |
| perspectiveOrigin | 설정 또는 반환3D 요소의 하단 위치 설정 또는 반환 | 3 |
| position | 요소의 정위치 방법의 유형 설정 또는 반환 (정적, 상대적, 절대적 또는 고정적) | 2 |
| quotes | 내용물을 포함하는 인용 부호의 유형 설정 또는 반환 | 2 |
| resize | 요소가 사용자에 의해 크기를 조정할 수 있는지 설정 또는 반환 | 3 |
| right | 정위치 요소의 정확한 위치 설정 또는 반환 | 2 |
| tableLayout | 테이블 셀, 행 및 열을 배치하는 방식 설정 또는 반환 | 2 |
| tabSize | 탭 길이 설정 또는 반환 | 3 |
| textAlign | 텍스트 수평 정렬 방식 설정 또는 반환 | 1 |
| textAlignLast | 텍스트 정렬이 'justify'로 설정된 경우, 블록이나 마지막 줄이 강제 줄 바꿈 전에 정렬되는 방식 설정 또는 반환 | 3 |
| textDecoration | 텍스트 장식 설정 또는 반환 | 1 |
| textDecorationColor | 텍스트 장식에서 색상 설정 또는 반환 | 3 |
| textDecorationLine | 텍스트 장식에서 행 유형 설정 또는 반환 | 3 |
| textDecorationStyle | 텍스트 장식에서 선 스타일 설정 또는 반환 | 3 |
| textIndent | 텍스트 첫 번째 줄의 인덱스 설정 또는 반환 | 1 |
| textJustify | 텍스트 정렬이 'justify'로 설정된 경우 사용하는 정렬 방법 설정 또는 반환 | 3 |
| textOverflow | 텍스트가 포함 요소에서 벗어나면 발생하는 일 설정 또는 반환 | 3 |
| textShadow | 텍스트의 그림자 효과 설정 또는 반환 | 3 |
| textTransform | 텍스트 대문자 설정 또는 반환 | 1 |
| top | 정위치 요소의 상단 위치 설정 또는 반환 | 2 |
| transform | 변환2D 또는3D 변환 요소에 적용 | 3 |
| transformOrigin | 변환 후 요소의 위치 설정 또는 반환 | 3 |
| transformStyle | 설정 또는 반환3D 공간에서 내포된 요소를 렌더링하는 방식 | 3 |
| transition | 네 개의 효과적 변환 속성을 설정 또는 반환하는 간단한 속성 | 3 |
| transitionProperty | 효과적 변환에 대응하는 CSS 속성 설정 또는 반환 | 3 |
| transitionDuration | 효과적 변환이 완료되기까지 필요한 초 또는 밀리초 설정 또는 반환 | 3 |
| transitionTimingFunction | 효과적 변환 속도 곡선 설정 또는 반환 | 3 |
| transitionDelay | 효과적 변환 시작 시간 설정 또는 반환 | 3 |
| unicodeBidi | 같은 문서 내에서 여러 언어를 지원하기 위해 텍스트를 다시 쓰는지 여부를 설정하거나 반환합니다 | 2 |
| userSelect | 요소의 텍스트를 선택할 수 있는지 여부를 설정하거나 반환합니다 | 2 |
| verticalAlign | 요소 내 내용의 수직 정렬 방식을 설정하거나 반환합니다 | 1 |
| visibility | 요소가 보이어야 하는지 여부를 설정하거나 반환합니다 | 2 |
| whiteSpace | 문자 중 탭, 개행 및 공백을 처리하는 방법을 설정하거나 반환합니다 | 1 |
| width | 요소의 너비를 설정하거나 반환합니다 | 1 |
| wordBreak | CJK 스크립트가 아닌 스크립트의 띄어쓰기 규칙을 설정하거나 반환합니다 | 3 |
| wordSpacing | 문자 중 단어 간 간격을 설정하거나 반환합니다 | 1 |
| wordWrap | 긴 불가능한 단어를 끊어 떨어뜨리고 다음 줄로 이동할 수 있게 합니다 | 3 |
| widows | 페이지 상단에 보이는 요소의 최소 행 수를 설정하거나 반환합니다 | 2 |
| zIndex | 위치 요소의 스택 순서를 설정하거나 반환합니다 | 2 |
HTML 강의:HTML CSS
CSS 강의:CSS 강의
HTML 참조:HTML <style> 태그
CSS 참조:CSS 속성