1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
|
---
title: '<style>: 스타일 정보 요소'
slug: Web/HTML/Element/style
tags:
- CSS
- Element
- HTML
- HTML document metadata
- Reference
- Web
translation_of: Web/HTML/Element/style
---
<div>{{HTMLRef}}</div>
<p><strong>HTML <code><style></code> 요소</strong>는 문서나 문서 일부에 대한 스타일 정보를 포함합니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}</div>
<p><code><style></code> 요소는 문서의 {{htmlelement("head")}} 안에 위치해야 합니다. 그러나, 일반적으로 스타일은 외부 스타일 시트에 작성하고, {{htmlelement("link")}} 요소로 연결하는 편이 좋습니다.</p>
<p>문서가 다수의 <code><style></code>과 <code><link></code> 요소를 포함하면 서로의 순서대로 {{glossary("DOM")}}에 스타일을 적용합니다. 따라서 예상치 못한 종속 문제를 피하려면 올바른 순서를 따라 <code><style></code> 및 <code><link></code> 요소를 배치해야 합니다.</p>
<p><code><link></code> 요소와 동일하게, <code><style></code> 요소도 미디어 쿼리를 값으로 가지는 {{htmlattrxref("media", "style")}} 특성을 포함할 수 있습니다. 이를 통해 {{glossary("viewport", "뷰포트")}} 너비 등 매체 기능에 따라 선택적으로 스타일 시트를 적용할 수 있습니다.</p>
<h2 id="특성">특성</h2>
<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
<dl>
<dt>{{htmlattrdef("type")}}</dt>
<dd>스타일 언어의 MIME 유형. 문자셋은 지정하지 않아야 합니다. 선택 사항이며, 기본값은 <code>text/css</code>입니다. 빈 문자열과 <code>text/css</code> 외의 값은 사용하지 않습니다.
<div class="note"><strong>참고:</strong> 현대적인 웹 문서에서 이 특성을 포함할 이유는 거의 존재하지 않습니다.</div>
</dd>
<dt>{{htmlattrdef("media")}}</dt>
<dd>스타일을 적용할 매체. 값은 <a href="/ko/docs/Web/Guide/CSS/Media_queries">미디어 쿼리</a>이며, 누락할 경우 기본값은 <code>all</code>입니다.</dd>
<dt>{{htmlattrdef("nonce")}}</dt>
<dd><code><a href="/ko/docs/Web/HTTP/Headers/Content-Security-Policy/style-src">style-src Content-Security-Policy</a></code>에서 인라인 스타일을 화이트리스트에 추가할 때 사용하는 논스(임시 값). 서버는 매번 정책을 전송할 때마다 새로운 고유 논스를 생성해야 합니다. 논스 값을 알고 있는 공격자라면 리소스 정책을 우회하는 것은 매우 간단한 일이므로, 사전에 유추할 수 없는 값을 생성하는 것이 중요합니다.</dd>
<dt>{{htmlattrdef("title")}}</dt>
<dd><a href="/ko/docs/Web/CSS/Alternative_style_sheets">대체 스타일 시트</a> 세트를 지정합니다.</dd>
</dl>
<h3 id="사용_중단된_특성">사용 중단된 특성</h3>
<dl>
<dt>{{htmlattrdef("scoped")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
<dd>지정한 경우, <code><style></code> 요소의 부모 및 부모의 자식에만 스타일을 적용합니다.
<div class="note">
<p><strong>참고:</strong> <code>scoped</code> 특성은 <a href="https://github.com/w3c/csswg-drafts/issues/3547">https://github.com/w3c/csswg-drafts/issues/3547</a>에 따라 나중에 다시 추가될 수도 있습니다. 지금 사용하고 싶은 경우 <a href="https://github.com/samthor/scoped">폴리필</a>을 추가하세요.</p>
</div>
</dd>
</dl>
<h2 id="예제">예제</h2>
<h3 id="간단한_스타일_시트">간단한 스타일 시트</h3>
<pre class="brush:html"><!doctype html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html></pre>
<p>{{EmbedLiveSample('간단한_스타일_시트', '100%', '60')}}</p>
<h3 id="다수의_<style>_요소">다수의 <code><style></code> 요소</h3>
<p>다음 예제는 두 개의 <code><style></code> 요소를 사용합니다. 같은 명시도를 가진 경우, 뒤쪽 <code><style></code>이 앞쪽을 덮어쓰는 것에 주목하세요.</p>
<pre class="brush:html"><!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></pre>
<p>{{EmbedLiveSample('다수의_style_요소', '100%', '60')}}</p>
<h3 id="미디어_쿼리_포함">미디어 쿼리 포함</h3>
<p>이번 예제에서는 앞선 코드의 두 번째 <code><style></code> 요소에 <code>media</code> 특성을 추가하고, {{glossary("viewport", "뷰포트")}}의 너비가 500px 미만일 때에만 스타일을 적용하도록 지정합니다.</p>
<pre class="brush:html"><!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></pre>
<p>{{EmbedLiveSample('미디어_쿼리_포함', '100%', '60')}}</p>
<h2 id="기술_요약">기술 요약</h2>
<table class="properties">
<tbody>
<tr>
<th><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th>
<td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#메타데이터_콘텐츠">메타데이터 콘텐츠</a>. <code>scoped</code> 특성이 존재하면 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
</tr>
<tr>
<th>가능한 콘텐츠</th>
<td><code>type</code> 특성에 맞는 텍스트, 즉 <code>text/css</code>.</td>
</tr>
<tr>
<th>태그 생략</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th>가능한 부모 요소</th>
<td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#메타데이터_콘텐츠">메타데이터 콘텐츠</a>를 허용하는 모든 요소</td>
</tr>
<tr>
<th scope="row">가능한 ARIA 역할</th>
<td>없음</td>
</tr>
<tr>
<th>DOM 인터페이스</th>
<td>{{domxref("HTMLStyleElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="명세">명세</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">명세</th>
<th scope="col">상태</th>
<th scope="col">주석</th>
</tr>
<tr>
<td>{{ SpecName('HTML WHATWG', 'document-metadata.html#the-style-element', 'style') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td>{{ SpecName('HTML5 W3C') }} 에서 변화 없음.</td>
</tr>
<tr>
<td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td>
<td>{{ Spec2('HTML5 W3C') }}</td>
<td><code>scoped</code> 특성이 추가됨</td>
</tr>
<tr>
<td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td>
<td>{{ Spec2('HTML4.01') }}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.style")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>외부 스타일 시트를 사용하기 위한 {{HTMLElement("link")}} 요소.</li>
</ul>
|
