크로스 브라우징 검색 결과

해당 글 13건

Web Font - @font-face 적용 방법

Font(서체)의 사용 좀 더 흥미진진한 웹 사이트를 만들고 싶을 때 첫 번째로 고려하게 되는 것은, 표제어나 단락 등, 페이지를 구성하는 각 요소에 서로 다른 서체를 지정하는 것입니다. 최근의 모든 브라우저들은 웹 서체(Web Font)라는 것을 지원하며 사이트를 볼 때 다운되는 서체를 웹 폰트라고 합니다. 웹 폰트 또한 font-family 속성을 사용하지만, @font-face 지시어(directive)라는 CSS 명령어를 사용해서 웹 브라우저에게 해당 서체를 다운로드할 것을 알리면서 사용할 수 있습니다. 사용자는 이미 검증된 서체만 사용하는 방법을 택할 수도 있고(대부분의 컴퓨터에 설체된 기본 서체만 사용하는 방법), 아니면 웹 폰트를 사용해 더 많은 폰트 가운데 하나를 골라 쓰는 방법을 택할 수..
StyleSheet/CSS 2018. 10. 12. 11:03

custom input[type="file"] - 폼 커스텀 파일업로드 #1

input file type (디자인된 파일 업로드 타입) 기본 패턴의 파일 업로드 #1 - jQuery See the Pen 기본 패턴 파일 업로드 - jQuery by jaeheekim (@jaehee) on CodePen. 기본 패턴의 파일 업로드 #2 - jQuery See the Pen 파일 업로드 타입 #4 by jaeheekim (@jaehee) on CodePen. 기본 패턴의 파일 업로드 - javaScript See the Pen 기본 패턴 파일업로드 - Only javaScript by jaeheekim (@jaehee) on CodePen. 프로토타입 패턴의 파일 업로드 /** * -------------------------------- * Designed input[type=fi..
Code Lab 2016. 11. 1. 17:10

커스텀 라디오 버튼 - Designed radio button(custom radio)

커스텀 라디오 버튼 만들기 Basic Radio Button Type - jQuery See the Pen 커스텀 기본 라디오 버튼 #1 by jaeheekim (@jaehee) on CodePen. 생성자 함수 방식의 라디오 버튼 See the Pen 생성자 함수 방식의 라디오버튼 by jaeheekim (@jaehee) on CodePen. 프로토타입 방식 패턴 코드 HTML 마크업은 위와 동일합니다. javascript /** *--------------------------------- * custom radio button * -------------------------------- */ (function(global, $){ $(runRadio); function runRadio() { va..
Code Lab 2016. 9. 29. 13:19

커스텀 체크박스(designed checkbox ) - 체크박스 이미지(디자인)

체크박스를 이미지로 사용하기 체크박스에 이미지를 사용하는 방법에 대해 알아봅니다. 기본 패턴의 체크박스 See the Pen Basic checkbox jQuery by jaeheekim (@jaehee) on CodePen. 프로토타입 방식의 체크박스 /** * ----------------------------------- * Designed input[type=checkbox] * ----------------------------------- */ (function(global, $) { $(makeCheckbox); function makeCheckbox() { var checkbox = CustomCheckbox(); checkbox.init('.ctm-check'); } function Cu..
Code Lab 2016. 9. 29. 13:19

Modernizr.mq 활용편

모더나이저와 미디어쿼리 활용 앞선 글에서 모더나이저와 디텍타이저를 둘러봤다면 한 번쯤 사용해야겠다라고 생각할 것입니다. 특히, 현재 국내 트렌드상 RWD(반응형웹)를 구축해야하는 경우라면 커다란 이점을 가져다 줄 것입니다. 이 글에서는 모더나이저를 사용하면서 국내 환경의 RWD에 대처하는 방법을 강구해봅니다 미디어쿼리를 사용하기에 앞서 일반적으로 국내에서는 RWD의 환경에 적합하지 않는 것 같습니다. 물론 소규모 사이트의 경우는 적합하지만 콘텐츠가 많은 사이트의 경우는 절대 적합하지 않음에도 클라이언트는 그 요구를 관철시키려 하고 우리는 이를 수용해야만 합니다. 또한 RWD는 단어 의미론적으로도 알 수 있듯이 디자인에 반응하는 것이며 좀 더 구체적으로 디바이스에 따라 디자인을 달리하는 테크닉이라고 할 수..
Code Lab 2016. 9. 29. 13:16

Detectizr(디텍타이저) - 디바이스/플랫폼 탐지기능

Detectizr is a Modernizr extension Detectizr는 Modernizr의 확장 기능으로서 역할을 하는 서드파티(Third Party) 라이브러리입니다. 모더나이저는 신기술만을 체크할 뿐 사용자의 운영체제나 브라우저까지는 체크하지 않기 때문에 이에 대한 보완을 디텍타이저가 맡고 있습니다. 즉, Detectizr는 Modernizr의 플러그인이라고 할 수 있습니다. Github - Detectizr cdn - Detectizr Detectizr가 수행하는 일Device(디바이스)Device Model(디바이스 모델)Screen Size(화면 크기)Operating System(운영 체제)Operating System Version(운영 체제 버전)Browser(브라우저)Brows..
Code Lab 2016. 9. 29. 13:16

Modernizr(모더나이저)

브라우저 기능 검사를 위한 Modernizr 기존에는 브라우저 호환성을 유지하기 위해 Brower Sniffing 기법(자바스크립트의 navigator.userAgent 프로퍼티를 이용하는 방식)을 사용했습니다. 그러나 나날이 다양한 디바이스가 등장하고 HTML5와 CSS3가 웹표준으로 자리매김하고 있는 상황에서 브라우저마다 HTML5와 CSS3의 구현 정도가 달라 기존의 brower sniffing 방식으로는 이러한 브라우저간의 호환성을 유지한다는 것이 불가능에 가깝게 되어 이에 대한 대처 방안으로 Modernizr를 많이 사용하고 있습니다. Modernizr Intro 모더나이저(Modernizr)는 작은 크기의 오픈소스 자바스크립트 라이브러리로서, 사용자가 현재 이용중인 웹 브라우저에서 HTML5와..
Code Lab 2016. 9. 29. 13:15

Selectivizr - CSS3 선택자 크로스브라우징

IE 구형 브라우저에서 CSS3의 선택자 사용을 가능하게 해주는 방법에 대해 알아봅니다. Selectivizr 소개(CSS3 선택자를 IE에 적용) selectivizr는 CSS3 가상클래스와 속성 선택자를 에뮬레이트하여 IE6~8에도 해당 요소에 적용된 스타일을 볼 수 있게 하는 자바스크립트 유틸리티입니다. 해당 페이지에 selectivizr 스크립트를 인클루드만 하면 나머지는 자동으로 처리됩니다. selectivizr의 특성 1. IE에서 셀렉터 엔진을 향상시킵니다. IE 구버전에서도 19개의 CSS3 가상클래스와 2개의 가상요소, 그리고 모든 속성 선택자를 지원합니다. 2. 이 스크립트는 자동으로 처리되기 때문에 굳이 자바스크립트 전문 지식이 없어도 사용가능합니다. 심지어 스타일시트를 추가,수정할 ..
StyleSheet 2016. 1. 14. 17:00

모바일,태블릿에서 :active 의사 클래스 대체 방안

:active css pseudo class polyfill 일반적으로 활성화 가상클래스는 사용자가 눌렀다는 것을 인지하도록 사용하곤 합니다. 하지만 이 테크닉을 모바일에서 사용할 경우에 안드로이드 계열에서 CSS의 :active 가상클래스 동작여부는 가늠할 수 없습니다. 제조사로 인한 크로스플랫폼이 되지 않기 때문에 다른 방안을 강구해야 합니다. 이에 대해 알아봅니다. :active 활성 가상 클래스 대체 방법 다음의 해결 방법은 빠르고 간단합니다. javascript $('.active-element').on({ 'touchstart' : function () { $(this).addClass('fake-active'); }, 'touchend' : function () { $(this).remove..
Code Lab 2016. 1. 14. 13:26

CSS를 이용한 Box 높이 동일하게 맞추는 방법

Match box column height - 열의 높이를 맞추는 다양한 방법 CSS 디자인의 경우 다수의 열을 같은 높이로 맞춰야 하는 상황이 종종 발생합니다. CSS3를 이용하면 간단히 해결되지만, 이를 지원하지 않는 브라우저를 생각한다면 많은 고민을 필요로 하기에 이에 대한 방법을 알아봅니다. 열(Column)의 높이를 자동으로 맞추는 속성 활용 CSS 속성들 중에는 같은 부모의 자식 요소들 사이에서 자동으로 열의 높이를 맞추는 속성들이 있습니다. flex property flex 속성을 이용하면 매우 쉽게 원하는 결과를 얻을 수 있습니다. 대상 요소를 감싸는 부모요소(플렉스 컨테이너)에 display: flex 를 설정하고 대상요소들의 순서를 정해주면 간단히 구현할 수 있습니다. 다만 지원문법이 ..
StyleSheet/CSS 2016. 1. 7. 10:48

Respond.js

Media Query 크로스브라우징 - Respond.js 미디어쿼러 크로스브라우징을 위한 respondJS에 대해 알아봅니다. Respond.js Intro IE 6~8 버전에서 미디어쿼리를 해석할 수 있도록 만들어주는 자바스크립트 라이브러리입니다. 어떤 용도로 사용해도 제한이 없는 MIT 또는 BSD 라이선스를 가지고 있기 때문에 소스 코드에 포함된 라이선스 명시 조항만 지우지 않으면 github에서 언제든 내려받아 사용할 수 있습니다.Github - RespondDEMO VIEW Respond.js Usage(사용방법) IE8 이하 버전에서만 사용하도록 조건부 주석문을 사용합니다. 시작과 동시에 로딩이 되도록 에 위치시키고 respond.js는 웹서버 환경에서 테스트 해야 작동한다는 점을 기억하기 ..
Code Lab 2016. 1. 6. 17:35

Polyfill(폴리필) - 대체 방안

Polyfill : 충전솜폴리필의 사전적 의미는 충전솜입니다. 예를 들어 베개의 솜이 꺼졌을 때 다시 솜을 살리기 위해 넣는 충전솜처럼 대체 방안을 강구한다는 의미로 해석될 수 있습니다.Polyfill, Shims, Fallback이란 것들은 용어는 달라도 각각의 목적은 브라우저별로 다름(차이)없는 기능 구현이 목적입니다. 즉, 크로스 브라우징을 염두한 것입니다. Polyfill 이란?폴리필(polyfill)은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 말합니다. 폴리필은 HTML5 및 CSS3와 오래된 브라우저 사이의 간격을 메꾸는 역할을 담당하고 있습니다. HTML5 Cross Browser PolyfillsModernizr 에서 정리하여 제공하고 있..
HTMLㆍ웹표준ㆍ 웹접근성 2016. 1. 5. 21:16