files/ko/web/css/outline/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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

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

<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>outline</code></strong> <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>은 모든 외곽선 속성을 한꺼번에 지정합니다.</p>

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

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>

<h2 id="구성_속성">구성 속성</h2>

<p><code>outline</code>은 단축 속성으로서 다음의 하위 속성을 포함합니다.</p>

<ul>
 <li>{{cssxref("outline-color")}}</li>
 <li>{{cssxref("outline-style")}}</li>
 <li>{{cssxref("outline-width")}}</li>
</ul>

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

<pre class="brush: css no-line-numbers notranslate">/* style */
outline: solid;

/* color | style */
outline: #f66 dashed;

/* style | width */
outline: inset thick;

/* color | style | width */
outline: green solid 3px;

/* 전역 값 */
outline: inherit;
outline: initial;
outline: unset;
</pre>

<p><code>outline</code> 속성은 아래의 값 중 한 개에서 세 개를 사용해 지정할 수 있으며 순서는 상관하지 않습니다.</p>

<div class="note">
<p><strong>참고:</strong> 많은 요소의 외곽선은 스타일을 지정하지 않을 경우 보이지 않습니다. 스타일 기본값이 <code>none</code>이기 때문인데, 주목할만한 예외는 {{htmlelement("input")}} 요소로 브라우저의 기본 스타일이 적용됩니다.</p>
</div>

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

<dl>
 <dt><code>&lt;'outline-color'&gt;</code></dt>
 <dd>외곽선의 색을 설정합니다. 누락 시 기본값은 <code>currentcolor</code>입니다. {{cssxref("outline-color")}}를 참고하세요.</dd>
 <dt><code>&lt;'outline-style'&gt;</code></dt>
 <dd>외곽선의 스타일을 설정합니다. 누락 시 기본값은 <code>none</code>입니다. {{cssxref("outline-style")}}을 참고하세요.</dd>
 <dt><code>&lt;'outline-width'&gt;</code></dt>
 <dd>외곽선의 두께를 설정합니다. 누락 시 기본값은 <code>medium</code>입니다. {{cssxref("outline-width")}}를 참고하세요.</dd>
</dl>

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

<p><a href="/ko/docs/Web/CSS/border">테두리</a>와 외곽선은 매우 유사하지만, 다음의 두 가지 차이점이 존재합니다.</p>

<ul>
 <li>외곽선은 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않습니다.</li>
 <li>명세에 따르면 외곽선은 직사각형일 필요가 없습니다. 보통 직사각형으로 그리기는 합니다.</li>
</ul>

<p>다른 모든 단축 속성과 마찬가지로, 누락한 하위 속성의 값은 <a href="/ko/docs/Web/CSS/initial_value">초깃값</a>으로 설정됩니다.</p>

<h2 id="접근성_고려사항">접근성 고려사항</h2>

<p><code>outline</code>에 <code>0</code> 또는 <code>none</code> 값을 지정하면 브라우저의 기본 포커스 스타일이 사라집니다. 만약 어떤 요소가 상호작용 가능하다면 반드시 시각으로 포커스 여부를 나타낼 수 있어야 합니다. 기본 포커스 스타일을 제거한 경우 다른 뚜렷한 대안을 제공하세요.</p>

<ul>
 <li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">How to Design Useful and Usable Focus Indicators</a></li>
 <li>
  <p><abbr>WCAG</abbr> 2.1: <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">Understanding Success Criterion 2.4.7: Focus Visible</a></p>
 </li>
</ul>

<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;a href="#"&gt;This link has a special focus style.&lt;/a&gt;
</pre>

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

<pre class="brush: css notranslate">a {
  border: 1px solid;
  border-radius: 3px;
  display: inline-block;
  margin: 10px;
  padding: 5px;
}

a:focus {
  outline: 4px dotted #e73;
  outline-offset: 4px;
  background: #ffa;
}
</pre>

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

<p>{{EmbedLiveSample("외곽선으로_포커스_스타일_설정", "100%", 60)}}</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', 'outline')}}</td>
   <td>{{Spec2('CSS3 Basic UI')}}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

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

<div>


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