border-image-repeat: round 분석
HTML, CSS에서 border-image-repeat: round를 사용한 border-image를 사용하게 될 일이 종종 있는데 코드를 자세히 분석해 보겠습니다.
round는 stretch처럼 길이를 늘리는 게 아니라 설정해 놓은 영역을 반복하게 하는 속성입니다. 아래 결과 이미지를 보시면 아시겠지만 반복되는 스프링 노트 부분 같은 경우 이미지가 늘어나면 비율이 깨지는데 이런 식으로 round로 설정해 놓으면 그 부분을 계속 반복하게 됩니다.
1. 분석할 border-image css 코드
1 2 3 4 5 6 | .box_note1 { border: 25px solid #7f7f7f; border-image: url("../Images/start_ch.png") fill; border-image-repeat: round stretch; padding: 0em 2em 1em 0.5em; border-image-slice: 110 450 545 330; border-image-width: 30px 92px 90px 72px; } | cs |
2. 코드 해석
해당 CSS 코드는 .box_note1라는 클래스를 가진 HTML 요소의 스타일을 설정하는 코드입니다. 각 줄의 의미는 다음과 같습니다.
border: 25px solid #FF0000;: 요소의 테두리를 빨간색(#FF0000)으로 설정하고 테두리의 두께를 25픽셀로 설정한다는 의미입니다.
border-image: url("../Images/start_ch.png") fill 52/26px;: 테두리 이미지로 ../Images/start_ch.png 파일을 사용하도록 설정합니다. 사실 이 두께는 만약에 설정한 이미지가 구현이 안되었을 때 보여지는 거라 구현만 잘 된다면 중요하지는 않습니다. 여기서는 설명하기 위해 빨간색으로 했지만 티가 잘 안나는 색으로 해도 괜찮을 것 같습니다. fill 키워드는 테두리 이미지가 요소의 내부로 채워지도록 합니다.
border-image-repeat: round stretch;: 테두리 이미지의 반복 방식을 설정합니다. round는 테두리 이미지를 가능한 한 많이 반복하고 남은 공간이 있으면 이미지의 크기를 조절하여 채웁니다. stretch는 테두리 이미지를 늘려서 테두리를 채웁니다.
padding: 0em 2em 1em 0.5em;: 요소의 내부 여백을 설정합니다. 순서대로 위, 오른쪽, 아래, 왼쪽 여백을 설정합니다. 여기서 em은 현재 요소의 글꼴 크기의 상대적인 단위입니다.
border-image-slice: 110 450 545 330;: 테두리 이미지를 자르는 위치를 설정합니다. 순서대로 위, 오른쪽, 아래, 왼쪽을 나타냅니다.
border-image-width: 30px 92px 90px 72px;: 테두리 이미지의 너비를 설정합니다. 순서대로 위, 오른쪽, 아래, 왼쪽 테두리의 너비를 설정합니다.
이 CSS 코드를 통해 .box_note1 클래스를 가진 요소는 특정 이미지를 테두리로 사용하며, 그 이미지는 특정 방식으로 반복되고, 특정 위치에서 잘려서 사용됩니다. 그리고 요소의 내부 여백도 설정되어 있습니다.
결론
위의 코드로 구현된 결과는 위와 같습니다. 두 이미지의 차이는 반응형에 따라 폭이 좁을 때와 넓을 때를 비교한 것입니다.
border-image 코드를 사용하면 테두리로 둘러싸인 장식을 표현하기 쉽습니다. 한번 알아두면 별로 어렵지 않은 코드이니 도움이 되셨으면 좋겠습니다.
댓글
댓글 쓰기