initial commit

1 files changed, 107 insertions, 0 deletions

diff --git a/files/ko/web/css/border-image-slice/index.html b/files/ko/web/css/border-image-slice/index.html
new file mode 100644
index 0000000000..7dfb26229b
--- /dev/null
+++ b/files/ko/web/css/border-image-slice/index.html
@@ -0,0 +1,107 @@
+---
+title: border-image-slice
+slug: Web/CSS/border-image-slice
+tags:
+  - CSS
+  - CSS Borders
+  - CSS Property
+  - Reference
+translation_of: Web/CSS/border-image-slice
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>border-image-slice</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 속성은 {{cssxref("border-image-source")}}로 설정한 이미지를 여러 개의 영역으로 나눕니다. 이렇게 나눠진 영역이 요소의 <a href="/ko/docs/Web/CSS/border-image">테두리 이미지</a>를 이룹니다.</p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}</div>
+
+
+
+<p>이미지는 네 개의 꼭지점, 네 개의 모서리, 한 개의 중앙 총 9개의 영역으로 나눠집니다. 상하좌우 각각의 모서리에서 주어진 거리만큼 떨어진 네 개의 분할선이 영역의 크기를 결정합니다.</p>
+
+<p><a href="/files/3814/border-image-slice.png"><img alt="The nine regions defined by the border-image or border-image-slice properties" src="/files/3814/border-image-slice.png" style="margin: 1px; padding: 1em; width: 460px;"></a></p>
+
+<p>위의 도표로 구역이 어떻게 나뉘는지 확인할 수 있습니다.</p>
+
+<ul>
+ <li>1-4번 구역은 <a id="corner_region" name="corner_region">꼭지점 영역</a>입니다. 코너 영역은 최종 테두리 이미지에서도 코너를 이루며 한 번씩만 그려집니다.</li>
+ <li>5-8번 구역은 <a id="edge_region" name="edge_region">모서리 영역</a>입니다. 모서리 영역은 최종 테두리 이미지의 크기에 맞도록 <a href="/ko/docs/Web/CSS/border-image-repeat">반복하여 그리거나 크기를 조정하는 등 변형</a>됩니다.</li>
+ <li>9번 구역은 <a id="middle_region" name="middle_region">중앙 영역</a>입니다. 기본값으로는 쓰이지 않지만, <code>fill</code> 키워드를 지정한 경우 배경 이미지처럼 사용합니다.</li>
+</ul>
+
+<p>{{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} 속성이 최종 테두리 이미지에서 각 영역의 사용 방법을 지정합니다.</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css no-line-numbers">/* 모든 방향 */
+border-image-slice: 30%;
+
+/* 세로방향 | 가로방향 */
+border-image-slice: 10% 30%;
+
+/* 위 | 가로방향 | 아래 */
+border-image-slice: 30 30% 45;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+border-image-slice: 7 12 14 5;
+
+/* `fill` 키워드 */
+border-image-slice: 10% fill 7 12;
+
+/* 전역 값 */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+</pre>
+
+<p><code>border-image-slice</code> 속성은 한 개에서 네 개의 <code>&lt;number&gt;</code> 또는 <code>&lt;percentage&gt;</code> 값을 사용해 지정할 수 있습니다. 각각의 숫자는 네 방향 분할선의 위치를 나타냅니다. 음수 값은 유효하지 않고, 최대 크기보다 큰 값은 <code>100%</code>로 잘립니다.</p>
+
+<ul>
+ <li><strong>한 개의 값</strong>을 지정하면, 모든 분할선의 위치가 각각의 기준 모서리에서 동일한 거리만큼 떨어진 곳으로 설정됩니다.</li>
+ <li><strong>두 개의 값</strong>을 지정하면, 첫 번째 값은 <strong>위와 아래</strong> 분할선, 두 번째 값은 <strong>왼쪽과 오른쪽</strong> 분할선의 위치를 설정합니다.</li>
+ <li><strong>세 개의 값</strong>을 지정하면, 첫 번째 값은 <strong>위</strong>, 두 번째 값은 <strong>왼쪽과 오른쪽</strong>, 세 번째 값은 <strong>아래</strong> 분할선의 위치를 설정합니다.</li>
+ <li><strong>네 개의 값</strong>을 지정하면 각각 <strong>상, 우, 하, 좌</strong> 분할선의 거리를 순서대로 지정합니다. (시계방향)</li>
+</ul>
+
+<p>선택적으로 아무데나 <code>fill</code> 키워드를 추가할 수 있습니다.</p>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt>{{cssxref("&lt;number&gt;")}}</dt>
+ <dd>모서리에서 분할선까지의 픽셀 거리(래스터 이미지), 또는 좌표 거리(벡터 이미지). 벡터 이미지에서 숫자는 원본 이미지가 아닌 요소의 크기에 상대적이므로 보통 백분율을 선호합니다.</dd>
+ <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
+ <dd>모서리에서 분할선까지의 백분율 거리. 가로축은 원본 이미지의 너비에, 세로축은 이미지의 높이에 상대적입니다.</dd>
+ <dt><code>fill</code></dt>
+ <dd>중앙 영역을 보존하여 배경 이미지처럼 사용. 실제 {{cssxref("background")}} 속성보다 위에 그려집니다. 중앙 영역 이미지는 위와 왼쪽 모서리 영역의 크기에 맞도록 늘어납니다.</dd>
+</dl>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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 Backgrounds', '#the-border-image-slice', 'border-image-slice')}}</td>
+   <td>{{Spec2('CSS3 Backgrounds')}}</td>
+   <td>Initial defintion</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+
+
+<p>{{Compat("css.properties.border-image-slice")}}</p>