We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.


HTML Style 요소 (<style>) 는 문서나 문서 일부에 대한 스타일 정보를 포함합니다. 기본적으로, 스타일 지침은 CSS로 예상됩니다.


이 요소는 전역 속성을 포함합니다.

이 속성은 MIME type으로 스타일링 언어를  정의합니다.(charset은 지정되지 않습니다). 이 속성은 선택적이고, 생략될경우 text/css가 적용됩니다.
이 스타일이 적용될 미디어.  이것의 값은 미디어 쿼리이며 생략될경우 기본값 all이 적용됩니다.
이 값이 존재한다면, 그것의 부모 요소에만 스타일이 적용됩니다. 만약 없다면, 문서 전체에 스타일이 적용됩니다.
대체 스타일시트 세트를 지정합니다.
If set, disables (does not apply) the style rules, specified within the element, to the Document.


간단한 스타일 시트

<style type="text/css">
body {

scoped 스타일시트

  <div>The scoped attribute allows for you to include style elements mid-document.
   Inside rules only apply to the parent element.</div>
  <p>This text should be black. If it is red your browser does not support the scoped attribute.</p>
    <style scoped>
      p { color: red; }
    <p>This should be red.</p>

Live sample


명세 상태 주석
HTML Living Standard
The definition of 'style' in that specification.
Living Standard HTML5 에서 변화 없음.
The definition of 'style' in that specification.
Recommendation scoped 속성이 추가됨
HTML 4.01 Specification
The definition of 'style' in that specification.

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

특징 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
scoped 20 [1] 21.0 (21.0)[2] No support No support No support
특징 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
scoped ? 25.0 (25.0)[2] No support No support No support

[1] Supported in Chrome 20+ to 34 by enabling the "Enable <style scoped>" or "experimental WebKit features" flag in chrome://flags. Removed in Chrome 35+ due to code complexity.
[2] Gecko 20 and later implement :scope pseudo-classes, but the preference layout.css.scope-pseudo.enabled must be set to true. This is only the case by default in Nightly and Aurora test versions.


  • 외부 스타일 시트를 사용하기 위한 <link> 요소.

문서 태그 및 공헌자

이 페이지의 공헌자: azunyan3
최종 변경: azunyan3,