diff options
Diffstat (limited to 'files/ko/web/css/border-image/index.html')
| -rw-r--r-- | files/ko/web/css/border-image/index.html | 168 |
1 files changed, 168 insertions, 0 deletions
diff --git a/files/ko/web/css/border-image/index.html b/files/ko/web/css/border-image/index.html new file mode 100644 index 0000000000..e907da9062 --- /dev/null +++ b/files/ko/web/css/border-image/index.html @@ -0,0 +1,168 @@ +--- +title: border-image +slug: Web/CSS/border-image +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image +--- +<div>{{CSSRef}}</div> + +<p><strong><code>border-image</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소의 주위에 이미지를 그립니다. 일반 <a href="/ko/docs/Web/CSS/border">테두리</a>를 대체합니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/border-image.html")}}</div> + + + +<p><code>border-image</code>는 {{cssxref("border-image-source")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}}, {{cssxref("border-image-repeat")}}의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다. 다른 단축 속성과 마찬가지로, 생략한 속성은 <a href="/ko/docs/Web/CSS/initial_value">초기값</a>으로 설정됩니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 테두리 이미지를 불러오는데 실패할 경우에 대비해 {{cssxref("border-style")}} 속성을 설정해야 합니다. 사실 명세에 따르면 필수로 지정해야 하지만 모든 브라우저가 그렇게 구현하지는 않았습니다.</p> +</div> + +<h2 id="구문">구문</h2> + +<pre class="brush: css no-line-numbers">/* 이미지 | 슬라이스 */ +border-image: linear-gradient(red, blue) 27; + +/* 이미지 | 슬라이스 | 반복 */ +border-image: url("/images/border.png") 27 space; + +/* 이미지 | 슬라이스 | 너비 */ +border-image: linear-gradient(red, blue) 27 / 35px; + +/* 이미지 | 슬라이스 | 너비 | 거리 | 반복 */ +border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space; +</pre> + +<p><code>border-image</code> 속성은 아래 나열한 값 중 한 개에서 다섯 개 사이를 사용해 지정할 수 있습니다.</p> + +<div class="note"> +<p><strong>참고:</strong> 만약 {{cssxref("border-image-source")}}의 <a href="/ko/docs/Web/CSS/computed_value">계산값</a>이 <code>none</code>이거나 이미지를 그릴 수 없다면 {{cssxref("border-style")}}이 대신 보여집니다.</p> +</div> + +<h3 id="값">값</h3> + +<dl> + <dt><code><'border-image-source'></code></dt> + <dd>원본 이미지. {{cssxref("border-image-source")}}를 참고하세요.</dd> + <dt><code><'border-image-slice'></code></dt> + <dd>이미지를 구역별로 나눌 때 사용할 슬라이스 크기. 네 개 값까지 지정할 수 있습니다. {{cssxref("border-image-slice")}}를 참고하세요.</dd> + <dt><code><'border-image-width'></code></dt> + <dd>테두리 이미지 너비. 네 개 값까지 지정할 수 있습니다. {{cssxref("border-image-width")}}를 참고하세요.</dd> + <dt><code><'border-image-outset'></code></dt> + <dd>테두리 이미지와 요소 외곽의 거리. 네 개 값까지 지정할 수 있습니다. {{cssxref("border-image-outset")}}을 참고하세요.</dd> + <dt><code><'border-image-repeat'></code></dt> + <dd>원본 이미지의 모서리 구역을 테두리의 크기에 맞출 때의 조정 방법. 두 개 값까지 지정할 수 있습니다. {{cssxref("border-image-repeat")}}을 참고하세요.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<h3 id="비트맵">비트맵</h3> + +<p>이번 예제는 요소의 테두리에 마름모 패턴을 적용합니다. 테두리 이미지의 원본은 가로 81픽셀, 세로 81픽셀의 ".png" 파일로, 8개의 마름모가 사각형의 테두리를 이루고 있습니다.</p> + +<p><img alt="an example borderimage" src="https://mdn.mozillademos.org/files/4127/border.png" style="height: 81px; width: 81px;"></p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div id="bitmap">This element is surrounded by a bitmap-based border image!</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<p>마름모 하나의 크기에 맞추기 위해, 81을 3으로 나눈 <code>27</code>을 슬라이스 크기로 사용하여 원본 이미지를 모서리와 테두리 구역으로 나눕니다. 테두리 이미지의 중앙을 요소 테두리의 가운데로 맞추기 위해 거리도 각 너비의 절반으로 설정합니다. 마지막으로 반복 값에 <code>round</code>를 지정해 모서리가 끊기거나 잘리지 않도록 설정합니다.</p> + +<pre class="brush:css">#bitmap { + width: 200px; + background-color: #ffa; + border: 36px solid orange; + margin: 30px; + padding: 10px; + + border-image: + url("https://mdn.mozillademos.org/files/4127/border.png") /* 원본 이미지 */ + 27 / /* 슬라이스 */ + 36px 28px 18px 8px / /* 너비 */ + 18px 14px 9px 4px /* 거리 */ + round; /* 반복 */ +} +</pre> + +<h4 id="결과">결과</h4> + +<p>{{EmbedLiveSample('비트맵', '100%', 200)}}</p> + +<h3 id="그레이디언트">그레이디언트</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div id="gradient">그레이디언트 기반 테두리 이미지에 둘러 쌓인 요소에요!</div> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush:css">#gradient { + width: 200px; + border: 30px solid; + border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; + padding: 20px; +} +</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{EmbedLiveSample('그레이디언트')}}</p> + +<h2 id="접근성_고려사항">접근성 고려사항</h2> + +<p>보조 기술은 테두리 이미지를 읽을 수 없습니다. 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 설명하는 편이 좋습니다.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0</a></li> +</ul> + +<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', 'border-image')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.border-image")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("outline")}}</li> + <li>{{cssxref("box-shadow")}}</li> + <li>{{cssxref("background-image")}}</li> + <li>{{cssxref("url()")}} 함수</li> + <li>그레이디언트 함수: {{CSSxRef("conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li> +</ul> |