티스토리 뷰
티스토리 블로그에 글을 쓰고 꾸미다 보면 클릭을 강조할 수 있는 css버튼을 어떻게 만드는지 궁금하셨을 겁니다.
간단하고 아주 쉬운 방법을 통해 CSS버튼을 만들고 서식을 이용해 자유롭게 사용할 수 있는 방법을 알려드리겠습니다.
목차
1. CSS 링크 버튼 디자인 만들기
위와 같은 CSS버튼은 직접 색상과 디자인을 선택해 쉽게 만들 수 있는 'Button Generator'사이트를 이용해 만들 수 있습니다.사이트에 들어가 원하는 모양과 색상을 적용해 디자인을 완성하고 내 블로그에 적용시키면 됩니다.
2.디자인 선택 후 오른쪽의 상세 설정 툴에서 좀 더 자세히 원하는 디자인을 만들 수 있습니다.
-색상,글자색,글꼴 크기, 수직, 수평 정도를 조절해 주시고, 텍스트 그림자는 글자의 그림자가 생성되니 좀 더 디테일하게
꾸미시는 분들만 진행하시는 게 좋습니다.
3. 원하시는 디자인으로 수정이 완료되었으면 '코드 받기(Get Code)'를 클릭합니다.
4. '코드 받기(Get Code)'를 클릭하면 아래사진처럼 CSS코드가 생성됩니다.
5. 이 코드는 2개로 나누어 적용되는데 ①번은 서식을 만드는 서식 코드이고,②번은 CSS코드입니다.
6. 각각의 코드 티스토리 블로그에 적용합니다.(아래 순서대로 따라 하세요)
2. 티스토리 CSS 링크 버튼 만들기
이제 만들어진 코드를 복사해서 내 티스토리 블로그에 넣어보도록 하겠습니다.
1.②번 CSS코를 복사합니다.
2. 티스토리 톱니바퀴 버튼을 눌러 '관리자 홈'으로 들어가
꾸미기> 스킨편집> html편집> css로 들어갑니다.
3. 복사한 ②번 CSS코드를 css에 적용해 줍니다.(가장 아래에 넣어 주시면 됩니다)
3. 서식코드 적용으로 CSS링크 버튼 완성하기
만들어둔 서식코드를 내 블로그에 적용해 포스팅할 때 쉽게 css버튼을 원하는 위치에 적용할 수 있습니다.
1. 'Button Generator'사이트에서 ①번 서식 코드를 복사합니다.
2. 내 티스토리 블로그의 '블로그 관리자 홈'에서
서식 관리> 서식 쓰기>로 들어갑니다.
3. 기본모드로 되어있는 상태를 'HTML'로 변경합니다.
4. 'HTML'모드에서 복사한 ①번 서식 코드를 넣어 줍니다.
5. 다시 기본모드로 적용하면 CSS버튼이 내 블로그에 만들어졌습니다.
6. 포스팅할 때 원하는 위치에 서식을 넣어 주면 됩니다.