From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/border-image-slice/index.html | 107 +++++++++++++++++++++++++ 1 file changed, 107 insertions(+) create mode 100644 files/ko/web/css/border-image-slice/index.html (limited to 'files/ko/web/css/border-image-slice') 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 +--- +
{{CSSRef}}
+ +

border-image-slice CSS 속성은 {{cssxref("border-image-source")}}로 설정한 이미지를 여러 개의 영역으로 나눕니다. 이렇게 나눠진 영역이 요소의 테두리 이미지를 이룹니다.

+ +
{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}
+ + + +

이미지는 네 개의 꼭지점, 네 개의 모서리, 한 개의 중앙 총 9개의 영역으로 나눠집니다. 상하좌우 각각의 모서리에서 주어진 거리만큼 떨어진 네 개의 분할선이 영역의 크기를 결정합니다.

+ +

The nine regions defined by the border-image or border-image-slice properties

+ +

위의 도표로 구역이 어떻게 나뉘는지 확인할 수 있습니다.

+ + + +

{{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} 속성이 최종 테두리 이미지에서 각 영역의 사용 방법을 지정합니다.

+ +

구문

+ +
/* 모든 방향 */
+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;
+
+ +

border-image-slice 속성은 한 개에서 네 개의 <number> 또는 <percentage> 값을 사용해 지정할 수 있습니다. 각각의 숫자는 네 방향 분할선의 위치를 나타냅니다. 음수 값은 유효하지 않고, 최대 크기보다 큰 값은 100%로 잘립니다.

+ + + +

선택적으로 아무데나 fill 키워드를 추가할 수 있습니다.

+ +

값

+ +
+
{{cssxref("<number>")}}
+
모서리에서 분할선까지의 픽셀 거리(래스터 이미지), 또는 좌표 거리(벡터 이미지). 벡터 이미지에서 숫자는 원본 이미지가 아닌 요소의 크기에 상대적이므로 보통 백분율을 선호합니다.
+
{{cssxref("<percentage>")}}
+
모서리에서 분할선까지의 백분율 거리. 가로축은 원본 이미지의 너비에, 세로축은 이미지의 높이에 상대적입니다.
+
fill
+
중앙 영역을 보존하여 배경 이미지처럼 사용. 실제 {{cssxref("background")}} 속성보다 위에 그려집니다. 중앙 영역 이미지는 위와 왼쪽 모서리 영역의 크기에 맞도록 늘어납니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}Initial defintion
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-image-slice")}}

-- cgit v1.2.3-54-g00ecf