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
159
160
161
162
163
164
165
166
167
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>
|
