Fastboot 최상단 아이콘 메뉴 360도 회전 애니메이션 적용 방법

이 방법은 우선 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 왼쪽 카테고리 버튼 오작동 해결하기


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


이 글을 공유하기

댓글(4)

  • 2017.11.27 00:28

    비밀댓글입니다

    • 2017.11.27 01:59 신고

      Q. 효자손님 글 잘보고 있습니다 한 가지 의문이 있어 글을 남기게 되었습니다 저만의 문제인지 이 스킨의 문제인지 몰라서요
      홈화면에 보면 티에디션으로 꾸며져 있고 상단에 티에디션상자안에 에드센스 코드를 넣어 다들 그렇게 달고 있지요

      저도 처음에 그렇게 넣고 몇 달을 지냈는데 이상하게 에드센스에 들어가서 자세히 살펴보니 메인화면에 상단과 중단 하단에 달아놓은 에드센스의 조회수가 1로 나와 있네요 말이 안되지 않습니까? 다른 곳에 붙어 있는 에드센스는 모두 정상이었습니다

      단지 메인화면에 티에디션안에 넣어 놓은 것만 조회수가 1이더군요 즉 에드센스에서 읽어가지 못한다는 뜻이지요
      그래서 지금은 중단시켜놓았습니다 혹시 효자손님꺼는 어떻게 작동하는지요 정상작동한다면 저에게 문제가 있는건데
      혹시나 해서 이 부분 의문을 갖고 글 남기게 되었습니다 [비밀댓글]

      A. 앞으로는 비밀댓글로 달지 말아주세요. 방문자로 하여금 댓글도 하나의 정보가 될 수 있습니다. 원래 블로그라는게 바로 다이렉트로 접속하시는 것 보다, 검색을 통해 하나의 글로 유입되는 경로가 압도적입니다. 따라서 티에디션 메인화면에 애드센스를 넣어도 당연히 조회수가 본문에 비해 떨어지는건 자연스러운 겁니다. 저도 별로 안 됩니다. 그냥 넣는겁니다. 여기서 광고효과를 기대하기는 어렵겠지요. 애드센스에서 읽어가지 못하는게 아니고, 그냥 사람들이 메인화면으로 들어오지 않는다는걸 뜻합니다. 그냥 냅두시면 됩니다. 신경쓰지 마시어요. 저도 신경 안 쓰고 있습니다.ㅎ

  • 2018.01.04 17:29 신고

    안녕하세요 질문이 있습니다.

    왼쪽에 친절한효자손 취미생활 아래에
    작은 카테고리 클릭시 찾을 수 없는 페이지라고 뜨는데
    어떻게 해당 카테고리끼리 링크를 연결할 수 있는지 궁금합니다 ㅠㅠ
    항상 글 잘 보고 있습니다.

Designed by JB FACTORY