본문 바로가기

DAILY/Blog

[팁] 티스토리 #2 스킨 사이드바 애니메이션 삭제하기

check / 사용하던 스킨 백업 해 놓기.






티스토리 #2 스킨 사이드바 애니메이션 삭제하기





티스토리 #2 스킨은 사이드바를 열고 닫을 때

좌우로 움직이는 애니메이션 동작이 포함되어 있다.







이렇게 애니메이션이 동작하는데,

완벽히 부드럽지 않고, 딜레이가 있는 탓에 깔끔해 보이지 않아

이 애니메이션을 제거하는 방법을 찾아봤다.



코드 수정을 위해 "블로그 관리" - "HTML / CSS 편집"에 들어간다.





.wrap_skin{position:relative;min-width:884px;min-height:100%;
padding-left:23%;transition:padding-left ease-in-out 0.2s}



우선 CSS에 들어가 39줄 부근의 transition 구문을 삭제해야 한다.





.wrap_skin{position:relative;min-width:884px;min-height:100%;
padding-left:23%;}



위와 같이 transition:padding-left ease-in-out 0.2s 를 구문에서 삭제해준다.





.wrap_sub{display:block;position:fixed;left:0;top:0;z-index:10;width:23%;min-width:320px;height:100%;
min-height:100%;background-repeat:no-repeat;background-position:50% 0;background-size:cover;
transition:width ease-in-out 0.2s}



다음으로 61줄 부근의 구문에서 마찬가지로 transition 구문을 삭제해야 한다.





.wrap_sub{display:block;position:fixed;left:0;top:0;z-index:10;width:23%;min-width:320px;height:100%;
min-height:100%;background-repeat:no-repeat;background-position:50% 0;background-size:cover;}



마찬가지로 trainsition:width ease-in-out 0.2s 를 구문에서 삭제해주면 끝이다.







수정을 완료하면,

이렇게 깔끔하게 사이드바가 온오프 되는 모습을 볼 수 있다.



하지만 더 깔끔한 사이드바를 위해 다음 포스팅에서는 사이드바의 스크롤바를 제거해보도록 하자.






tip / 사용한 구문 응용해 보기.