files/ko/web/css/outline-width/index.html


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

---
title: outline-width
slug: Web/CSS/outline-width
tags:
  - CSS
  - CSS Outline
  - CSS Property
  - Layout
  - Reference
  - 'recipe:css-property'
translation_of: Web/CSS/outline-width
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>outline-width</code></strong> 속성은 요소 외곽선의 두께를 설정합니다.</span> 외곽선은 요소의 <a href="/ko/docs/Web/CSS/border">테두리</a> 바깥에 그려지는 선입니다.</p>

<div>{{EmbedInteractiveExample("pages/css/outline-width.html")}}</div>


<p>외곽선 외형을 설정할 땐 {{cssxref("outline")}} 단축 속성을 사용하는게 편리한 상황이 많습니다.</p>

<h2 id="구문">구문</h2>

<pre class="brush:css no-line-numbers notranslate">/* 키워드 값 */
outline-width: thin;
outline-width: medium;
outline-width: thick;

/* &lt;length&gt; 값 */
outline-width: 1px;
outline-width: 0.1em;

/* 전역 값 */
outline-width: inherit;
</pre>

<p><code>outline-width</code> 속성은 다음 값 중 하나를 사용해 지정합니다.</p>

<h3 id="값">값</h3>

<dl>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>외곽선의 두께를 <code>&lt;length&gt;</code>로 설정합니다.</dd>
 <dt><code>thin</code></dt>
 <dd>사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 <code>1px</code>입니다.</dd>
 <dt><code>medium</code></dt>
 <dd>사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 <code>3px</code>입니다.</dd>
 <dt><code>thick</code></dt>
 <dd>사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 <code>5px</code>입니다.</dd>
</dl>

<h2 id="형식_정의">형식 정의</h2>

<p>{{cssinfo}}</p>

<h2 id="형식_구문">형식 구문</h2>

{{csssyntax}}

<h2 id="예제">예제</h2>

<h3 id="요소의_외곽선_두께_설정하기">요소의 외곽선 두께 설정하기</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;span id="thin"&gt;thin&lt;/span&gt;
&lt;span id="medium"&gt;medium&lt;/span&gt;
&lt;span id="thick"&gt;thick&lt;/span&gt;
&lt;span id="twopixels"&gt;2px&lt;/span&gt;
&lt;span id="oneex"&gt;1ex&lt;/span&gt;
&lt;span id="em"&gt;1.2em&lt;/span&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}

</pre>

<h4 id="결과">결과</h4>

<p>{{EmbedLiveSample('요소의_외곽선_두께_설정하기', '100%', '80')}}</p>

<h2 id="명세">명세</h2>

<table class="standard-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 Basic UI', '#outline-width', 'outline-width')}}</td>
   <td>{{Spec2('CSS3 Basic UI')}}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>


<p>{{Compat("css.properties.outline-width")}}</p>