예전이라면 IE hack 쓰는것을 먼저 생각했었는데 코드가 지저분해지기에 꺼림하여 찾아보니 지원해야 할 IE 버젼이 10 이상이라면 아래와 같은 미디어 쿼리 내에 스타일들을 할당하면 된다 /* IE 10 and above */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* Some styles for IE 10 and above */ }
/* Media Query for Mobile Devices */ @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { } /* Media Query for 320px — 480px: Mobile devices */ @media only screen and (min-width: 320px) and (max-width: 480px) { } /* Media Query for 481px — 768px: iPads, Tablets */ @media only screen and (min-width: 481px) and (max-width: 768px) { } /* Media Query for 769px — 102..
mobile chrome 에서썸네일 넓이가 110px 미만이면 흐릿하게 blur 처리가 되는데 또렷하게 보이도록 해당 기능 막는법 img { image-rendering: optimizeSpeed; /* */ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */ image-rendering: optimize-contrast; /* CSS3 Proposed */ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ } http:/..
https://appear.in/ 사이트의 사례를 보면 스크롤 down 할때 배경이 고정되어 보인다. 그로 인해 시각적으로 차이가 발생하는 효과가 나타난다. /* 핵심은 background : ... fixed */ #news.mobile-apps { background: url(/images/frontpage/mobile-apps.61f67a0e.png)center center no-repeat fixed; background-size: cover; background-position-y: 0; padding-right: 50px; } 브라우저 개발도구 css 패널에서 fixed 부분을 스위칭 해보며 스크롤 up down 해보면 감이 확 올것.
아래 Result 탭의 입력란에 포커싱을 해보면 푸른색의 전체를 뒤덮는 레이어가 보이는데 css 만으로 구현 가능하다 See the Pen Text Input Effects by Yeon Jun Kwak (@cezips76) on CodePen. input :focus 하면 전체화면 가리는 푸른 레이어는 .input__label--kyo::after 에 의해 만들어지고 opacity:0 으로 지정하여 일단 보이지 않음 참고
OOCSS & SMACSS & DRY-CSS & BEM http://www.creativebloq.com/css3/create-modular-and-scalable-css-9134351OOCSS & SMACSS XECon+PHPFest2014 발표자료 - 효율적인 css 개발방법 - 최대영 from XpressEngineBEM http://www.carpeau.net/?p=3148느슨한 활용 http://5log.jp/blog/css_375/ (일본어, Chrome 자동번역 활용)
응답형 디자인시 데이터 테이블은 잘려보일수밖에 없는데 그에 대한 구현 모음.+ CSS Tricks http://css-tricks.com/responsive-data-tables/ 총 3가지 구현법을 보여줍니다. 열 생략, 챠트로 대체, '탭하여 크게 보세요'링크로 대체.+ jQuery Mobile Responsive tables http://jquerymobile.com/branches/tables/docs/tables/index.html 중간에 API docs and demos 링크들을 하나하나 눌러보시면 데모를 보실 수 있는데 크게 2가지 구현법을 보여줍니다. 헤더를 줄마다 붙여주면서 각 열을 하나의 박스로 분리하여 세로 배열, 주요 링크 가진 열만 남기고 생략.+ mobifreaks.com htt..
기본브라우저로 크롬을 사용하는 관계로 몰랐었는데 IE 8~9 사용자들(본인 외 98% 이상의 회사 직원들)이 페이지 로딩 안된다는 항의가 있었다.일단은 크롬 전도사로 변신하여 크롬을 친히 설치하고 사용하게 하였지만 설치해주면 뭐하나? 좀 뒤에 가보면 IE 쓰고 있는것을... 서론은 여기까지 하고아래부터는 Internet Explorer v8~9 의 경우에 한한다.문서모드를 아래와같이 IE=edge 또는 IE9 으로 해 놓았을때 페이지가 안보이는 증상이 나타났다.원인을 찾아보니 CSS가 문제 되었던 것이다.관련링크들은 아래와 같다. http://blog.designdivine.com/2011/05/ie9-disappearing-content-bug/ http://simunix.com/wordpress/in..
- Total
- Today
- Yesterday
- Make Use Of
- How to geek
- 인터넷 통계정보 검색시스템
- 트위터 공유 정보모음
- 웹표준KR
- 치우의 컴맹탈출구
- Dev. Cheat Sheets
- w3schools
- Dev. 조각들
- ASP Ajax Library
- CSS Tricks
- WebResourcesDepot
- jQuery Selectors Tester
- DeveloperSnippets
- Smashing Magazine
- Nettuts+
- devListing
- 웹 리소스 사이트(한)
- Mobile tuts+
- Dream In Code
- Developer Tutorials
- CSS3 Previews
- 자북
- 안드로이드 사이드
- Code Visually
- Code School
- SQLer.com
- 무료 파워포인트 템플릿
- iconPot
- Free PowerPoint Templates
- Design Bombs
- Web Designer Wall
- 1st Webdesigner
- Vandelay Design
- 무료 벡터 이미지 사이트들
- Tripwire Magazine
- Web TrendSet
- WebMonkey
- 윤춘근 프리젠테이션 디자이너 블로그
- cz.cc 무료 DNS
- [웹하드] MediaFire
- [웹하드] DivShare
- 한컴 인터넷 오피스
- IOS
- Wordpress
- classic asp
- JQuery
- 한글
- Mac
- nodejs
- javascript
- 워드프레스
- 안드로이드
- mssql
- API
- laravel
- centos
- IE
- sencha touch
- JSON
- iphone
- Docker
- Android
- Chrome
- Debug
- nginx
- CSS
- PHP
- git
- ASP
- Prototype
- Linux
- iis
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |