WIT – NTS UIT Blog

CSS3로 구현된 페이지의 IE7~9 대응 이야기

Posted by in Research

들어가기 CSS3를 활용한 모바일 페이지를 최대한 HTML 수정없이 IE 하위 버전에서도 정상노출하기 위한 테스트를 진행하였었습니다. 이를 위해 조사해보니 다양한 방법이 있어, 그 중 몇가지 적용 사례를 소개합니다. 가상선택자(:before, :after, …), box-sizing:border-box (IE7) 하위 버전 IE에서 지원하지 않는 속성을 지원하기 위한 스크립트를 사용하였습니다. 아래 코드를 head 안에 넣어서 사용합니다.

가상 선택자는, CSS3문법인 더블콜론(::)과 CSS2문법인 싱글콜론(:) 문법을 가지고 있습니다. IE 하위 버전에서는 CSS2문법인 싱글콜론만 지원하여, 더블콜론을 싱글콜론으로 변환해주어야합니다.

더 자세한 사용법은 아래 URL에서 확인할 수 있습니다. https://code.google.com/p/ie7-js/ background-size:cover (IE7/IE8) IE8 이하 버전에서 background-size:cover 속성을 지원하지 않습니다. 이 경우 두가지 방법을…read more

Sass(CSS Preprocessor) 기초

Posted by in Research

Sass란? 책에서는 이렇게 설명합니다. “Sass는 css전처리기로 .css 파일 중간에 위치하는 하나의 계층입니다. Sass는 보다 간결하고 격식을 갖춘 css 문법을 제공하며, 스타일시트를 쉽게 관리할 수 있는 다양한 기능을 구현합니다.” 대체 이게 뭔소리인가… 혼란스럽습니다. 좀 더 풀어서 접근해보면.. “Sass는 css를 만들어주는 언어로 자바스크립트처럼 특정 속성(ex. color, margin, width … )의 값(ex. #000, 3px, 420px … )을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 해주는 등의 기능을 가졌습니다.” 사실.. 이런 이론적인 설명만으로는 전혀 감이 오지 않습니다. 그러나 앞으로 접하게 될 예제들을 통해 “아! 이런녀석이구나~” 라고 감을…read more