initial commit

1 files changed, 158 insertions, 0 deletions

diff --git a/files/ko/web/css/outline/index.html b/files/ko/web/css/outline/index.html
new file mode 100644
index 0000000000..4b578c289b
--- /dev/null
+++ b/files/ko/web/css/outline/index.html
@@ -0,0 +1,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>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<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>