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 */ }

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..

-------------------------------------- | 제목 more | -------------------------------------- 제목 more

http://www.sohtanaka.com/web-design/protect-your-images-with-css-watermarks/