tip (29) 썸네일형 리스트형 css overay trick 원본이미지 하나로 그레이 필터효과를 사용하려면, (이미지 2개 쓰기 싫으니까) -webkit-filter: grayscale(100%); 인가를 주면 되는데, 이게 when can I use보면 http://caniuse.com/#search=grayscale 모바일쪽은 지원이 안된다. 고로 스크립트로 짜거나, 누가 이미 만들어논 jquery plug in 쓰면 되는데 쓸데없이 코드 길어지는것도 싫고 ,플러그인 추가하는것도 싫고 그래서. http://jsbin.com/igahay/1/edit 여기 보면, css에 before를 사용해 하는 편법?(트릭)을 사용하는 방법이 있다. 유용하다.. ie 핵 다시 참고 : http://paulirish.com/2009/browser-specific-css-hacks/ 속성 핵 /* IE6, IE7, IE8, but also IE9 in some cases :( */ #diecinueve { color: blue\9; } input박스 100%로 사이즈 자동 조절 팁 #20230113 유독 이 검색어로 유입이 많이 되서, 몇년만에 추가로 글을 써본다. 요새는 대부분 브라우저나 모바일 작업이 많다보니 display:flex 속성 써서 자동으로 알아서 꽉차니 그걸 추천함 See the Pen display: flex input by banisle (@banisle) on CodePen. input감싸고 있는 태그에 display:block속성에 margin으로 좌우를 조절한다. 자동으로 인풋사이즈 확장됨 디바이스 해상도 정리 *실제 웹뷰 해상도아이폰3 - 320 x 480 = 320 x 480아이폰4 - 640 x 960 = 320 x 480갤럭시s - 480 x 800 = 320 x 533갤럭시s II lte HD - 720 x 1280 = 360 x 640갤럽시탭 7인치 - 600 x 1024 = 400 x 686.6갤넥 - 720 x 1280 = 360 x 640(* 하단에 물리버튼이 없어 소프트키로 대체되어 그만큼의 영역이 빠지게 된다, 실제 height가 다르다)갤노트 - 800 x 1280 = 400 x 640아이패드 - 768 x 1024 = 768 x 1024 status 20 / 748 x 1024갤탭 10.1 - 800 x 1280 = 800 x 1024 status 48 / 752 x 1280옵티머스 뷰 .. 레티나 대응 responsive 이미지 img태그로, 미디어 쿼리 작업 디바이스 해상도 http://www.mattstow.com/experiment/responsive-images/responsive-images.html img 태그를 쓰고, img태그에는 spacer 이미지(공백)로 width,height 를 인라인으로 입력하고속성에 img{background에서 이미지를 호출, background-size:contain;height:auto;max-width:100% }img 태그에서 width값에 맞게 이미지가 자동으로 변경되며, 미디어 쿼리 사용함에도 해당 디바이스별로 백그라운드 이미지만 교체해줘도 된다. 갤노트등 hd해상도의 안드로이드 단말기때매 미디어쿼리로 추가작업이 들어가게 생겼다.http://www.stuffandnonsense.co.uk/blog/about/hardboil.. png최적화 pngcrush로 최적화 작업을 보통하고,pngquant 로 8bit이미지에 투명도작업을 해준다. 파이어웍스에서 저장하지 않고, gui pngquant : http://jedisthlm.com/2006/03/16/manfred-a-pngquant-gui/ 설치경로 주의(윈도우 xp- windows/system32/) pngquant binary 받을것 닷넷 깔것다중파일도 한번에 작업 가능하다.pngquant로 8bit로 작업하고 pngcrush로 한번더 최적화 하면 아..이거구나. font-face 참고 http://einmong.egloos.com/5415221 @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } Android 2.3이하 버전에서 css3 animation 효과 적용 안됨 2.4부터 적용되는것 확인(에뮬레이터)2.3이하는 opacity나 translate 전혀 안먹음 opacity는 중간 애니메이션 과정없이 0 -> 1로만 바뀌고트랜슬레이트는 그냥 바로 마지막 프레임으로 나와버림백그라운드 포지션도 안먹고, 그냥 아예 -webkit-keyframes 가 적용이 안된다고 보여짐..스크립트로 animate로 일일이 주는 방법만이 현재 대안임. 아니면 아이스크림샌드위치를 먹이던가.하지만 난 갤럭시s 그지같네.. 그랬구나... 지원안하네http://caniuse.com/transforms3d 이전 1 2 3 4 다음