친절한효자손 취미생활

이 방법은 우선 Fastboot 뿐만 아니라 Font Awnsome (폰트어썸)을 사용하는 블로그 혹은 HTML/CSS 홈페이지에서 모두 사용이 가능하다는 것을 말씀 드린다. 왜냐하면 폰트어썸 자체적으로 이런 회전기능이 있기 때문이다. 필자의 생각은 폰트어썸 뿐만 아니라 아마 이런 폰트어썸 스타일을 적용하는 모든 대상에 대해서 회전이 가능할 것 같다는 생각이다. 여기서는 우선 티스토리의 Fastboot 스킨에서만 한번 적용하는 방법을 알아보도록 하겠다.



피가되고 살이되는 블로그, 친절한효자손 취미생활!

글, 사진 및 이미지 ▶ CopyLeft(C) 유길용

#CopyLeft(C) 는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻 입니다#

#공유라는 개념은 그대로 복붙하시라는 개념이 아니라, 내용을 응용해서 가져가시라는 말씀입니다#

#사진과 이미지의 일부는 퍼온것도 있음을 밝힙니다#

#본 블로그는 크롬(Chrome Browser) 1920×1080 해상도에서 가장 선명하게 보입니다#


폰트어썸 대상으로 회전하는 방법을 알아보자


우선 Fastboot 최상단이라고 하면 현재 보시는 화면의 제일 위로 스크롤을 올렸을 때, 오른쪽에 보이는 아이콘들의 집합 부분을 말한다. 보시면 집 모양의 아이콘도 보이고, 연필 모양의 아이콘, 자물쇠 아이콘도 보인다. 이 부분에 있는 저 아이콘들이 바로 별도의 이미지가 아닌 폰트어썸이라고 하는 곳에서 제공하는 소스들이다.


이 소스는 오픈소스로 누구나 다 사용할 수 있으며, 태그만 알면 어떤 아이콘이든지 마음대로 넣을 수 있다. 또한 지금 보시는 것 처럼 회전을 줘서 독특한 홈페이지로 거듭날 수 있게 된다. 심심해서 회전을 넣어봤는데 꽤 괜찮은 것 같아서 지금까지 계속 사용 중 이다.




어디를 말하냐면, 현재 이 부분이다. 보시는 것 처럼 회전이 잘 되고 있다는 것을 알 수 있다. 이제 이것을 어떻게 적용시키는지 한번 살펴보도록 하겠다. 먼저 관리자의 HTML/CSS 편집으로 들어가야 한다.




아래로 조금만 내려가 보시면, 이런 부분을 보실 수 있다. 오리지널 Fastboot 사용자 분들은 저기 부분이 다소 다를 수 있음을 명심하자. 가장 확실히 찾는 방법은 Ctrl+F를 눌러서 desktopNav 를 검색하시면 된다. 이제 저 부분에서 어디를 수정하면 되는가? 간단하다.




여기는 폰트어썸 예시 사이트다. 애니메이션에 대한 태그를 설명하는 부분으로 설명에 의하면 기본 fa fa-해당 아이콘 이름 이 다음, fa-spin 을 넣어서 애니메이션을 적용하라고 나와 있다. 이 태그를 그대로 실전에 투입시키면 된다.




그렇다면, 필자의 블로그에서 두 가지 폰트어썸 아이콘에 회전을 적용시켜보고 싶은데, refresh 아이콘과 gear 아이콘 이 두가지를 회전시켜 보려고 한다. 해당 태그를 찾아 fa-spin 만 넣어주면 완료다.




그렇다면 현재 빨간색 밑줄이 들어간 이 부분이 될 것이다. 각각 보시면 fa fa-refresh 가 보이고, fa fa-gear 라고 보인다. 이 둘 태그의 뒤에 fa-spin을 붙여준 것이다. 이렇게되면 폰트어썸에서 자체적으로 회전 애니메이션이 적용되는 것이다. 다시한번 말씀 드리지만, 폰트어썸에서의 적용법이다. 직접 올린 이미지에 회전 줄 일이 있을지 모르겠지만 이 부분은 차후에 실험을 해봐야 할 것 같다. 끝.


티에디션 상단에 고정형 이미지 배너 광고를 반응형처럼 만들기

Fastboot 머리말 (H태그) 밑줄 색상 변경하는 방법

티스토리 업데이트 이후 Fastboot 왼쪽 카테고리 버튼 오작동 해결하기


"친절한효자손 취미생활" 을 검색!


공유하기

facebook twitter kakaoTalk kakaostory naver band