Utility 검색 결과

해당 글 10건

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

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

필수적인 제이쿼리 플러그인 패턴

Essential jQuery Plugin Patterns 자바스크립트에서는 일반적인 개발 문제를 해결하기 위해 입증,검증된 좋은 방법인 Design Pattern(설계 패턴)을 사용함으로써 유용한 이익을 얻을 수 있습니다. 공식 jQuery 플러그인 작성가이드와 Widget 도 훌륭한 출발점을 제공하지만 또 다른 플러그인 디자인 패턴을 살펴보도록 하겠습니다. 플러그인의 개발은 지난 몇 년동안 많은 진전을 해 왔습니다. 우리는 더이상 플러그인을 하나의 방식으로 작성하지 않습니다. 실제로, 플러그인의 특정 패턴은 다른 이슈에 있어서 더 나은 사용성을 제공할 수 있을 것입니다. 일부 개발자들은 jQuery UI widget factory 를 사용할 수 있습니다. 그것은 복잡하고 유연한 UI 구성 요소에 유용..
Web Tech/jQuery 2016. 9. 28. 18:08

jQuery 유틸리티 사용자 메소드 정의 - jQuery utility method

jQuery 유틸리티 사용자 메소드 정의하기 $.each(), $.data() 와 같은 유틸리티 메소드처럼 사용자 정의 유틸리티 메소드를 알아봅니다. 나만의 $.$() 유틸리티 메소드 정의 지금 작성하려고 하는 유틸리티 메소드는 요소를 탐색할 때 탐색했던 요소를 다시 탐색하지 않기 위한 메소드를 정의하려고 합니다. 이는 성능 최적화에 도움이 될 수 있을 것입니다. 다음의 코드는 $.$() 유틸리티 메소드를 만들고 현재 제이쿼리에서 제공되는 $.data() 유틸리티 메소드를 사용할 것입니다. javascript /** * --------------------------------------------------------------------------- * 요소를 탐색할 때 탐색했던 요소를 다시 탐색하지..
Web Tech/jQuery 2016. 1. 20. 09:00

jQuery.expr[':'] 확장 및 활용 방법 - jQuery 가상 선택자 사용자 정의

jQuery.expr.pseudos 확장(사용자 정의 방법)과 활용 :hidden, :visible 과 같은 제이쿼리의 가상 선택자를 사용자가 직접 정의, 확장하는 방법에 대해 알아봅니다. jQuery.expr.pseudos 확장 사용자 정의 가상 선택자를 확장하는 Sizzle 엔진의 새로운 방법은 jQuery.expr.createPseudo() 메소드를 사용하는 것입니다. 이 메소드는 사용자가 직접 정의한 가상 클래스 선택자에 메타 값을 입력하는 경우에만 사용할 수 있습니다. 아래 코드를 간단히 살펴봅니다. javascript // jQuery.expr[':'] === jQuery.expr.pseudos $.expr[':'].btn = $.expr.createPseudo( function(meta){ ..
Web Tech/jQuery 2016. 1. 19. 10:49

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

fixed header on scroll

스크롤시 헤더 보이거나 숨기기 사용자의 스크롤을 감지하여 원하는 요소에 동작을 추가하는 것으로 일반적으로 상단의 네비게이션에 자주 이용되고 있습니다. 기존의 고정(Fixed)된 네비게이션이 차지하는 화면의 비율을 없애고 사용자의 반응에 따라 네비게이션이 등장함으로써 좀 더 유연하게 화면의 가시영역을 확보할 수 있습니다. 이러한 UI를 sticky, spy, floating (sticky header, sticky tab, floating menu, spy tab...)등으로 불려지고 있으니 참고하기 바랍니다. 고정된 헤더(네비게이션) 사용성 부족 많은 웹사이트에서 네비게이션 탐색에 도움을 주기위해 상단의 헤더(네비게이션을 포함한)를 CSS의 포지셔닝을 사용해 position: fixed 와 같이 고정해 ..
Web Tech/jQuery 2016. 1. 11. 08:40