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

CSS Box Machine

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

바로 가기

사용법

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

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

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

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

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

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

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툴들을 검색해보시기 바랍니다.

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

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

  1. 박해성 on Facebook says:

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

    Reply
    1. 익명 says:

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

      Reply
  2. 박해성 on Facebook says:

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

    Reply
    1. 익명 says:

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

      Reply
  3. 박해성 on Facebook says:

    답변 감사합니다.

    Reply
  4. HwangC의 착한 워드프레스 블로그 on Facebook says:

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

    Reply
  5. HwangC의 착한 워드프레스 블로그 on Facebook says:

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

    Reply
  6. 박해성 on Facebook says:

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

    Reply
  7. 박해성 on Facebook says:

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

    Reply
Add Comment Register



이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

다음의 HTML 태그와 속성을 사용할 수 있습니다: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">