This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<style>: 스타일 정보 요소
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
* Some parts of this feature may have varying levels of support.
HTML<style> 요소는 문서나 문서 일부에 대한 스타일 정보를 포함합니다.
시도해 보기
<style> p { color: #26b72b; } code { font-weight: bold; }</style><p> This text will be green. Inline styles take precedence over CSS included externally.</p><p> The <code>style</code> attribute can override it, though.</p>p { color: #f00;}<style> 요소는 문서의<head> 안에 위치해야 합니다. 그러나, 일반적으로 스타일은 외부 스타일 시트에 작성하고,<link> 요소로 연결하는 편이 좋습니다.
문서가 다수의<style>과<link> 요소를 포함하면 서로의 순서대로DOM에 스타일을 적용합니다. 따라서 예상치 못한 종속 문제를 피하려면 올바른 순서를 따라<style> 및<link> 요소를 배치해야 합니다.
<link> 요소와 동일하게,<style> 요소도 미디어 쿼리를 값으로 가지는media 특성을 포함할 수 있습니다. 이를 통해뷰포트 너비 등 매체 기능에 따라 선택적으로 스타일 시트를 적용할 수 있습니다.
특성
이 요소는전역 특성을 포함합니다.
type스타일 언어의 MIME 유형. 문자셋은 지정하지 않아야 합니다. 선택 사항이며, 기본값은
text/css입니다. 빈 문자열과text/css외의 값은 사용하지 않습니다.참고 :현대적인 웹 문서에서 이 특성을 포함할 이유는 거의 존재하지 않습니다.
media스타일을 적용할 매체. 값은미디어 쿼리이며, 누락할 경우 기본값은
all입니다.noncestyle-src Content-Security-Policy에서 인라인 스타일을 화이트리스트에 추가할 때 사용하는 논스(임시 값). 서버는 매번 정책을 전송할 때마다 새로운 고유 논스를 생성해야 합니다. 논스 값을 알고 있는 공격자라면 리소스 정책을 우회하는 것은 매우 간단한 일이므로, 사전에 유추할 수 없는 값을 생성하는 것이 중요합니다.title대체 스타일 시트 세트를 지정합니다.
사용 중단된 특성
scoped비표준지원이 중단되었습니다지정한 경우,
<style>요소의 부모 및 부모의 자식에만 스타일을 적용합니다.참고 :
scoped특성은https://github.com/w3c/csswg-drafts/issues/3547에 따라 나중에 다시 추가될 수도 있습니다. 지금 사용하고 싶은 경우폴리필을 추가하세요.
예제
간단한 스타일 시트
<!doctype html><html> <head> <style> p { color: red; } </style> </head> <body> <p>This is my paragraph.</p> </body></html>다수의<style> 요소
다음 예제는 두 개의<style> 요소를 사용합니다. 같은 명시도를 가진 경우, 뒤쪽<style>이 앞쪽을 덮어쓰는 것에 주목하세요.
<!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>미디어 쿼리 포함
이번 예제에서는 앞선 코드의 두 번째<style> 요소에media 특성을 추가하고,뷰포트의 너비가 500px 미만일 때에만 스타일을 적용하도록 지정합니다.
<!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. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다. |
| 가능한 부모 요소 | 메타데이터 콘텐츠를 허용하는 모든 요소 |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | HTMLStyleElement |
명세
| Specification |
|---|
| HTML # the-style-element |
브라우저 호환성
같이 보기
- 외부 스타일 시트를 사용하기 위한
<link>요소.