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 / 사용한 구문 응용해 보기.