WIT – NTS UIT Blog

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

Posted by in Research

‘하위 버전 브라우저의 HTML5 / CSS3.0 호환성을 어떻게 준수할 것인가’ 에 대해 포스팅하겠습니다.   요즘 ‘모바일웹을 PC에서 잘보이게 해달라’는 미션을 많이 받습니다. 즉 HTML5, CSS3.0으로 작성된 코드를 PC에서 잘보이게 해야하는 것이죠. 따지고 보면 “모바일 -> PC” 요구사항에만 해당되는 미션이 아니라 모든 프로젝트에서 고민할 내용입니다. 요즘은 반응형이 대세이고 최신 스펙들은 안쓰기엔 너무 아까우니까요… “webkit이나 CSS3.0을 걷어내야하나?” “따로 한벌 더 만들자” “신경안써도 잘 나오게 하는 방법 없을까?” 방법은 여러가지입니다. 문제는 어떤게 가장 효율적인가를 판단하는 것이죠. 호환성 준수를 위한 방법을 크게 4가지로 분류했습니다. 1. polyfill “polyfill”은 낡은 브라우저에서는 작동 안하는 HTML5 , CSS3.0들을…read more

1

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

Posted by in Environment, Research

middleman은 SSG(Static Site Generator) 프레임워크입니다. 가장 많이 알려진 SSG 프레임워크로는 jekyll이 있습니다. github에서 jekyll 엔진을 기본으로 제공하면서 유명해졌죠. SSG 프레임워크의 주기능은 주로 템플릿 관리에 집중되있습니다. 따라서 블로그나 mini-project에서 많이 활용됩니다.   본인도 jekyll을 많이 사용해봤지만 템플릿관리 이상으로 활용하기엔 아쉬운점이 많았습니다. 하지만 middleman 을 써보며 jekyll에서 아쉬웠던 점들을 많이 해소할 수 있었습니다. middleman은 jekyll보다 더 풍부한 기능들을 제공하고 Custmizing이 쉬운 장점을 갖고 있습니다. 가장 매력적인건 다양한 전처리 파일 build를 지원합니다.   지금부터 middleman을 저의 프론트엔드 개발 프로세스에 활용한 사례를 소개드립니다.     내가 생각하는 프론트엔드 개발 프로세스   최근 프론트엔드 개발…read more

0

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

Posted by in BugReport, Research

저는 가끔 Attribute Selector를 사용해서 특정 스타일을 분기처리할 때가 있습니다. 그런데 Dom이 동적으로 변경되서 작성한 Attribute Selector의 조건이 됬는데 Style 속성을 구분자로 사용할 경우 해당 스타일을 화면에 안그립니다. 예를들어 배너가 활성화되있으면 배너 아래 있는 A박스가 margin-top:0 인데 배너가 비활성화 상태가 되면 A박스는 margin-top:10px이 된야한다. 이 경우 대부분의 브라우저가 margin-top:10px을 못 그립니다. 개발자 도구의 style탭에 스타일정보가 찍히는데도요… 그런데 커스텀 속성을 구분자로 사용하면 margin-top:10px을 잘 그립니다. – 테스트 URL : http://codepen.io/korearice/pen/GgmIx   또 신기한건 이 이슈는 dom이 동적으로 변경될때만 발생합니다. 최초 로딩시부터 dom이 style=”display:none” 상태이면 Dom 상태에 맞게 렌더트리를 구성해 놓은 상태이기 때문에…read more

0

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

Posted by in Environment

마크업을 하며 누구나 한번쯤 이미지 편집 노가다를 겪어봤을 것입니다. 특히 스프라이트 이미지를 생성할 때 많이 겪습니다. 포토샵에서 채취한 이미지를 일정한 패턴의 좌표로 표현하기 위해선 많은 수작업이 필요하기 때문입니다. 이 포스트에선 스프라이트 이미지를 쉽게 만든 한가지 사례와 함께 괜찮은 이미지 편집툴 두가지를 소개합니다.   나를 힘들게 한 이미지들… “스마트에디터에 라인스티커 기능을 추가하기” 프로젝트를 진행했습니다. 라인스티커는 캐릭터별로 종류가 굉장히 많죠? 네트워크 과부하를 줄이기 위해선 당연히 스프라이트 이미지를 사용해야합니다. 디자이너분은 캐릭터별로 스티커를 이쁘게 만들어주셨죠. 문제는 각 스티커마다 이미지 사이즈가 달랐던 것입니다. 위 이미지들로 키버튼을 만들어야하는데 이미지 사이즈가 각각 다르니 일정한 패턴의 좌표값을 사용할 수…read more

0