예전이라면 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 */ }
https://material.io/devices/ 에서 대개 많이 사용되는 갤럭시S6 dp 해상도를 확인해보면360 x 640포토샵에서 캔버스 크기는 위 사이즈 * 2로 잡고photoshop generator 로 50%, 100% 이미지를 생성 각각 1x , @2x 이미지로Density 가 4 로 되어 있음을 확인 할 수 있는데 360 (dp) x 4 (density) = 1440 (px)즉, 1440 px 넓이의 이미지를 360 넓이로 1/4로 고농축 압착하여 보여줌반대로 설명하자면 360 px 넓이 이미지를 기기에서는 4배인 1440 px 넓이로 늘려 보여줌여튼, 귀찮거나 모르겠다 싶으면 일단 포토샵 캔버스 크기를 360 x 640 px 로 작업하고 브라우저 렌더링 확인해보기.웹브라우저로 인한 이미..
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 자동번역 활용)
Library나 Framework을 사용하지 않은순수한 JS나 CSS 작성
IE에서는 padding값을 width 안에 넣어서 계산하지만 FF에서는 width와 padding을 따로 계산한다. 예를들어 총 넓이가 70px 인 박스를 만들고 싶을 때 IE에서는 width:65px; padding-right:5px FF에서는 width:70px; padding-right:5px 으로 해 줘야 맞는다는 것이다. DTD 선언을 제대로 해 주면 동일해진다고 해서 갖가지 선언을 해 보았으나 width와 padding의 차이는 있었다.
목표는 아래와 같다 구현해봤던 CSS .main02 { font:normal 9pt dotum,Verdana; border-bottom:1px dotted lightgray; margin:0 0 15px 0; padding:0 0 10px 0; } .main02 .pic { width:90px; height:60px; overflow:hidden; border:1px solid silver; float:left; margin:0 15px 5px 0; } .main02 .pic img { width:100%; border:0; } .main02 .title { width:350px; overflow:hidden; font:bold 12pt dotum,Verdana } .main02 .subtitle { m..
- 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
- 한컴 인터넷 오피스
- JQuery
- git
- 한글
- iis
- nginx
- sencha touch
- API
- centos
- javascript
- iphone
- JSON
- Debug
- ASP
- CSS
- mssql
- nodejs
- 워드프레스
- 안드로이드
- Wordpress
- IE
- Prototype
- Chrome
- Linux
- classic asp
- Docker
- laravel
- Android
- Mac
- PHP
- IOS
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |