최근에 블로그 스킨을 바꾸면서 또 저만의 스타일로 조금씩 바꿔보고 있는데요. 저도 스킨을 사실상 나눔을 받아 사용하는데 나도 나눠야 겠다! 싶어서 블로그에 보통 특정한 점을 강조하거나 할때 사용하는 라벨을 공유해볼려고 합니다 :)
라벨은 CSS로 되어 있어서 자신이 원하는 컬러코드를 입력해서 사용하셔도 됩니다! 여기에 사용된 아이콘 같은 경우 28x32 사이즈이므로 개별 작업하셔서 넣으시면 제대로 작동할겁니다 :)
라벨 예제
풍부하게 새가 천지는 뼈 심장의 그들은 충분히 얼음이 피다. 생의 능히 그림자는 그들의 귀는 같으며, 청춘을 이상은 원대하고, 있는가?
GWD / WEWEB.TISTORY.COM
CSS CODE custom_box check
CSS CODE custom_box no
CSS CODE custom_box ar
사용방법 코드 - CSS 적용
아래 코드를 CSS에 넣어주세요.
.custom_box {
box-sizing: border-box;
color:#fff;
text-align:left;
width:100%;
padding:20px 70px 15px 70px;
margin-bottom:10px;
background-position:20px center;
background-repeat:no-repeat;
border-left:6px solid;
}
.custom_box.cau {
background-color:#2a77da;
background-image:url(./images/icon_caution.png);
border-color:#306dba;
}
.custom_box.check {
background-color:#74c8b8;
background-image:url(./images/icon_check.png);
border-color:#407f73;
}
.custom_box.no {
background-color:#c87474;
background-image:url(./images/icon_no.png);
border-color:#673737;
}
.custom_box.ar {
background-color:#b3aaaa;
background-image:url(./images/icon_ar.png);
border-color:#6a6161;
}
.custom_box.cau small {color:#0d305d; }
.custom_box.check small {color:#407f73; }
.custom_box.no small {color:#673737; }
.custom_box.ar small {color:#6a6161; }
사용방법 코드 - HTML 적용
블로그를 입력할때 HTML로 적용하셔서 아래와 같이 입력하시면 됩니다. 아래 코드는 cau를 입력했을때 입니다.
<div class="custom_box cau">큰 글씨는 두줄 정도가 적당한것 같아요.
물론 길어도 보는데는 상관은 없지만요!<br/>
<small>작은 텍스트는 요렇게!</small>
</div>
위에서도 말씀드렸지만 색상을 변경하여 자신의 스타일대로 적용하시면 됩니다! background, border-color, color 쪽 변경을해서 더 멋지게 사용하시는것도 추천드립니다! 아 그리고 아이콘은 첨부파일을 받으셔서 올리셔서 사용하시면 됩니다!
궁금하신 부분이 있으시면 댓글남겨주세요~ 그럼 좋은하루 되시길!
