아이콘 버튼 만들기
포스팅 시 링크가 필요할 때가 있습니다. 링크를 anchor text가 아닌 아래와 같이 아이콘으로 적용하는 법에 대해 알아보겠습니다.
bestcssbuttongenerator에 접속
아래 아이콘을 이용하여 css 사이트에 접속합니다.
원하는 형식의 버튼을 생성
아래와 같이 원하는 대로 수정하여 미리보기를 통해 확인할 수 있습니다.
- 왼쪽은 템플릿입니다.
- 가운데는 미리보기 창입니다.
- 오른쪽은 스타일 만들기입니다.
소스코드 복사
원하는 버튼 스타일을 만들었다면 get code를 사용하여 코드를 복사합니다. 우측의 소스코드를 드래그 하여 복사해야 합니다. 첫번째 네모박스는 html에 두번째 .mybutton { 으로 시작하는 것은 css에 붙여넣을 겁니다.
소스코드를 나중에 원하는 색상이나 다른 스타일로 변경할 수 있습니다. CSS 사이트에서 원하는 색상을 찾지 못했다면 색상코드표를 이용하여 소스코드를 수정하면 됩니다.
CSS code 블로그에 삽입
복사한 코드를 티스토리 블로그 관리자모드 > 스킨편집 > CSS 편집에서 복사한 소스코드를 맨 밑에 붙여넣기 합니다.
서식 만들기
태그를 서식 만들기에서 글쓰기 html mode로 아래와 같이 붙여넣습니다. 이 때, class 명이 css에 붙여넣기한 .myButton_blue 와 이름이 같아야합니다. CSS에서 .으로 시작하는 것은 HTML에서 class를 의미합니다.
CSS 버튼 사용하기
글쓰기 모드에서 저장해둔 서식을 이용하여 불러온 뒤 원하는 링크의 주소를 href = "#", #에 넣으면 됩니다. 만약, 네이버 바로가기를 만들고 싶다면 서식으로 불러온 뒤 HTML 모드에서 <a href = "https://www.naver.com" class="myButton>네이버 바로가기</a> 처럼 진하게 표기된 부분만 수정해 주시면 아이콘이 적용된 걸 확인할 수 있습니다.
만약, CSS에서 복사해 온 소스코드대로 색상이 적용되지 않는다면 CSS의 우선순위로 인해 그렇습니다. 이 경우 간단하게 해결할 수 있습니다.
