[블로그스팟] 버튼 만들기

블로그스팟을 사용할 때 버튼을 쉽게 만들어 넣을 수 있는 방법에 대해서 쉬운 설명으로 내용을 정리 했습니다.

크게 버튼 만드는 작업 순서는 다음과 같습니다.

위에 순서를 보면 어려울 것 같지만 아래 설명대로 하나씩 따라 해보면 내 블로그스팟에 아주 쉽게 버튼을 적용할 수 있습니다.

블로그 스팟에 버튼 만들기

버튼을 만들어 주는 CSS를 생성해주는 사이트에 접속을 해야 합니다. 사이트 주소는 아래 주소를 클릭하면 접속이 가능합니다.

CSS번튼 자동생성기 주소 : https://www.cssgenerators.net/

사이트에 접속을 하면 아래 화면 구성으로 되어 있습니다.

웹페이지 상단 오른쪽에 보면 웹페이지 언어를 선택할 수 있습니다. 기본 [영어/일본어/한글]을 선택할 수 있기 때문에 한글로 안나올 경우 '한글'로 선택해 주세요

내가 선택하려는 버튼의 모양을 마우스 클릭으로 선택 할 수 있습니다. 기본 15가지의 모양을 제공 합니다.

버튼을 구성하는 색상들을 변경할 수 있습니다. 해당 코드에 마우스를 올려 놓으면 어떤 색상을 변경할 수 있는지 위에 사진 처럼 말풍선으로 표시되어서 변경하려는 생상 코드를 클릭해서 쉽게 변경할 수 있습니다.

아래 사진은 버튼의 흰색 글자를 검정색으로 바꾸는 모습입니다.

버튼 안에 글자 내용 및 폰드등 글자의 디자인을 변경할 수 있습니다.

버튼의 기본 세부 디자인을 변경할 수 있는데 기본 탭을 [글자], [테두리], [버튼]으로 나누어져 있습니다. 모두 한글로 나와 있으니 처음 한번만 드래그로 수치를 변경하면서 테스트 하면 무엇이 바뀌는지 쉽게 알 수 있습니다.

참고로 버튼의 글자 수에 따라서 버튼의 길이를 변경하고 싶을 때는 아래 사진처럼 [테두리] 탭을 선택하고 '가로 너비', '세로 높이' 등을 수정해 주시면 됩니다.

만들고 싶은 버튼을 모두 디자인해서 끝냈다면 소스코드를 복사해서 블로그스팟에 붙여넣기를 해야 합니다. 소스 코드는 아래 사진의 코드를 모두 선택해서 [Ctrl + C] 복사하기를 하시면 됩니다.

블로그스팟에 새글을 만들어 주고 아래 사진처럼 [HTML 보기] 를 선택해 줍니다.

복사해온 소크 코드를 붙여 넣기 해주면 아래 처럼 나옵니다.
소스코드는 크게 ①, ②로 구분할 수 있는데 ①은 버튼으로 사용할 A링크가 적용되는 부분이고 ②는 소스코드를 디자인한 CSS코드 입니다.

②번 코드 부분은 작성하려는 페이지에 어느 위치든 상관없이 한번만 있으면 적용이 되고 ①번 코드는 내가 버튼을 만드는 곳에 넣어 주면 됩니다.

여기서 중요한 것은 a태그 안에 있는 class="ClassName" 입니다. 버튼을 적용하려면 a 태그 안에 꼭 class="ClassName"를 넣어 주어야만 버튼 모양이 적용이 됩니다.

작성시에는 CSS가 적용이 안되어 그냥 글자로 보이지만 미리보기, 완성 후 웹페이지로 보게 되면 CSS가 적용이되어 아래 사진처럼 정상적인 버튼으로 보이게 됩니다.

이 것으로 블로그 스팟에서 버튼만드는 방법에 대해서 알아 보았습니다. 처음에는 더딜 수 있지만 몇번 해보면 쉽게 할 수 있기 때문에 블로그스팟에서도 원하는 버튼을 쉽게 디자인해서 만들어 넣을 수 있습니다^^