Border CSS 테두리 속성 반복 적용하는 방법

Border CSS 테두리 속성 반복 적용하는 방법

똑같은 텍스쳐를 border값에 부여하고 싶다면 어떻게 하면 될까, 배경이 아닌 두꺼운 선에 적용하면서 작은 이미지 텍스쳐가 반복해서 나오길 바란다면 border-image-repeat 태그를 적용하면 된다.

자세한 사용방법은 이곳에서 확인할 수 있다. 가장 간단한 사용방법으로는 정사각형을 기준으로 할 때, 모든 타일을 일정한 간격으로 채우는 속성 값은 아래와 같다.

• 어떤 텍스쳐를 어떻게 적용하느냐에 따라 테두리의 느낌이 달라진다.

border-image-repeat: round;

하지만, border의 가로와 세로값이 다를 경우에는 별도의 숫자를 지정해줘서 각각 가로와 세로에 적용될 타일의 개수를 지정해줘야 한다. 이 경우에는 round [n, n] 값으로 속성을 지정할 수 있다.

만약 텍스쳐를 외부 이미지 소스로 불러와서 적용할 경우에는 border: url( ) n n repeat과 같은 형식으로 채울 수도 있다. 어떻게 활용하느냐에 따라서 다르겠지만, 일종의 정사각형 모양의 텍스쳐를 border 값에 적용한다고 했을 때의 예시는 아래와 같다.

border-image:url(image-source.jpg) 30 30 repeat;

이때, 30과 30에 대응하는 것은 각각 가로와 세로에 대한 타일의 갯수값이다. 각 대응하는 값에 따라서 이미지가 늘어나거나, 딱 맞거나, 줄어들거나 하기 때문에 조금씩 조절해가면서 적절한 타일의 개수를 찾아가는 것이 좋다. 이 방법은 해당 블록을 둘러싸고 있는 선 요소를 예쁘게 꾸미거나 어떠한 이미지를 적용하고 싶을 때 사용하면 좋다. (액자 효과 등)