글상자를 만드는 방법은 여러가지가 있다. 선 (line)을 이용할 수도 있고 padding 을 이용한 공간을 박스로 이용할 수도 있다.

여기서는 이미지를 배경으로 글상자를 만들어 보려고 한다.

그럼 글상자를 만들어 보자

border-image 자체만으로는 크롬외에는 작동하지 않는다. 사파리나 파폭에서 제대로 보려면 -webkit- 을 추가로 사용해야 한다.


이미지 글상자 만들기

이미지 글상자 만들기는 border-image 를 활용하는 것이다. 테두리가 있는 PNG 나 SVG 이미지를 이용해 테두리를 다양하게 만들 수 있다.


비공개 전환

이 블로그 내에 공개된 내용 외에 사용된 보이지 않는것들을 소스 보기를 통해 볼 수 있다고 해서 마음대로 가져가도 된다는 의미가 아니다.

.


box200.svg