CSS border-image-repeat 속성이란?
CSS의 border-image-repeat 속성은 요소 테두리에 적용한 이미지가 어떤 방식으로 배치될지를 결정합니다. 이 속성을 사용하면 테두리 이미지를 둥글게(round), 반복해서(repeat), 또는 늘려서(stretch) 표현할 수 있어 다양한 디자인 효과를 구현할 수 있습니다.
주요 속성값
- stretch (기본값): 테두리 영역을 꽉 채우도록 이미지를 늘려 표시합니다.
- repeat: 이미지를 타일처럼 반복 배치하며, 공간이 부족하면 일부가 잘릴 수 있습니다.
- round: 이미지를 반복하되, 조각이 잘리지 않도록 크기를 자동으로 조절합니다.
- space: 이미지를 반복하되, 각 조각 사이에 균등한 여백을 두고 배치합니다.
예제 코드
아래 코드는 border-image-repeat 속성에 round 값을 적용해 테두리 이미지를 매끄럽게 반복 처리하는 예제입니다. 직접 실행해 보면서 결과를 확인해 보세요.
<html>
<head>
<style>
#borderimg1 {
border: 15px solid transparent;
padding: 15px;
border-image-source: url(https://tutorialspoint.com/css/images/border.png);
border-image-repeat: round;
border-image-slice: 40;
border-image-width: 20px;
}
</style>
</head>
<body>
<p id = "borderimg1">테두리 이미지 예제입니다.</p>
</body>
</html>
코드 설명
- border: 15px solid transparent; — 투명한 기본 테두리를 만들어 이미지 테두리가 들어갈 공간을 확보합니다.
- border-image-source — 테두리로 사용할 이미지 파일의 경로를 지정합니다.
- border-image-slice: 40; — 이미지를 40px 단위로 잘라 테두리 조각을 생성합니다.
- border-image-width: 20px; — 테두리 이미지의 실제 표시 너비를 설정합니다.
- border-image-repeat: round; — 테두리 조각이 잘리지 않도록 크기를 조절하며 반복 배치합니다.
round 대신 repeat나 stretch 값을 넣어 결과가 어떻게 달라지는지 비교해 보면, 각 값의 차이를 더욱 명확하게 이해할 수 있습니다.