테두리 이미지

Internet Explorer 11에서는 CSS 배경 및 테두리 모듈 수준 3 W3C 사양의 border-image 속성으로 사용자 지정 테두리 이미지를 정의할 수 있습니다. border-image 속성을 사용하면 기존의 테두리 스타일에 대한 대안으로서 고유한 테두리용 이미지를 지정할 수 있습니다.

border-image 속성

border-image 속성은 특정 이미지가 테두리 스타일 대신 사용되는 방법을 지정하는 단축형 속성입니다. border-image 단축형은 5가지 별도의 속성으로 구성됩니다. 개별 속성을 사용하여 CSS 테두리 이미지의 각 구성 요소를 지정할 수 있습니다. 그러나 대부분의 경우 이 단축형 속성을 사용하여 모든 속성을 한 곳에서 설정하는 것이 더 편리할 수 있습니다. border-image 속성의 구문은 다음과 같습니다.

border-image: <border-image-source> || <border-image-slice> [ / <border-image-width> | / <border-image-width> ? /<border-image-outset> ] ? || <border-image-repeat>

속성설명

border-image-source

테두리에 사용할 이미지의 위치를 지정합니다.

border-image-slice

이 속성은 네 개의 안쪽 오프셋을 사용하여 지정된 테두리 이미지를 3 x 3 그리드(모서리 4개, 가장자리 4개 및 중심 1개)로 슬라이싱합니다.

border-image-width

테두리 이미지 영역의 가장자리를 기준으로 안쪽 오프셋을 정의하여 테두리 이미지의 너비/높이를 지정합니다.

border-image-outset

테두리 이미지가 테두리 상자를 넘어 확장되는 양을 지정합니다.

border-image-repeat

테두리 이미지의 면 크기를 조정할지, 면을 바둑판식으로 배열할지 지정합니다.

 

이미지 정의, 슬라이싱 및 반복

border-image를 사용하는 경우 먼저 테두리 스타일 값을 지정해야 합니다. 아래에는 단색 검정, 15 픽셀 너비의 테두리를 사용하는 div 요소가 있습니다. 검은 부분은 테두리 상자 또는 테두리 영역입니다. 여기서 테두리 이미지가 기본적으로 제한됩니다. border-image-widthborder-image-outset의 값을 지정하여 조정할 수 있습니다.

검정 테두리가 있는 HTML 요소

아래 그림(투명 배경 사용)은 다음 예제에서 테두리 이미지에 사용되는 81 x 81 픽셀 이미지입니다.

녹색 및 파랑 원이 있는 이미지

border-image 속성으로 요소의 스타일을 지정하고 나면 원래 테두리 스타일이 재정의되고 슬라이싱된 테두리 이미지가 테두리 상자로 채워집니다. 아래의 스타일은 HTML 요소에 대한 테두리 이미지 스타일을 정의하는 데 사용되며 다음 이미지와 같습니다.


#box { 
   border: solid 15px;
   border-image: url("border.png") 27 27 round stretch;
}

border-image 속성을 사용하여 테두리의 스타일이 지정된 HTML 요소

위의 CSS에서 이미지 원본 뒤에 오는 숫자는 이미지(border-image-slice)의 슬라이싱 거리를 정의합니다. 슬라이싱 거리는 이미지의 위쪽, 오른쪽, 아래쪽 및 왼쪽을 기준으로 27 픽셀로 설정되었습니다. 아래 그림에서 슬라이싱 거리는 빨강으로 표시되어 있습니다.

27 픽셀의 슬라이싱 거리를 보여 주는 이미지

"Round" 및 "stretch"는 테두리(border-image-repeat) 사이의 영역을 이미지가 채우는 방식을 나타냅니다. 첫 번째 값, round는 가로 슬라이드에 적용됩니다. 테두리 가장자리 사이의 영역이 채워질 때까지 이미지는 바둑판식으로 배열되거나 반복 배열됩니다. 영역을 정수인 타일로 채울 수 없는 경우 정수인 타일로 해당 영역을 채울 수 있도록 이미지 크기가 조정됩니다. 첫 번째 값, stretch는 세로 슬라이드에 적용됩니다. 여기서 이미지는 테두리 가장자리 사이의 영역을 채우기 위해 확대됩니다. 기본값은 Stretch입니다.

아래 예제에서는 다시 단축형 border-image 속성을 사용하여 위의 예제와 동일한 이미지를 조작하여 테두리 모양을 매우 다르게 만듭니다.

border-image 속성을 사용하여 테두리의 스타일이 지정된 HTML 요소


#box {
   border: solid 15px;
   border-image: url("border.png") 20 15 round; 
}


이 예제에서 슬라이싱 거리는 이미지의 위쪽과 아래쪽에서는 20 픽셀로, 이미지의 오른쪽과 왼쪽에서는 15 픽셀로 설정되었습니다. 이 예제에서는 기본값 border-image-repeat 대신 round를 사용합니다.

너비 및 바깥쪽 값 지정

또한 border-image-width 속성을 사용하여 테두리 이미지 영역의 가장자리를 기준으로 안쪽 오프셋을 정의하여 테두리 이미지의 너비 및 높이를 지정할 수 있습니다. Border-image-width의 기본값은 1입니다. 이는 border-image-width가 계산된 border-width 값 또는 테두리 상자 너비의 1의 배수라는 의미입니다. 위의 예제에는 border-image-width가 1이고 테두리 이미지의 너비가 15px(1 x 15px의 border-width 값)인 div 요소가 나와 있습니다. 위와 동일한 CSS를 사용하여 border-image-width를 20px로 설정하면 이미지가 아래와 같이 표시됩니다. 이 예제에서는 테두리 이미지 영역의 가장자리를 기준으로 20px의 안쪽 오프셋을 정의합니다.

border-image-width가 지정된 div 요소

위의 div 요소에 대한 CSS는 다음과 같습니다.


#box {
   border: solid 15px;
   border-image: url("border.png") 20 15 /20px round;
}

border-image-outset 속성을 사용하여 테두리 이미지 영역이 테두리 상자를 넘어 확장되는 양을 지정하여 이미지를 추가로 조작할 수 있습니다. 위쪽, 오른쪽, 아래쪽, 왼쪽을 기준으로 각각 border-image-outset 값을 0px, 30px, 30px, 10px로 설정하면 다음과 같은 이미지가 표시됩니다.

border-image-outset 값이 설정된 div

위의 div 요소에 대한 CSS는 다음과 같습니다.


#box {
   border: solid 15px;
   border-image: url("border.png") 20 15 /20px /0px 30px 30px 0px round;
}

API 참조

borderImage

사양

CSS 배경 및 테두리 모듈 수준 3, 섹션 6

 

 

표시:
© 2014 Microsoft