css border-image 프로퍼티로 이미지 테두리 만들기

네 안녕하세요, 이번 포스팅에서는 테두리를 이미지로 한 번 만들어보는 시간을 가져보려 합니다.

우리가 흔히 보는 테두리가 그냥 선으로 이루어져 있는 것들도 있지만,

간혹 보면 테두리가 어떤 패턴 같은 걸로 이루어져 있는 것을 본 적이 있으실 겁니다.

그런 테두리들은 다 이미지 테두리를 적용을 한 사례입니다.

이러한 이미지 테두리는 테두리를 좀 더 다채롭게 보이게 하기 위해서 정말 많이 씁니다.

그럼 지금부터 함께 보시죠.

1. 이미지 테두리 프로퍼티 : border-image 사용

이미지 테두리를 적용시키기 위해서는 border-image라는 프로퍼티를 이용을 합니다.

이 프로퍼티를 구성하는 기본 형태는 이러합니다.

border-image : url("border.png") 30 round;

이렇게 씁니다.

여기에서 이미지를 테두리에 적용시키기 때문에 이미지 파일의 url은 무조건 들어가 줘야 하며,

그 뒤에 있는 숫자와 모사리는 각각 코너(corner)와 에지(edge)입니다.

css에서 코너는 꼭짓점이고, 에지는 변을 말합니다.

그리고 기입 순서는 코너 -> 에지 순으로 갑니다.

그리고 역시 border-image 프로퍼티는 기본적으로

우리가 테두리 스타일을 꾸밀 때 쓰는 기본 구성 프로퍼티에 추가가 되는 프로퍼티입니다.

그래서 그냥 저거 하나 쓴다고 하여 적용이 되고 그러지는 않습니다.

크기나 스타일 등을 추가적으로 지정을 해주지 않는다면 이상한 결과물이 나오기 때문입니다.

그리고 테두리에 이미지가 적용되는 순서는 이러합니다.

원본 이미지 준비하기
코너와 엣지 이미지 자르기
코너 이미지와 엣지 이미지 배치하기

이 순서로 진행이 되며, 지금부터 어떻게 진행이 되는지 자세히 알아보도록 하겠습니다.

1 - 1. 이미지 준비하기

제일 먼저 되어야 할 일이겠죠?
우리가 테두리에 입히고 싶은 이미지를 준비를 해줍니다.

이미지는 어떤 것을 준비를 해도 상관이 없습니다.

1 - 2. 코너와 엣지 이미지 자르기

이어서 코너 이미지와 엣지 이미지를 자르는데,

우리가 지정해 준 값만큼 잘라내어 테두리를 만들 준비를 합니다.

1 - 3. 코너 이미지와 에지 이미지 배치하기

이미지 자르기가 끝이 났으면 배치를 합니다.

배치는 우리가 지정한 값만큼 자른 이미지가 배치가 되는데,

배치를 할 때에 쓰는 속성이 있습니다.

round : 에지 이미지 반복 배치, 테두리 길이만큼 이미지 크기 자동 조정
repeat : round와 기본 기능은 똑같으나, 이미지 크기가 조정이 안됨
stretch : 에지 이미지를 테두리의 길이만큼 늘려서 배치

이러한 속성들이 있습니다.

그럼 이러한 기능들을 직접 사용하여 어떤 결과가 나오는지 한 번 알아보도록 하겠습니다.

아래에 제가 예제 코드를 한 번 작성을 해봤습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지 테두리 만들기</title>
    <style>
    p {
        background : yellow;
        width : 200px;
        height : 60px;
        padding : 10px;
        border : 20px solid lightgray; /*border-width와 border-style 동시 지정 */
    
    }
    #round { border-image : url("media/border.png") 30 round; }
    #repeat { border-image : url("media/border.png") 30 repeat; }
    #stretch { border-image : url("media/border.png") 30 stretch; }
    </style>
</head>
<body>
    <h3>이미지 테두리 만들기</h3>
    <hr>
    다음은 원본 이미지입니다.<br>
    <img src="media/border.png" alt="원본">
    <hr>
    <p>20x20 크기의 회색 테두리를 가진 P 태그</p>
    <p id="round">round 스타일 이미지 테두리</p>
    <p id="repeat">repeat 스타일 이미지 테두리</p>
    <p id="stretch">stretch 스타일 이미지 테두리</p>
</body>
</html>

이렇게 한 번 간단히 작성을 해봤습니다.

각각의 태그에 서로 다른 값을 지정을 하여 적용을 시켜봤습니다.

그럼 결과 화면을 같이 보시죠.

이렇게 결과가 나왔습니다.

round 속성이 적용이 된 곳은 테두리 길이에 맞게 적절한 비율로 조정이 되어 출력이 된 것을 보실 수 있고,

repeat 속성을 쓴 곳을 보시면 비율 조정이 되지 않아서 끝 부분을 보시면 그림이 잘렸습니다.

그리고 stretch 속성을 쓴 곳을 보시면

그림이 테두리의 시작과 끝 부분까지 늘어져서 출력이 되어있는 것을 보실 수가 있습니다.

이렇게 다양한 방식으로 표현이 가능합니다.

여기까지 css를 이용하여 이미지 테두리를 만드는 방법을 알아보았습니다.

다음 포스팅에서는 css를 이용하여 웹 페이지의 배경을 제어하는 방법에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다 ~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css background 단축 프로퍼티 이용하여 배경 제어하기 (0)	2023.04.02
css 배경 제어 프로퍼티로 배경 제어하기 (0)	2023.04.02
css border-radius 속성으로 각각의 테두리에 둥근 모서리 적용시키기 (0)	2023.03.19
css border-radius 속성으로 모든 모서리 둥글게 만들기 (0)	2023.03.19
css border 속성으로 테두리 한 번에 꾸미기 (0)	2023.03.19

개발러 L의 뻔fun한 코딩

css border-image 프로퍼티로 이미지 테두리 만들기