본문 바로가기

반응형 티스토리/Tistory

마크쿼리 스킨 티에디션 꾸미기 - 1


마크쿼리 스킨에 Fast TSilde v0.1 넣기


  Fast TSlide는 반응형 스킨 티에디션에서 작동하도록 디자인 된 슬라이드쇼 형식의 티에디션 요소입니다. 반응형 스킨에 알맞는 티에디션 요소가 없어서 제작하게 되었습니다. 모습은 하단과 같습니다. 본 블로그에서 예제확인 가능합니다.



  이에관한 자세한 사항은 아래 링크를 통해 우선 알아보세요.



Fast TSlide v0.1




  이 글에서는 마크쿼리 스킨으로 알려진 Ungki, H님이 제작한 스킨에서 반응형 티에디션 요소인 Fast TSlide를 삽입하는 방법에 대해 알아보겠습니다. 몇몇 분들이 Fast TSlide를 마크쿼리 스킨에 적용하는 법을 여쭤보셔서 포스팅합니다. 기본 적용법은 위 링크를 타고 들어가시면 됩니다. 여기서는 추가적으로 발생하는 Issue에 대해 해결책을 알아보도록 하겠습니다.





최초 적용 모습




 위에 첨부한 글의 가이드라인처럼 넣으면 일단은 이상이 없는 것처럼 보이지만 한가지 문제가 있습니다. 모바일처럼 보이게 하면...



좌상단 버튼 문제




 그림처럼 버튼이 가리는 문제가 생깁니다. 이 문제를 해결하기 위해서는,


	
.menu-link {
  z-index: 1000 !important;
} 
	


  를 style.css에 넣으시면 됩니다. 마크쿼리 스킨의 menu-link라는 부분의 z-index가 낮기 때문에 가려 보이는 현상입니다. 1000정도로 높이면 문제 없이 상단으로 메뉴버튼이 올라갑니다.




메뉴 활성화시 좌우 스크롤바가 나타나는 문제(?)


  사실 좌우 스크롤바가 생기는 것은 마크쿼리스킨 제작자님께서 그렇게 되도록 설정하셨기 때문이구요, FastBoot처럼 좌우 스크롤바를 어떻게하면 숨길 수 있는지 물어보는 분이 있으셔서 코드 한줄 가져와보면..


	
body {
  overflow-x: hidden;
} 
	


  마찬가지로 적용을 위해서는 style.css에 넣으시면 됩니다.








  추가적으로 기존에 강의한 Masonry로 된 벽돌쌓기식 티에디션을 만드는 방법은 아래 링크를 참조하세요.