publishing
-
Swipe Pluginpublishing/mobile 2014. 6. 5. 17:21
TouchSwipe a jQuery plugin for touch devices http://labs.rampinteractive.co.uk/touchSwipe/demos/ ISCROLL 4 http://cubiq.org/iscroll-4 dragdivscroll http://scripterlative.com/files/dragdivscroll.htm http://timwhitlock.info/blog/2012/11/touch-screen-swipe-scroll/
-
Better way of Image replacement than text-indent:-9999pxpublishing/mobile 2014. 6. 5. 14:17
출처 : http://www.sitepoint.com/new-css-image-replacement-technique/ This Text is Replaced 백그라운드 이미지로 텍스트를 대체하는 "이미지 대체기법"으로 text-indent: -9999px 을 사용해옴. 웹폰트를 쓰는 환경에서는 거의 필요하진 않지만, 그래도 여전히 많이 필요..그래서 더 좋은 방법~ A new technique has been discovered by Scott Kellum and promoted at Zeldman.com: #replace { text-indent: 100%; white-space: nowrap; overflow: hidden; }The code indents the text beyond the wid..
-
overflow-scrolling : touchpublishing/mobile 2014. 6. 5. 09:15
출처 : 정찬명 @naradesign 모바일 웹킷에서 박스의 높이값을 고정하고 내용을 스크롤 하도록 구현할 때 {overflow:auto;-webkit-overflow-scrolling:touch} 속성을 쓰면 던지듯 스크롤 할 수 있네요. 관성이 있는 것처럼 스크롤이 돼요.----------------------------------------------------------------------------------------- overflow-scrolling: touch 한 번의 finger touch로 관성이 걸린듯 속도이동하는 "스크롤링 모션"이 가능. -webkit-overflow-scrolling: touch;-moz-overflow-scrolling: touch;-ms-overflow-s..
-
펌) 웹 개발자를 위한 필수 브라우저 툴publishing 2014. 4. 25. 10:16
출처 : http://www.kimdirector.co.kr/bbs/view.php?id=webdesign&no=289 웹 개발자를 위한 필수 브라우저 툴 웹 디자이너와 개발자에게 브라우저 내에서 사용할 수 있는 가장 유용한 툴은 무엇일까? 전문가가 추천하는 툴을 살펴보자. 파이어버그(Firebug)웹 디벨로퍼(Web Developer)구글 크롬 디벨로퍼 툴(Google Chrome Developer Tools)자바스크립트 디미니피어(JavaScript Deminifier)폰트 파인더(Font Finder)메저잇(MeasureIt)컬러질라(ColorZilla)플래시블럭(Flashblock)와이슬로우(Yslow)페이지 스피드(Page Speed)쇼IP(ShowIP).....etc.... 현재 크롬을 주로 ..
-
IE6 PNG 초 간단하게 적용publishing/HTML & CSS 2014. 3. 15. 00:34
http://www.colorzilla.com/gradient-editor/css3 gradient generator 를 이용하면opacity가 적용된 background color 를 ie 7 까지 무난하게 적용된다.filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */ 출처 :http://sir.co.kr/bbs/board.php?bo_table=pb_tip&wr_id=2326그밖의 방법..1. Javascriptfunction setPng24(obj) {obj.width=obj.height=1; obj.className=obj..
-
li 와 line-height 그리고 ie7publishing/HTML & CSS 2014. 3. 11. 16:24
li요소는 상위부모의 line-height 를 상속을 받는 놈이다.보통 body 에서 line-height 를 설정해놓곤 한다. 예) body{ font:12px "돋움"; line-height:18px;}최신 브라우저에서는 별 문제 없이 li의 상속받은 line-height는 무시되고, 내용물 공간만큼만 높이값을 갖는다.그러나 ie7 에서는 li가 line-height:18px 값을 상속받아, 그만큼의 높이값을 갖게 되어보이지 않는 공간만큼 예상치 못하게 밑으로 밀리는 일이 발생한다. 해결방법.그래서 ul > li > a > img 감싼 것을 (굳이 li로 감쌀필요없다면)div > a > img 로 변경하여 ie7 에서 나타나는 쓸데없는 line-height 공간을 해결할 수 있다.(즉, 필수적이지 않..