Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

CSS

Summary

캐스케이딩 스타일 시트 (CSS)는 웹 컨텐츠를 표현하는 언어입니다. World Wide Web 컨소시엄CSS standard|CSS 표준을 관리하고 있습니다.

CSS 문서 목록

CSS 학습 자료

CSS를 기초부터 가르쳐줄 자습서와 개념 글

CSS 선택자

사용 가능한 모든 CSS 선택자에 대한 참고서

CSS 속성

사용 가능한 모든 CSS 속성에 대한 참고서

CSS 기능

사용 가능한 모든 CSS 기능에 대한 참고서

 

@규칙(앳룰)

사용 가능한 CSS @규칙(앳룰)에 대한 다른 유형의 참고서

 

미디어 쿼리

사용 가능한 미디어 쿼리에 대한 다른 유형의 참고서

참고: 웹 개발에 익숙하지 않다면, 초보자를 위한 웹 개발을 먼저 확인하는 게 좋습니다.

배경

캐스케이딩 스타일 시트 (CSS)는 콘텐츠 마크업(예: HTML, XHTML, SVG or XML)을 표현(예: 스타일, 레이아웃, 애니메이션)하는 언어입니다. 그리고 e Open Web Platform|오픈 웹 플랫폼의 주요 구성 요소 중 하나입니다.

CSS는 선택자속성으로 컨텐츠에 스타일을 줄 수 있습니다.

  • 첫번째 버전: | CSS 1 권고는 Håkon Wium Lie와 Bert Bos가 작성했고, 1996에 공개됐습니다.
  • 현재 안정 버전: | CSS 2 권고는 그 전에 수년 동안 안정됨에도 불구하고, 1998년에 처음 공개됐으나, 2011년까지 완성되지 못했습니다. CSS3의 여러 모듈이 현재 시점(2012년 12월) 기준으로 안정되었습니다. 자세한 내용은 "현재와 미래의 작업"을 참고하세요.
  • 현재와 미래의 작업: CSS 워킹 그룹은 CSS3로 알려진 기술 집합의 각기 다른 부분을 설명하는 "모듈"의 몇개를 개발하고 있습니다. 이러한 모듈 중 일부는 안정적인 상태이지만, 여전히 일부는 실험적인 상태이고 많은 브라우저가 해당 모듈을 지원하지 않습니다. 또한 다양한 CSS4 모듈이 개발되고 있습니다. 모듈과 사양에 대한 개발 상황에 확인하려면 | CSS 워킹 그룹이 현재 개발 상태문서에서 확인할 수 있습니다.

CSS 기술에 기여하기

CSS 워킹 그룹이 CSS 개발을 주도하고 있습니다. 참여를 포함한 더 많은 정보는 CSS 워킹 그룹 홈페이지에서 확인할 수 있습니다. 피드백을 제공하거나 스펙에 참여하기 위한 질문은 WWW-스타일 메일링 리스트를 이용해주세요. 단, "CSS를 내 웹 페이지에 적용하기 위한 방법"과 같은 유형의 질문을 하는 곳이 아닌 점을 명심해 주세요. For providing feedback and asking questions related to contributing to specs, a good place is the www-style mailing list. Bear in mind that it is not a suitable place for “how do I use CSS to style my web page” type questions.

CSS 레퍼런스에 기여하기

CSS가 계속 발전하는 만큼, 우리도 문서를 꾸준히 개선해야 합니다. 현재, 우리는 CSS 속성 관련된 내용을 작업중입니다. 이 프로젝트에 참여하려면, CSS 속성 가이드를 참조하세요.

모든 CSS 관련 목록

css/assigned
css/atrules css/atrules/@charset
css/atrules/@font-face css/atrules/@import css/atrules/@keyframes
css/atrules/@media css/atrules/@namespace css/atrules/@page
css/atrules/@region css/atrules/@supports css/atrules/@viewport
css/color css/color/colors by hue
css/color/colors by lightness css/color/colors by name css/color/colors by perceptual lightness
css/color/colors by saturation css/color/user-defined system colors css/concepts
css/concepts/animatable css/concepts/computed value css/concepts/css applies to
css/concepts/cssom css/concepts/fallback property css/concepts/fragment
css/concepts/inherited css/concepts/initial value css/concepts/named flow
css/concepts/overset css/concepts/region css/concepts/region chain
css/cssom css/cssom/CSSImportRule
css/cssom/CSSImportRule/href css/cssom/CSSImportRule/media css/cssom/CSSKeyframeRule
css/cssom/CSSKeyframeRule/keyText css/cssom/CSSKeyframeRule/style css/cssom/CSSKeyframesRule
css/cssom/CSSKeyframesRule/cssRules css/cssom/CSSKeyframesRule/deleteRule css/cssom/CSSKeyframesRule/findRule
css/cssom/CSSKeyframesRule/insertRule css/cssom/CSSKeyframesRule/name css/cssom/CSSMediaList/CSSMediaList
css/cssom/CSSMediaList/appendMedium css/cssom/CSSMediaList/deleteMedium css/cssom/CSSMediaList/item
css/cssom/CSSMediaList/mediaText css/cssom/CSSMediaRule/CSSMediaRule css/cssom/CSSMediaRule/cssRules
css/cssom/CSSMediaRule/deleteRule css/cssom/CSSMediaRule/insertRule css/cssom/CSSMediaRule/media
css/cssom/CSSNamespaceRule/CSSNamespaceRule css/cssom/CSSNamespaceRule/namespaceURI css/cssom/CSSNamespaceRule/prefix
css/cssom/CSSOM view css/cssom/CSSRule
css/cssom/CSSRule/cssText css/cssom/CSSRule/parentRule
css/cssom/CSSRule/parentStyleSheet css/cssom/CSSRule/type css/cssom/CSSStyleDeclaration/CSSStyleDeclaration
css/cssom/CSSStyleDeclaration/cssText css/cssom/CSSStyleDeclaration/getPropertyPriority css/cssom/CSSStyleDeclaration/getPropertyValue
css/cssom/CSSStyleDeclaration/item css/cssom/CSSStyleDeclaration/removeProperty css/cssom/CSSStyleDeclaration/setProperty
css/cssom/ClientRect css/cssom/ClientRect/bottom css/cssom/ClientRect/left
css/cssom/ClientRect/right css/cssom/ClientRect/top css/cssom/MSCSSMatrix/methods/inverse
css/cssom/MSCSSMatrix/methods/multiply css/cssom/MSCSSMatrix/methods/rotate css/cssom/MSCSSMatrix/methods/rotateAxisAngle
css/cssom/MSCSSMatrix/methods/scale css/cssom/MSCSSMatrix/methods/setMatrixValue css/cssom/MSCSSMatrix/methods/skew
css/cssom/MSCSSMatrix/methods/skewX css/cssom/MSCSSMatrix/methods/skewY css/cssom/MSCSSMatrix/methods/toString
css/cssom/MSCSSMatrix/properties/b css/cssom/MSCSSMatrix/properties/c css/cssom/MSCSSMatrix/properties/d
css/cssom/MSCSSMatrix/properties/e css/cssom/MSCSSMatrix/properties/f css/cssom/MSCSSMatrix/properties/m11
css/cssom/MSCSSMatrix/properties/m12 css/cssom/MSCSSMatrix/properties/m13 css/cssom/MSCSSMatrix/properties/m14
css/cssom/MSCSSMatrix/properties/m21 css/cssom/MSCSSMatrix/properties/m22 css/cssom/MSCSSMatrix/properties/m23
css/cssom/MSCSSMatrix/properties/m24 css/cssom/MSCSSMatrix/properties/m31 css/cssom/MSCSSMatrix/properties/m32
css/cssom/MSCSSMatrix/properties/m33 css/cssom/MSCSSMatrix/properties/m34 css/cssom/MSCSSMatrix/properties/m41
css/cssom/MSCSSMatrix/properties/m42 css/cssom/MSCSSMatrix/properties/m43 css/cssom/MSCSSMatrix/properties/m44
css/cssom/currentStyle css/cssom/imports
css/cssom/methods css/cssom/methods/addPageRule css/cssom/methods/addRule
css/cssom/methods/getExpression css/cssom/methods/msGetPropertyEnabled css/cssom/methods/msPutPropertyEnabled
css/cssom/methods/removeExpression
css/cssom/methods/setExpression
css/cssom/page css/cssom/pages css/cssom/pages/item
css/cssom/properties css/cssom/properties/background css/cssom/properties/clipBottom
css/cssom/properties/clipLeft css/cssom/properties/clipRight css/cssom/properties/clipTop
css/cssom/properties/cssFloat css/cssom/properties/fontWeight css/cssom/properties/hasLayout
css/cssom/properties/height css/cssom/properties/href css/cssom/properties/imports
css/cssom/properties/innerWidth css/cssom/properties/isAlternate css/cssom/properties/isPrefAlternate
css/cssom/properties/item css/cssom/properties/length css/cssom/properties/media
css/cssom/properties/offsetX css/cssom/properties/offsetY css/cssom/properties/outerHeight
css/cssom/properties/outerWidth css/cssom/properties/pageX css/cssom/properties/pageXOffset
css/cssom/properties/pageY css/cssom/properties/pageYOffset css/cssom/properties/pixelBottom
css/cssom/properties/pixelHeight css/cssom/properties/pixelLeft css/cssom/properties/pixelRight
css/cssom/properties/pixelTop css/cssom/properties/pixelWidth css/cssom/properties/posBottom
css/cssom/properties/posHeight css/cssom/properties/posLeft css/cssom/properties/posRight
css/cssom/properties/posTop css/cssom/properties/posWidth css/cssom/properties/pseudoClass
css/cssom/properties/selector css/cssom/properties/selectorText css/cssom/properties/sheet
css/cssom/properties/styleSheet css/cssom/properties/styleSheets css/cssom/properties/usedCharset
css/cssom/properties/viewInheritStyle css/cssom/properties/width css/cssom/properties/x
css/cssom/properties/y css/cssom/rule css/cssom/rule/selectorText
css/cssom/rules css/cssom/rules/item css/cssom/runtimeStyle
css/cssom/screen css/cssom/screen/availHeight css/cssom/screen/availWidth
css/cssom/screen/bufferDepth css/cssom/screen/colorDepth css/cssom/screen/constructor
css/cssom/screen/deviceXDPI css/cssom/screen/deviceYDPI css/cssom/screen/fontSmoothingEnabled
css/cssom/screen/height css/cssom/screen/logicalXDPI css/cssom/screen/logicalYDPI
css/cssom/screen/pixelDepth css/cssom/screen/systemXDPI css/cssom/screen/systemYDPI
css/cssom/screen/updateInterval css/cssom/screen/width css/cssom/style
css/cssom/style/type css/cssom/styleSheet css/cssom/styleSheet/addImport
css/cssom/styleSheet/blockDirection css/cssom/styleSheet/cssRules css/cssom/styleSheet/cssText
css/cssom/styleSheet/deleteRule css/cssom/styleSheet/insertRule css/cssom/styleSheet/ownerNode
css/cssom/styleSheet/ownerRule css/cssom/styleSheet/owningElement css/cssom/styleSheet/pages
css/cssom/styleSheet/parentStyleSheet css/cssom/styleSheet/readOnly css/cssom/styleSheet/rules
css/cssom/styleSheet/title css/cssom/styleSheet/type css/cssom/styleSheets
css/cssom/stylesheet/removeImport css/cssom/stylesheet/removeRule css/data types
css/data types/angle css/data types/color css/data types/custom ident
css/data types/frequency css/data types/image css/data types/integer
css/data types/keyword css/data types/length css/data types/number
css/data types/percentage css/data types/position css/data types/resolution
css/data types/string css/data types/text css/data types/time
css/data types/url css/es
css/exclusions/ms-wrap-flow css/exclusions/ms-wrap-margin css/exclusions/ms-wrap-through
css/fonts css/fonts/font-variant
css/fr css/functions css/functions/blur
css/functions/brightness
css/functions/calc css/functions/contrast
css/functions/cross-fade css/functions/cubic-bezier css/functions/custom
css/functions/drop-shadow css/functions/grayscale
css/functions/hue-rotate
css/functions/invert css/functions/linear-gradient
css/functions/matrix() css/functions/matrix3d
css/functions/opacity css/functions/perspective
css/functions/radial-gradient css/functions/repeating-linear-gradient
css/functions/repeating-radial-gradient css/functions/rotate() css/functions/rotate3d()
css/functions/rotateX() css/functions/rotateY() css/functions/rotateZ()
css/functions/saturate css/functions/scale()
css/functions/scale3d() css/functions/scaleX() css/functions/scaleY()
css/functions/scaleZ() css/functions/sepia
css/functions/skew() css/functions/skewX() css/functions/skewY()
css/functions/steps css/functions/translate()
css/functions/translate3d() css/functions/translateX() css/functions/translateY()
css/functions/translateZ() css/functions/url() css/functions/var
css/generated and replaced content css/high contrast mode/properties/-ms-high-contrast css/high contrast modeapis/properties/ms-high-contrast-adjust
css/keywords css/ko
css/media queries css/media queries/accelerator css/media queries/any-hover
css/media queries/any-pointer css/media queries/apis css/media queries/apis/MediaQueryList
css/media queries/apis/MediaQueryListListener css/media queries/apis/StyleMedia css/media queries/apis/addListener
css/media queries/apis/handleChange css/media queries/apis/matchMedia css/media queries/apis/matchMedium
css/media queries/apis/matches css/media queries/apis/media css/media queries/apis/properties/type
css/media queries/apis/removeListener css/media queries/aspect-ratio