* html이나 css를 이제 막 더듬더듬 시작하신 분들이 이 글을 읽는다고 생각하고 적습니다.
사실 박스에 테두리를 넣는 방법은 많습니다. 딱 한군데에서만 쓸 디자인이라면 wix 꾸미듯 이미지파일을 통채로 집어넣어도 별 문제는 없죠. 여러군데서 쓰는 디자인이더라도.. 안될 건 없습니다만..
아무튼 그렇게 박스를 이미지로 10개정도 집어넣다보면,
"아.. 뭔가 더 좋은 방법이 분명 있을 것 같은데 내가 무식해서 뻘 짓을 하는게 아닐까? " 라는 생각이 들기 마련입니다. 그리고 그 생각은 반쯤 정답이죠..
사실 여기서 조금 더 진취적인 분이라면 구글에 '박스에 테두리 넣는 법', 'css box border' 등을 검색 해 보셨을 거고 안해보셨다면 해보시는 걸 추천합니다. 저보다 더 잘 써놓은 글이 많거든요.
0. border-image
박스에 테두리를 넣을 때 아주 유용한 css 속성은 border-image가 있습니다.
http://salmons.dothome.co.kr/system.php
세계관 | 카벨라세드
스킬 :: 종류 스킬은 크게 회복, 공격, 도발, 브레이크, 지속으로 나뉩니다. 회복 · 공격 · 지속 파티원을 회복시키거나 적에게 큰 피해를 주는 스킬, 지속적으로 데미지를 입히는 스킬들입니다. ▶ 회복 스킬 일부의 경우 대상을 지정해서 사용해야 합니다. 대상을 지정하지 않을 경우 스킬이 발동되지 않습니다. 도발 적을 도발하여 해당 턴의 피해 대상을 자신으로 고정시킵니다. ▶ 회피가 발동하지 않으며, 광역 공격의 경우 도발의 영향을 받지 않습니다. 브레
salmons.dothome.co.kr
위 사이트에 접속하면 보이는 아래와 같은 박스를 만드는데 사용되는 속성입니다.
위 박스는 대충
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.box_inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
padding: 100px 50px;
box-sizing: border-box;
border: 30px solid transparent;
border-image: URL(../img/world/border_1.png) 30;
box-shadow: 0px 0px 40px 0px rgba(255,255,255,0.5);
font-size: 14px;
color: #fff;
font-weight: 500;
}
|
cs |
이런 CSS로 이루어져 있습니다.
여기서 테두리를 그려주는 속성은
|
1
2
3
4
|
.box_inner {
border: 30px solid transparent; /* (테두리크기px) (테두리모양) (테두리색) */
border-image: URL(../img/world/border_1.png) 30; /* URL(테두리로 쓸 소스 이미지 주소) (이미지 분할 크기) */
}
|
cs |
이 두가지입니다.
너무너무 쉽습니다.. 이쯤에서 나올 질문은 두가지겠네요
Q. 이미지 주소는 어떻게 가져오나요?
A. 구글에 [이미지 링크 따는 법]을 검색해보시면 좋습니다.
동인 용도의 홈페이지를 제작중이시라면 UI소스정도는 같서버에 올려주시는게...
Q. 이미지 분할 크기가 뭔가요?
A. 이미지 분할 크기란..... 다음 항목을 봐주세요.
1. border-image의 속성
왼쪽에 보이는게 소스로 사용될 이미지로, 사이즈는 90x90px입니다.
이 이미지를 삼등분해서 가운데가 투명하고, 코너에만 테두리가 달린 박스를 만들어보겠습니다.
우선 이 소스에서 테두리(코너) 부분의 크기는 30*30px입니다.
그럼 우리는..
1. 이 이미지를
2. 30*30px 단위로 잘라서
3. 박스에 30px크기의 테두리로
4. 올려줍시다.
각 순서에 따른 코드입니다.
1. 이 이미지를
이미지 소스를 border-image속성에 넣어줍니다.
|
1
2
3
|
.box_inner {
border-image: URL(../img/world/border_1.png); /* URL(테두리로 쓸 소스 이미지 주소) */
}
|
cs |
2. 30*30px 단위로 잘라서
본래 슬라이스 크기는 top right bottom left를 모두 지정할 수 있습니다.
(설명하면 포기할 것 같아서 뺐습니다.) 저희는 30px크기의 정사각형으로 자르면 되니 간단하게 적을 수 있습니다.
|
1
2
3
|
.box_inner {
border-image: URL(../img/world/border_1.png) 30; /* URL(주소) (이미지 슬라이스 크기) */
}
|
cs |
2-1. 만약 같은 이미지를 사용하는데 테두리의 크기만 바꾸고 싶다면
이런식으로 적어줍니다.
|
1
2
3
|
.box_inner {
border-image: URL(../img/world/border_1.png) 30 / 15px; /* URL(주소) (슬라이스) / (줄이고 싶은 크기) */
}
|
cs |
3. 박스에 30px크기의 테두리로?
이게 무슨뜻이냐면.. 박스에 투명한 테두리를 먼저 그려줘야 한단 뜻입니다.
안그리면? 테두리가 안보입니다.
|
1
2
3
4
|
.box_inner {
border: 1px solid transparent; /* 테두리가 들어갈 자리 */
border-image: URL(../img/world/border_1.png) 30 / 15px; /* URL(주소) (슬라이스) / (줄이고 싶은 크기) */
}
|
cs |
4. 올려줍니다.
저장 한 후 새로고침해서 확인해봅시다.
Q. 위에선 border: 10px인데 왜 아래는 1px인가요
A. border의 굵기는.. 일종의 여백이라고 생각하시면 됩니다.
" 테두리가 내용에 가려저도 상관 없어 ... " 라거나 따로 padding 값을 준다면 굵기야 어떻게 해도 상관 없습니다.
무슨 소린지 모르겠다면.. 그냥 테두리랑 같은 사이즈(30px)로 하시면 됩니다.
2. 사용된 소스
컬러 변경은 자유롭습니다.
그 외의 변경(리터칭 등)은 불가능합니다.
동인 한정으로 상업적 이용이 자유롭습니다. 인쇄물이나 기타 디자인등에 사용하셔도 상관없습니다...
단, 홈페이지 커미션 용도는.. 사용하지 말아주세요 ...
언젠가 제가 커미션을 종료한다면.. 그땐 사용하셔도 무방합니다.. (같은 소스.. 민망하니까요...)
< 이 옆에 뭔가있음
완전히 테두리가 있고 사이즈가 좀 더 작은 소스입니다. 있길래 올려둡니다.
사용 조건은 위와 동일합니다.
3. 참고할 자료
매뉴얼 : https://developer.mozilla.org/ko/docs/Web/CSS/border-image
border-image
border-image CSS 속성은 요소 border-style의 자리에 이미지를 그립니다.
developer.mozilla.org
(사실 뭐든 매뉴얼이 개 짱이기 때문에 매뉴얼만 읽으셔도.. 충분합니다..)
매뉴얼에서 해주는 개쩌는 자동생성기 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator
Border-image 생성기
이 도구를 사용해 CSS3 border-image 값을 생성할 수 있습니다.
developer.mozilla.org
4. 덧붙이는 말
너무너무너무너무너무 간단한 내용이라 이걸 굳이 풀어써야 할까? 싶었지만...
사실 소스 뿌리려고.... 썼지만... 그래도... 조금이나마 도움이 된다면 기쁘겠습니다.
오류가 있다면.... 댓글로 공유해주세요.
꾸준히 소통하고 피드백을 반영할 시간이 없어서.. 덧글로 질문을 남겨주셔도 삼개월 후에나 올 가능성이 높습니다.
사실 이걸 쓰는 이유도.. .....
반년 전 쯤 부터 뭔가 생산적인걸 써봐야지.. 하다가...
티스토리가 휴면 계정이 되어서.... 이러다 블로그를 뺏길까봐......
해당 글에 관한 문의는 오픈카톡을 이용하지 말아주세요. 다른 문의의 확인이 어렵습니다 (지금도 어렵습니다..)
그럼.. 즐거운 오타쿠질 되세요..