VoidNoble IT Zone

예전이라면 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 자동번역 활용)

http://css-tricks.com/overriding-the-default-text-selection-color-with-css/ ::selection { background: #ffb7b7; /* Safari */ } ::-moz-selection { background: #ffb7b7; /* Firefox */ }

응답형 디자인시 데이터 테이블은 잘려보일수밖에 없는데 그에 대한 구현 모음.+ 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..

를 쓰면 IE에서는 테이블이 가운데로 와서 보이는데 Firefox 에서는 좌측정렬,줄바꿈 식으로 보인다. 이때는 를 사용하면 IE에서 보이는것과 같이 테이블이 가운데에 위치한다.