CSS의 border-image 속성은 처음 접하면 개념을 잡기가 다소 까다롭습니다. 이 글에서는 border-image 속성이 무엇인지, 어떻게 사용하는지, 그리고 브라우저마다 다르게 동작하는 특이 사항까지 차근차근 살펴보겠습니다.
먼저, border 속성 복습
CSS를 어느 정도 공부했다면 border 속성은 이미 익숙할 것입니다. 간단히 복습하자면, border는 요소 주위에 테두리를 지정하는 단축(shorthand) 속성으로 다음과 같은 구조를 가집니다.
border:
2px /* 너비(width) */
dashed /* 스타일(style) */
green; /* 색상(color) */border-image 속성의 구조
border와 마찬가지로 border-image 역시 단축 속성입니다. 하나의 소스 이미지를 사용해 요소 주위에 테두리를 만들어 주며, 구조는 다음과 같습니다.
border-image:
url("https://www.placekitten.com/501/700") /* 소스(source) */
25% / /* 슬라이스(slice) */
70px / /* 너비(width) */
2px /* 바깥 여백(outset) */
stretch; /* 반복(repeat) */border-image-source
border-image-source는 border-image 속성 중 'source' 부분에 해당하는 개별(longhand) 속성입니다. 상대 경로나 실제 이미지 URL을 담은 url() 값을 사용하거나, 그레이디언트(gradient)를 지정할 수도 있습니다.
border-image-slice
border-image-slice는 'slice' 부분에 해당하는 개별 속성으로, 이미지를 아홉 개의 영역으로 나눕니다.
기본적으로 가운데 영역은 제거되고, 나머지 여덟 조각이 요소를 둘러싸는 데 사용됩니다. 이 속성에는 최대 4개의 숫자(%)를 지정해 슬라이스 위치를 결정할 수 있으며, 가운데 영역까지 활용하고 싶다면 fill 키워드를 함께 사용하면 됩니다.
border-image-width
border-width 속성과 마찬가지로 border-image-width는 테두리 이미지의 두께를 지정합니다. 백분율 또는 rem/em/px 단위를 사용할 수 있으며, 최대 4개의 값을 지정해 각 변마다 서로 다른 너비를 적용할 수도 있습니다.
border-image-outset
border-image-outset은 이미지 테두리가 요소의 보더 박스(border box)에서 얼마나 떨어져 있을지 설정합니다. 참고로 보더 박스는 박스 모델(box model)의 일부로, 패딩(padding)과 마진(margin) 사이 영역을 의미합니다. 값이 클수록 테두리가 보더 박스에서 멀어집니다. 최대 4개의 값을 지정해 필요하다면 각 변에 개별적인 값을 줄 수 있습니다.
border-image-repeat
border-image-repeat는 각 변(edge)이 어떻게 처리될지 설정합니다. 여기서 edge란 이미지의 네 모서리(corner)를 제외한 각 변을 말합니다. 값은 최대 2개까지 지정할 수 있으며, 하나만 지정하면 모든 변에 적용되고, 두 개를 지정하면 첫 번째 값은 위·아래에, 두 번째 값은 왼쪽·오른쪽에 적용됩니다. 사용할 수 있는 값은 stretch, repeat, round, space입니다.
브라우저별 주의사항
Firefox와 Safari는 각각의 개별 속성만 따로 사용해서도 border-image를 만들 수 있는 대표적인 브라우저입니다. 반면 Chrome에서는 단축 속성만 사용할 수 있으며, border-style 속성(solid, dashed 등)과 함께 사용해야 합니다. Chrome에서 border-image가 제대로 표시되지 않는다면 이 부분을 꼭 확인해 보세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Border Image</title>
<style>
* {
box-sizing: border-box;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 500px;
height: 300px;
margin: 20px;
}
.border-image-box {
/* 아래 방식은 Firefox와 Safari에서만 작동 */
border-image-source: url(https://placekitten.com/900/1000);
border-image-slice: 25%;
border-image-width: 70px;
border-image-outset: 2px;
border-image-repeat: round;
padding: 80px;
/* 이 방식은 Chrome에서 작동하지 않음 */
}
.border-image-shorthand {
border-style: solid;
border-image:
url(https://placekitten.com/900/1000)
25% /
70px /
2px
round;
padding: 80px;
/* 위 방식은 모든 브라우저에서 작동합니다. Firefox와 Safari에서는 border-style 없이 border-image 속성만 사용할 수 있지만, Chrome에서는 이미지가 화면에 표시되려면 반드시 border-style 속성을 함께 사용해야 합니다 */
}
</style>
</head>
<body>
<div class="border-image-box flex">
이 상자는 개별 border-image 속성들을 사용해 스타일을 적용했습니다.
</div>
<div class="border-image-shorthand flex">
이 상자는 border-image 단축 속성을 사용해 스타일을 적용했습니다.
</div>
</body>
</html>
마무리
이 튜토리얼에서는 border-image 속성을 사용해 요소 주위에 CSS 이미지 테두리를 만드는 방법을 배웠습니다. border-image는 border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat 다섯 가지 하위 속성으로 이루어진 단축 속성입니다. 모든 브라우저에서 호환되도록 하려면 border-image 값을 지정하기 전에 먼저 border-style: solid를 설정해 주세요.