diff options
Diffstat (limited to 'files/ko/web/css/text-shadow/index.html')
| -rw-r--r-- | files/ko/web/css/text-shadow/index.html | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/files/ko/web/css/text-shadow/index.html b/files/ko/web/css/text-shadow/index.html new file mode 100644 index 0000000000..17c04da65c --- /dev/null +++ b/files/ko/web/css/text-shadow/index.html @@ -0,0 +1,126 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +tags: + - CSS + - Reference +translation_of: Web/CSS/text-shadow +--- +<div>{{CSSRef}}</div> + +<p><code><strong>text-shadow</strong></code> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 텍스트에 그림자(shadow)를 추가합니다. 텍스트와 그 장식에 적용 할 쉼표로 구분 된 그림자 목록을 허용합니다. 각 그림자는 요소, 흐림 반경 및 색상의 X 및 Y 오프셋 조합으로 설명됩니다.</p> + +<p>{{EmbedInteractiveExample("pages/css/text-shadow.html")}}</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre><code>/* offset-x | offset-y | blur-radius | color */ +text-shadow: 1px 1px 2px black; + +/* color | offset-x | offset-y | blur-radius */ +text-shadow: #fc0 1px 0 10px; + +/* offset-x | offset-y | color */ +text-shadow: 5px 5px #558abb; + +/* color | offset-x | offset-y */ +text-shadow: white 2px 5px; + +/* offset-x | offset-y +/* Use defaults for color and blur-radius */ +text-shadow: 5px 10px; + +/* Global values */ +text-shadow: inherit; +text-shadow: initial; +text-shadow: unset;</code></pre> + +<p>This property is specified as a comma-separated list of shadows.</p> + +<p>Each shadow is specified as two or three <code><length></code> values, followed optionally by a <code><color></code> value. The first two <code><length></code> values are the <code><offset-x></code> and <code><offset-y></code> values. The third, optional, <code><length></code> value is the <code><blur-radius></code>. The<code><color></code> value is the shadow's color.</p> + +<p>When more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.</p> + +<p>This property applies to both {{cssxref("::first-line")}} and {{cssxref("::first-letter")}} <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>.</p> + +<h3 id="Values" name="Values">값</h3> + +<dl> + <dt>{{cssxref("<color>")}}</dt> + <dd>선택값(생략가능). 위치값(offset)이전/이후에 설정이 가능하다. 색상(color)값이 설정되지 않으면, 브라우저 기본값(UA-chosen color)이 사용된다. {{ note("만약 다양한 브라우저에서 동일하게 표현하고 싶다면, 특정 색상(color)을 지정할 것.") }}</dd> + <dt><code><offset-x> <offset-y></code></dt> + <dd>Required. These {{cssxref("<length>")}} values specify the shadow's distance from the text. <code><offset-x></code> specifies the horizontal distance; a negative value places the shadow to the left of the text. <code><offset-y></code> specifies the vertical distance; a negative value places the shadow above the text. If both values are <code>0</code>, the shadow is placed directly behind the text, although it may be partly visible due to the effect of <code><blur-radius></code>.</dd> + <dt><code><blur-radius></code></dt> + <dd>Optional. This is a {{cssxref("<length>")}} value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to <code>0</code>.</dd> + <dt> + <h3 id="Formal_syntax">Formal syntax</h3> + + <pre>{{csssyntax}} +</pre> + + <h2 id="Examples">Examples</h2> + + <h3 id="Simple_shadow">Simple shadow</h3> + + <pre><code>.red-text-shadow { + text-shadow: red 0 -2px; +}</code></pre> + + <pre><code><p class="red-text-shadow">Sed ut perspiciatis unde omnis iste + natus error sit voluptatem accusantium doloremque laudantium, + totam rem aperiam, eaque ipsa quae ab illo inventore.</p></code></pre> + + <p>{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}</p> + + <h3 id="Multiple_shadows">Multiple shadows</h3> + + <pre><code>.white-text-with-blue-shadow { + text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; + color: white; + font: 1.5em Georgia, serif; +}</code></pre> + + <pre><code><p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste + natus error sit voluptatem accusantium doloremque laudantium, + totam rem aperiam, eaque ipsa quae ab illo inventore.</p></code></pre> + + <p>{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}</p> + + <h2 id="Specifications">Specifications</h2> + + <table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Specifies <code>text-shadow</code> as animatable.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td>The CSS property <code>text-shadow</code> was <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props">improperly defined in CSS2</a> and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec refined the syntax. Later it was moved to <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Module Level 3</a>.</td> + </tr> + </tbody> + </table> + + <p id="Syntax">{{cssinfo}}</p> + + <h2 id="Browser_compatibility">Browser compatibility</h2> + + <p>The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + + <p>{{Compat("css.properties.text-shadow")}}</p> + + <h3 id="Quantum_CSS_notes">Quantum CSS notes</h3> + Gecko has a bug whereby {{cssxref("transition")}}s will not work when transitioning from a <code>text-shadow</code> with a color specified to a <code>text-shadow</code> without a color specified ({{bug(726550)}}). This has been fixed in Firefox's new parallel CSS engine (also known as <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> or <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planned for release in Firefox 57). + + <h2 id="See_also">See also</h2> + <a href="https://cssgenerator.org/text-shadow-css-generator.html">Text Shadow CSS Generator</a> - An interactive text shadow CSS generator. {{cssxref("box-shadow")}} The {{cssxref("<color>")}} data type (for specifying the shadow color) <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></dt> +</dl> |