티스토리 반응형 스킨 simple white는 몇 가지 부분을 제외하고는 저번에 스킨 분석을 했던 simple gray와 구조가 매우 유사합니다.


하지만 몇가지 차이가 있는데, 그 중 하나는 이 부분입니다.




* simple white 캡쳐 *





* simple gray 캡쳐 *





뭐가 차이인지 잘 모르겠다구요?



메뉴에 대표 이미지의 썸네일이 있지 않습니까...!!!




이 기능은 티스토리에서 기본적으로 제공하는 기능이 아닙니다.


그래서 이 기능을 어떻게 구현하는지 한번 분석을 해 봤습니다.




이 부분의 html은 이렇게 구현되어 있습니다.



<div class="thumb-box"><span class="thumb"><img alt="" class="" src="http://cfile9.uf.tistory.com/C320x180/2343364B54CF763A1FB4CE"></span></div>


그런데 이 중 src 부분을 티스토리에서 기본제공하는 기능으로 넣지 않았을 것이므로... 어떻게 이 부분의 주소를 할당하는 지를 찾아보는 것이 필요합니다.




별도의 script로 이 기능을 구현했을 거라고 생각되어 찾아봤습니다.


다른 script는 별달리 볼 것이 없었습니다만, 이 스킨의 마지막에 이런 부분이 있었습니다.



<script type="text/javascript">

var col = 0;

var width = 60;

</script><script src="http://cfs.tistory.com/custom/blog/149/1491216/skin/images/ygal.js"></script>


그래서 문제의 스크립트 파일을 열어보니... 이렇게 되어 있더군요.



var d = $(this).find(".thumb img");

여기서 var d를 처리하는 부분이 바로 이미지가 들어가는 부분일 것이라는 사실을 알 수 있습니다.


아무래도 이 부분을 분석할 줄 알려면 ajax를 알아야 할 것입니다. 아직 제가 ajax를 모르므로... 이 부분은 제대로 해석할 수 없게 되겠군요. ajax를 공부할 필요가 있겠습니다.





저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

티스토리 툴바