전체 글 35

[번역] 미디어 쿼리 없이 반응형 이메일을 만드는 Fab Four 테크닉

원문: The Fab Four technique to create Responsive Emails without Media Queries 미디어 쿼리 없이 반응형 이메일을 만드는 새로운 방법을 찾았습니다. 이 방법은 CSS calc()함수와 width, min-width, max-width 프로퍼티을 사용합니다. 저는 이 프로퍼티를 합쳐서 (CSS계 의) Fab Four라고 부르고 있습니다. 문제 반응형 이메일을 만드는 것은 어려운 일입니다. 모바일 이메일 클라이언트(Gmail, Yahoo, Outlook.com)가 미디어 쿼리를 지원하지 않기 때문에 특히 어렵습니다. 하이브리드 방식, Gmail 첫번째 전략, 미디어쿼리가 없는 반응형 이메일이 이런 상황에 대응하는 좋은 방법입니다. 저는 마지막 방법을 ..

IE8에서 클래스 이름이 바뀔 때, 슈도 엘리먼트(pseudo element)를 redraw 하는 법.

문제 상황 IE8에서는 자바스크립트를 통해 클래스를 추가/제거하여 :before나 :after같은 슈도 엘리먼트(pseudo element) 스타일을 변경할 때 redraw하지 않는다. 원인 IE8은 contents의 값이 변경 될 때만 슈도 엘리먼트를 redraw한다. 해결 방법 항상 모든 스타일 규칙에서 다른 콘텐츠 값을 사용하면 매번 redraw가 될 것이다. .checkbox:before { content: ''; } .checkbox.checked:before { content: ' '; /*

Data URIs(Data URI scheme)

Data URIs란 Data URIs(Data URI scheme)란 `data:` 스킴이 접두어로 붙은 URI. 작은 파일을 문서 내에 인라인으로 임베드하기 위한 URI 스킴이다. 주로 아이콘 등의 작은 이미지 파일에 사용된다. 문법 data:[][;base64], mediatype : MIME 타입. 생략된시, 기본 값 text/plain;charset=US-ASCII base64 : 데이터가 텍스트가 아닌 경우 base64 인코딩된 데이터가 필요하다. 특징 소스 코드 내 삽입 추가적인 HTTP 요청이 일어나지 않는다. 캐싱 되지 않는다. 용량 base64 포맷으로 인코딩하면 원본 파일보다 더 용량이 커진다. 긴 문자열 브라우저에 따라 문자 길이에 제한이 있기 때문에, 용량이 큰 이미지 등은 처리하지..

[번역] 인터넷 익스플로러의 opacity 상속 문제 해결하기

원문: Fixing IE's Opacity Inheritance Fixing IE's Opacity Inheritance Fixing IE's Opacity Inheritance Child elements ignore the parent's opacity in Internet Explorer. January 17, 2012 In Internet Explorer 7, 8, 9, non-static child elements do not inherit the opacity of the parent. All of this text should have a 50% opacity.. www.jacklmoore.com Internet Explorer 7, 8, 9에서 position이 static이 아닌 자식 요소..

반응형