css

CSS - 테두리 효과: 테두리에 배경 이미지 설정

2월 26, 2019
border-image 를 이용하면 테두리에 그라데이션이나 이미지를 입힐 수 있습니다. 다음 속성을 사용할 수 있습니다.

속 성 설 명
border-image-source 테두리에 사용할 이미지 URL
아래 속성 값이 없을 때 네모서리에 각 이미지를 배치
border-image-slice 이미지를 4개의 구역으로 나누어 각 모서리에 배치
숫자(px), 퍼센트로 길이를 지정. 음수는 허용불가.
100% 보다 큰 값이면 100% 로 잘림.
  • 한 개의 값이면: <상하좌우>에 배치
  • 두 개의 값이면: <상하> <좌우>에 배치
  • 세 개의 값이면: <상> <좌우> <하>에 배치
  • 네 개의 값이면: <상> <좌> <하> <우> 에 배치
  • file 키워드: 중간 이미지를 컨텐츠 영역에 표시
border-image-width 괘선의 크기를 지정
길이, 퍼센트로 지정. 음수는 허용불가
속성의 값이 border-width 보다 크면 안쪽 여백과 컨텐츠 영역을 침범하여 그려짐.
  • 한 개의 값이면: <상하좌우>에 너비를 지정
  • 두 개의 값이면: <상하> <좌우>에 너비를 지정
  • 세 개의 값이면: <상> <좌우> <하>에 너비를 지정
  • 네 개의 값이면: <상> <좌> <하> <우> 에 너비를 지정
border-image-outset 요소의 테두리로부터 지정한 거리만큼 떨어진 외각에 테두리를 그려냄.
이미지는 요소 바깥에 그려지며 스크롤이 생기지 않고, 이벤트로 잡아낼 수 없음.
  • 한 개의 값이면: <상하좌우>에 거리를 지정
  • 두 개의 값이면: <상하> <좌우>에 거리를 지정
  • 세 개의 값이면: <상> <좌우> <하>에 거리를 지정
  • 네 개의 값이면: <상> <좌> <하> <우> 에 거리를 지정
border-image-repeat 각 edge 부분에 이미지를 반복적으로 할지 늘릴지를 지정.
한 개의 값이면: <상하좌우>에 같은 방식을 적용
두 개의 값이면: <상하> <좌우>에 방식을 적용
  • stretch: 이미지의 모서리 영역을 테두리 길이만큼 늘리거나 줄여 간격을 맞춤. 기본값
  • repeat: 이미지의 모서리 영역을 테두리 영역에 반복해서 배치. 크기가 맞지 않으면 마지막 이미지는 잘릴 수 있음.
  • round: 이미지의 모서리 영역을 테두리 영역에 반복해서 간격을 채움. 크기가 맞지 않으면 늘어나거나 줄어들 수 있음.
  • space: 이미지의 모서리 영역을 테두리 영역에 반복해서 간격을 채움. 크기가 맞지 않으면 각 타일에 균등하게 공백을 배치
border-image 위 속성들을 한꺼번에 지정


테두리는 그림과 같이 모서리와 edge 로 구분하는데, 1 ~ 4 번이 모서리가 되고, 5 ~ 8 번이 edge 입니다. 마지막으로 9 번에는 fill 키워드로 중앙을 채울 수 있습니다.


border-image-slice 로 30px 만큼 자른다고 가정했을 때 4개의 모서리와 4개의 edge 이미지가 만들어 집니다. 이렇게 만들어진 이미지는 다음과 같이 테두리에 배치시킬 수 있습니다.


이미지 테두리를 지정하기 위해서는 border-width 값이 0 이상이어야 하고, border-image 는 border-style 대신 지정되는 값이므로 border-image 가 뒤에 지정되어야 합니다.

아래 예제들은 다음 이미지를 이용한 결과이며 이미지의 크기는 가로/세로 90px입니다.



border-image-source

테두리에 사용할 이미지를 지정하면 각 모서리에 이미지를 자동으로 배치합니다.

<style>
#borderimg01 {
  background: #efefef;
  border: 30px solid;
  border-image-source: url(border.png);
}
</style>

<div id="borderimg01" style="width:150px; height:150px">하보니 PHP</div>



border-image-slice

다음은 두 개의 값을 이용해 설정한 결과입니다. 상하는 40px, 좌우는 10px 만큼 각 모서리에 배치하며 테두리보다 작은 이미지이면 테두리에 맞추기 위해 늘리거나 줄입니다.

<style>
#borderimg02 {
  background: #efefef;
  border: 30px solid;
  border-image-source: url(border.png);

  border-image-slice: 40 10;
}
</style>

<div id="borderimg02" style="width:150px; height:150px">하보니 PHP</div>



border-image-width

원본 이미지의 크기가 재조정되어 각 네모서리에 배치합니다.

<style>
#borderimg04 {
  background: #efefef;
  border: 30px solid;
  border-image-source: url(border.png);

  border-image-width: 20px;
}
</style>

<div id="borderimg04" style="width:150px; height:150px">하보니 PHP</div>



border-image-outset

지정한 길이만큼 테두리로부터 떨어진 외각에 이미지를 배치하며 스크롤이나 이벤트로 잡아낼 수 없습니다.

<style>
#borderimg05 {
  background: #efefef;
  border: 30px solid;
  border-image-source: url(border.png);

  border-image-slice: 30;
  border-image-outset: 20px;
}
</style>

<div id="borderimg05" style="width:150px; height:150px">하보니 PHP</div>



border-image-repeat

원본 이미지를 30px 만큼 잘라서 edge 부분에 반복적으로 채웁니다.

<style>
#borderimg06 {
  background: #efefef;
  border: 30px solid;
  border-image-source: url(border.png);

  border-image-slice: 30;
  border-image-repeat: round;
}
</style>

<div id="borderimg06" style="width:150px; height:170px">하보니 PHP</div>


다음은 두 개의 값을 이용한 결과입니다. 첫 번째에는 <상하>값에 round 로 채우고, 두 번째 값에는 <좌우> 에 space 로 채웁니다.

<style>
#borderimg07 {
  background: #efefef;
  border: 30px solid;
  border-image-source: url(border.png);

  border-image-slice: 30;
  border-image-repeat: round space;
}
</style>

<div id="borderimg07" style="width:150px; height:170px">하보니 PHP</div>



border-image

다음은 위 속성을 한꺼번에 지정한 결과입니다.

<style>
#borderimg09 {
  background: #efefef;
  border: 30px solid;

  border-image: url(border.png) 30 round stretch;
}
</style>
<div id="borderimg09" style="width:150px; height:170px">하보니 PHP</div>





그라데이션 사용 예제


다음은 그라데이션을 이용한 결과입니다.

<style>
#borderimg08 {
  width: 10rem;
  background: #cef;
  border: 1.4rem solid;
  border-image: radial-gradient(#ff2, #55f) 40;
  border-image-outset: 1.5;
  margin: 2.1rem;
}
</style>
<div id="borderimg08" style="width:150px; height:170px">하보니 PHP</div>


<style>
#borderimg10 {
  border: 10px solid pink;
  border-image: repeating-linear-gradient(
   45deg, pink, pink 1%, purple 1%, purple 8%) 10;
}
</style>
<div id="borderimg10" style="width:150px; height:150px">하보니 PHP</div>





이미지 사용 예제

아래 이미지를 이용해 테두리에 반복적으로 이미지를 입힙니다.


<style>
#borderimg11 {
  background: #efefef;
  border: 30px solid;
  border-image-source: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7bgBmGSH6-Htr9wIpNGaiOnyO_4OibZPbmhYcRERg2NrmkW23Wrr3wglzI75bdVQqMWyf3G4fOlZpj1kTnHSHDags9MbkcA0QDQ2ySwW2b7_Z4yK1ihG-6UpNN82FTjX7uDqIYYE8jAM/s1600/border12.png);

  border-image-slice: 30;
  border-image-repeat: round;
}
</style>

<div id="borderimg11" style="width:150px; height:170px">하보니 PHP</div>


다음은 위 이미지를 이용해 가운데 컨텐츠 영역에 배경으로 채웁니다.

<style>
#borderimg12 {
  background: #efefef;
  border: 30px solid;
  border-image-source: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7bgBmGSH6-Htr9wIpNGaiOnyO_4OibZPbmhYcRERg2NrmkW23Wrr3wglzI75bdVQqMWyf3G4fOlZpj1kTnHSHDags9MbkcA0QDQ2ySwW2b7_Z4yK1ihG-6UpNN82FTjX7uDqIYYE8jAM/s1600/border12.png);

  border-image-slice: 30 fill;
  border-image-repeat: round;
}
#borderimg12 a {
  width: 100%;
  background: red;
  color:white;
}
</style>

<div id="borderimg12" style="width:150px; height:170px"><a>하보니 PHP</a></div>


Tag:

0 Comments

0 댓글