나만의 CSS 박스와 버튼으로 포스트 꾸미기


2012년 7월 29일


스와 버튼을 포스팅이나 웹사이트에 적절히 사용하면 깔끔하고 세련된 느낌을 줄 수 있습니다. 이전에는 이미지를 주로 사용했지만 최근에는 CSS로 가능한 것들이 많은 것같네요. 하지만 CSS로 박스나 버튼을 만들기 위해서는 어느 정도 CSS/HTML에 대한 지식이 필요하기 때문에 이런 것들이 생소한 분들에게는 쉽지 않은 일이겠죠. 그래서 오늘은 자동으로 다양한 박스와 버튼을 만들어 코드를 생성해주는 툴에 대해 소개하겠습니다.

CSS Box Machine

여기서는 다양한 박스가 미리 만들어져 있어서 원하는 박스를 골라 코드를 복사하여 사용하면 됩니다.

바로 가기

사용법

위의 화면에 있는 박스를 예제로 설명하겠습니다.
1. 위의 화면에서 CSS영역의 코드를 복사하여 테마의 style.css파일에 붙여넣기합니다.

.wrapper_body {
 position: absolute;
 padding: 20px 0;
 height: 100%;
 width: 100%;
 background: #eee;
 font-size: 11px;
 font-size: 11px;
 font-family: 'Open Sans', sans-serif;
 color: #4A4A4A ;
 text-align: center }
 .cbm_wrap {
 margin: 20px auto;
 width: 300px;
 min-height: 310px;
 background: white;
 padding: 10px;
 -webkit-border-radius:10px;
 -moz-border-radius:10px;
 border-radius:10px;
 -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
 -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
 box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
 box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
 position: relative;
 z-index: 90;
 }
 .ribbon-wrapper-green {
 width: 85px;
 height: 88px;
 overflow: hidden;
 position: absolute;
 top: -2px;
 right: -2px;
 }
 .ribbon-green {
 font-weight: bold;
 font-family: Sans-Serif;
 color: #333;
 font-size: 15px;
 text-align: center;
 text-shadow: white 0px 1px 0px;
 -ms-transform:rotate(45deg);
 -moz-transform:rotate(45deg);
 -webkit-transform:rotate(45deg);
 -o-transform:rotate(45deg);
 transform:rotate(45deg);
 position: relative;
 padding: 7px 0 ;
 left: -5px;
 top: 13px;
 width: 120px;
 background: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
 color:#6a6340;
 box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.3);
 }
 .ribbon-green:before, .ribbon-green:after {
 content: '';
 /* Colour of the triangle. To flip the effect, use border-bottom. */ border-top: 3px solid #6e8900;
 border-left: 3px solid transparent;
 border-right: 3px solid transparent;
 position:absolute;
 bottom: -3px;
 /* +1 to compensate for the border */ }
 .ribbon-green:before {
 left: 0px;
 }
 .ribbon-green:after {
 right: 0px;
 }
 .cbm_wrap img {
 width: 100%;
 margin-top: 15px;
 }
 .cbm_wrap p{
 margin-top: 15px !important;
 text-align: justify !important;
 }
 .cbm_wrap h1{
 font-size: 20px;
 font-weight: bold;
 margin-top: 5px;
 text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
 }
 .cbm_wrap a{
 text-decoration: none;
 color: #EAEAEA !important;
 }
 a{
 text-decoration: none;
 color: #4A4A4A !important;
 }
 a:hover{
 text-decoration: underline;
 color: #6B6B6B !important ;
 }

2. HTML영역의 코드는 복사하여 포스트나 페이지 에디터 창에 붙여넣기 하시면 됩니다.
아래에서 한글로 표시한 부분만 원하는 것을 넣으면 됩니다.

<div class="wrapper_body">
<div class="cbm_wrap">
   <div class="ribbon-wrapper-green">
     <div class="ribbon-green">★★★</div>
  </div>
      <h1>제목을 넣으세요</h1> 
    <img src="이미지 URL을 넣으세요">
  <p>
  내용을 입력하세요.
   </p> 
   <br />
   <a href="링크될 주소를 넣으세요"> 사이트 이름을 넣으세요 </a>
</div>​
</div>

3. 위의 코드를 적용하면 아래와 같이 박스가 표시됩니다.

4. 브라우져 테스트
위의 화면은 크롬에서 캡춰한 것입니다. 다른 브라우져에서는 별표뒤에 그라데이션 배경색이 안보이는데 이는 위의 CSS코드에서 그라데이션 배경색을 크롬에만 적용해서 그렇습니다.

위의 CSS코드에서 아래의 코드를 찾고

 background: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));

그라데이션 툴을 사용해서 원하는 그라데이션의 색을 선택해서 아래와 같이 변경해주세요.

background: #cdeb8e; /* Old browsers */
background: -moz-linear-gradient(top,  #cdeb8e 0%, #a5c956 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%); /* IE10+ */
background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdeb8e', endColorstr='#a5c956',GradientType=0 ); /* IE6-9 */

King Button Maker CSS3

7월 한달 동안 무료로 다운로드 받을 수 있는 버튼 메이커입니다. 7월이 거의 끝나가니 필요하신 분들은 미리 다운로드 받으세요.


바로 가기

사용법

1. 다운로드를 받고 압축을 풀면 King Button Maker폴더가 있습니다. 그 폴더 안에 index.html을 열면 아래와 같은 설정 화면이 표시됩니다.

2. 화면 맨 위에 있는 Normal/Hover/Pressed 탭에서 각각 버튼의 색, 크기, 그림자 등을 설정합니다.

3. 화면 하단 오른쪽에 있는 Grab the code를 클릭하여 CSS와 HTML 코드를 복사하고 위의 박스 예제와 같이 각각 styel.css와 포스트 에디터 창에 붙여넣기 합니다.

4. 위의 코드를 적용한 화면

마치며

박스와 버튼 이외에도 CSS로 꾸밀 수 있는 것들이 많이 있으니 구글에서 더많은 CSS툴들을 검색해보시기 바랍니다.

그럼 여러분도 멋진 박스와 버튼을 만들어서 멋지게 포스트를 꾸며보세요. :)

  • http://www.facebook.com/profile.php?id=100001415689222 박해성 on Facebook

    HwangC님, 워드 프레스 매거진 테마를 구입한 후, 한글로 글꼴을 바꿀 수 있나요?

  • http://www.facebook.com/profile.php?id=100001415689222 박해성 on Facebook

    현재 홈을 워드프레스로 바꿀 예정인데, 우선 테마를 구입한 후 이를 한글로 바꾸고 사용할 수 있는지 궁금해서요. 그리고, 아무것도 모르는 초보자도 공부하고 활용하면, 워드프레스로 운용이 가능할까요?

  • http://www.facebook.com/profile.php?id=109601645803670 HwangC의 착한 워드프레스 블로그 on Facebook

    네 가능합니다. 제 포스트 중에서 워드프레스, 테마 그리고 플러그인 영어를 한글로 번역하기를 참고하세요!

  • http://www.facebook.com/profile.php?id=109601645803670 HwangC의 착한 워드프레스 블로그 on Facebook

    다양한 테마와 플러그인들이 있기 때문에 잘 조합하시면 초보자분들도 운용이 가능하다고 생각합니다. :)

  • http://www.facebook.com/profile.php?id=100001415689222 박해성 on Facebook

    답변 감사합니다.

  • http://www.facebook.com/profile.php?id=100001415689222 박해성 on Facebook

    왜 영어 테마들이 한글로 보면, 잘 구현이 안되는건 가요?

    • http://www.hwangc.com HwangC

      저도 수 많은 테마들을 사용해봤지만 워드프레스 테마는 대부분 언어팩을 제공하기 때문에 번역만 하면 한글로 잘 보입니다. 혹시 한글이 잘 안나오시면 테마 개발자에게 문의를 해보셔야할 것같네요.

  • http://www.facebook.com/profile.php?id=100001415689222 박해성 on Facebook

    아…그게 아니라 테마 전체 틀이 깨지는 것 같아서요

    • http://www.hwangc.com HwangC

      번역했다고 테마가 깨지는 것은 아니지만 영어를 한글화 하실 때 너무 길게 번역하셔서 화면이 깨질 수 도 있고 폰트 사이즈가 커서 그럴 수도 있으니 참고하세요. 그래도 문제가 있다면 테마 포럼에서 개발자에게 문의를 해보세요. :)