티스토리 블로그에 버튼을 넣고 싶어서 찾아보다가 Button Generator라는 사이트를 알게 되었습니다. CSS로 간편하게 버튼을 만들어주는 사이트 인데요, 등록된 여러가지 디자인 버튼이 있어 조금만 수정하면 원하는 모양으로 제작이 가능합니다. 티스토리 뿐만 아니라 웹 작업 할때에도 이미지로 버튼을 만들어 넣는것보다 간편하게 버튼을 만들수있어 유용해보입니다. 아래 버튼은 Button Generator에서 복사한 버튼을 넣어봤습니다. 티스토리에 어떻게 넣어서 쓸수있는지 보여드리겠습니다.
CSS 버튼 스타일 만들기
사이트에 들어가면 외쪽에 이미 만들어져있는 버튼들이 있습니다. 이 버튼 중에 내가 만들고싶은 가장 비슷한 버튼 모양을 선택합니다. 왼쪽 버튼 리스트에서 버튼을 선택하면 가운데 이미지가 선택한 버튼의 이미지로 변하는데 변한 상태에서 배경색, 버튼색, 그림자등 색상 변경이 가능합니다.
버튼 디자인을 수정한 후 Get Code 버튼을 클릭하면 오른쪽에 CSS 코드가 생성됩니다. 생성된 CSS 코드를 티스토리 스킨에 저장해두면 저장한 버튼 스타일대로 필요할때 마다 글에 넣을 수 있습니다. <a> 태그 부분은 복사할 필요 없고 .myButton 줄 부터 끝까지 복사를 합니다.
CSS 버튼 스타일 스킨에 추가하기
블로그 관리자 화면으로 이동하여 꾸미기 > 스킨편집 메뉴를 클릭합니다. 오른쪽 상단에 html 편집 버튼을 클릭하면 위와 같은 화면이 나오는데 CSS탭을 눌러 아까 생성한 CSS 코드를 추가해줍니다. 저는 버튼을 오른쪽 정렬로 나오게 하고 싶어서 float : right; 소스를 추가해서 넣어주었습니다.
글쓰기로 돌아가서 추가한 CSS 클래스 이름으로 a태그 <a class="myButton" href="버튼을 누르면 이동될 URL">버튼 TEXT</a>를 넣어주고 미리보기를 해보면 CSS 스타일로 버튼이 만들어집니다. 여러가지 버튼 CSS 스타일을 추가해두면 적재적소에 버튼을 추가하여 쓰실 수 있습니다.
워드프레스 블로그도 운영중이라면 아래 포스팅을 참고하시면 동일하게 버튼을 추가하실수 있습니다.
2023.07.19 - [Tool] - Button Generator로 워드프레스 버튼 스타일(CSS) 추가하기
Button Generator로 워드프레스 버튼 스타일(CSS) 추가하기
이번엔 티스토리 블로그에 이어 워드프레스에 버튼을 추가 하는 방법을 알아보겠습니다. 티스토리도 버튼 스타일을 추가하셔야한다면 이전 포스팅을 확인해주시기 바랍니다. 2023.06.28 - [Tool] - B
egnmomo.tistory.com
'Tool' 카테고리의 다른 글
| Button Generator로 워드프레스 버튼 스타일(CSS) 추가하기 (0) | 2023.07.19 |
|---|---|
| ChatGPT 뤼튼(Wrtn)으로 시작하기 (0) | 2023.06.18 |
