<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 style="color: blue">
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입니다. nonce-
style-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 |
브라우저 호환성
Loading…
같이 보기
- 외부 스타일 시트를 사용하기 위한
<link>요소.