<style>: 스타일 정보 요소

This translation is in progress.

HTML <style> 요소는 문서나 문서 일부에 대한 스타일 정보를 포함합니다.

<style> 요소는 문서의 <head> 안에 위치해야 합니다. 그러나, 일반적으로 스타일은 외부 스타일 시트에 작성하고, <link> 요소로 연결하는 편이 좋습니다.

문서가 다수의 <style><link> 요소를 포함하면 서로의 순서대로 DOM에 스타일을 적용합니다. 따라서 예상치 못한 종속 문제를 피하려면 올바른 순서를 따라 <style><link> 요소를 배치해야 합니다.

<link> 요소와 동일하게, <style> 요소도 미디어 쿼리를 값으로 가지는 media 특성을 포함할 수 있습니다. 이를 통해 뷰포트 너비 등 매체 기능에 따라 선택적으로 스타일 시트를 적용할 수 있습니다.

특성

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

type
이 특성은 MIME type으로 스타일링 언어를 정의합니다.(charset은 지정되지 않습니다). 이 특성은 선택적이고, 생략될경우 text/css가 적용됩니다.
media
이 스타일이 적용될 미디어. 이것의 값은 미디어 쿼리이며 생략될경우 기본값 all이 적용됩니다.
nonce
A cryptographic nonce (number used once) used to whitelist inline styles in a style-src Content-Security-Policy. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource’s policy is otherwise trivial.
title
대체 스타일 시트 세트를 지정합니다.

예제

간단한 스타일 시트

<style type="text/css">
body {
  color:red;
}
</style> 

Multiple style elements

In this example we've included two <style> elements — notice how the conflicting declarations in the later <style> element override those in the earlier one, if they have equal specificity.

<!doctype html>
<html>
<head>
  <style>
    p {
      color: white;
      background-color: blue;
      padding: 5px;
      border: 1px solid black;
    }
  </style> 
  <style>
    p {
      color: blue;
      background-color: yellow;
    }
  </style> 
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

Including a media query

In this example we build on the previous one, including a media attribute on the second <style> element so it is only applied when the viewport is less than 500px in width.

<!doctype html>
<html>
<head>
  <style>
    p {
      color: white;
      background-color: blue;
      padding: 5px;
      border: 1px solid black;
    }
  </style> 
  <style media="all and (max-width: 500px)">
    p {
      color: blue;
      background-color: yellow;
    }
  </style> 
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

기술 요약

콘텐츠 카테고리 메타데이터 콘텐츠. scoped 특성이 존재하면 플로우 콘텐츠.
가능한 콘텐츠 type 특성에 맞는 텍스트, 즉 text/css.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 메타데이터 콘텐츠를 허용하는 모든 요소
가능한 ARIA 역할 없음
DOM 인터페이스 HTMLStyleElement

명세

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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
styleChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
mediaChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
scoped
DeprecatedNon-standard
Chrome No support 19 — 35
Disabled
No support 19 — 35
Disabled
Disabled From version 19 until version 35 (exclusive): this feature is behind the Enable <style scoped> preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge No support NoFirefox No support 55 — 61
Notes Disabled
No support 55 — 61
Notes Disabled
Notes This attribute was hidden behind a pref because no other browsers support it (See bug 1291515).
Disabled From version 55 until version 61 (exclusive): this feature is behind the layout.css.scoped-style.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 21 — 55
IE No support NoOpera No support 15 — 22
Disabled
No support 15 — 22
Disabled
Disabled From version 15 until version 22 (exclusive): this feature is behind the Enable <style scoped> preference (needs to be set to true).
Safari No support NoWebView Android No support NoChrome Android No support 25 — 35
Disabled
No support 25 — 35
Disabled
Disabled From version 25 until version 35 (exclusive): this feature is behind the Enable <style scoped> preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Firefox Android No support 55 — 61
Notes Disabled
No support 55 — 61
Notes Disabled
Notes This attribute was hidden behind a pref because no other browsers support it (See bug 1291515).
Disabled From version 55 until version 61 (exclusive): this feature is behind the layout.css.scoped-style.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 21 — 55
Opera Android No support 14 — 22
Disabled
No support 14 — 22
Disabled
Disabled From version 14 until version 22 (exclusive): this feature is behind the Enable <style scoped> preference (needs to be set to true).
Safari iOS No support NoSamsung Internet Android No support 1.5 — 3.0
titleChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
typeChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

같이 보기

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