하위 버전 브라우저의 HTML5 / CSS3.0 호환성 준수방안

‘하위 버전 브라우저의 HTML5 / CSS3.0 호환성을 어떻게 준수할 것인가’ 에 대해 포스팅하겠습니다.   요즘 ‘모바일웹을 PC에서 잘보이게 해달라’는 미션을 많이 받습니다. 즉 HTML5, CSS3.0으로 작성된 코드를 PC에서 잘보이게 해야하는 것이죠. 따지고 보면 “모바일 -> PC” 요구사항에만 해당되는 미션이 아니라 모든 프로젝트에서 고민할 내용입니다. 요즘은 반응형이 대세이고 최신 스펙들은 안쓰기엔 더보기…

글쓴이 MK,

middleman으로 프론트엔드 개발 프로세스를 자동화해보자

middleman은 SSG(Static Site Generator) 프레임워크입니다. 가장 많이 알려진 SSG 프레임워크로는 jekyll이 있습니다. github에서 jekyll 엔진을 기본으로 제공하면서 유명해졌죠. SSG 프레임워크의 주기능은 주로 템플릿 관리에 집중되있습니다. 따라서 블로그나 mini-project에서 많이 활용됩니다.   본인도 jekyll을 많이 사용해봤지만 템플릿관리 이상으로 활용하기엔 아쉬운점이 많았습니다. 하지만 middleman 을 써보며 jekyll에서 아쉬웠던 점들을 많이 해소할 수 더보기…

글쓴이 MK,

CSS Attribute Selector에 Style속성을 구분자로 사용하지 마세요

저는 가끔 Attribute Selector를 사용해서 특정 스타일을 분기처리할 때가 있습니다. 그런데 Dom이 동적으로 변경되서 작성한 Attribute Selector의 조건이 됬는데 Style 속성을 구분자로 사용할 경우 해당 스타일을 화면에 안그립니다. 예를들어 배너가 활성화되있으면 배너 아래 있는 A박스가 margin-top:0 인데 배너가 비활성화 상태가 되면 A박스는 margin-top:10px이 된야한다. 이 경우 대부분의 브라우저가 margin-top:10px을 못 더보기…

글쓴이 MK,

괜찮은 이미지 편집툴 사용사례

마크업을 하며 누구나 한번쯤 이미지 편집 노가다를 겪어봤을 것입니다. 특히 스프라이트 이미지를 생성할 때 많이 겪습니다. 포토샵에서 채취한 이미지를 일정한 패턴의 좌표로 표현하기 위해선 많은 수작업이 필요하기 때문입니다. 이 포스트에선 스프라이트 이미지를 쉽게 만든 한가지 사례와 함께 괜찮은 이미지 편집툴 두가지를 소개합니다.   나를 힘들게 한 이미지들… “스마트에디터에 라인스티커 기능을 추가하기” 더보기…

글쓴이 MK,