Code Lab 검색 결과

해당 글 96건

커스텀 체크박스(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

Accessibility Layer Popup(접근성 레이어 팝업 코드)

Accessibility Layer Popup 이 포스팅에서는 접근성 레이어 팝업에 대한 소스를 알려드립니다. 해당 레이어 팝업은 레이어를 열고 닫을 때에 포커스 이동과 열었을 경우 해당 레이어에서 닫기를 하지 않으면 레이어 밖으로 포커스가 이동하지 않도록 하여 웹 접근성을 최대한 준수하고 있습니다. 그리고 dimmed 처리를 하고 있지 않기 때문에 사용자가 추가하여 사용하시기 바랍니다. HTML html 레이어 보기 레이어 타이틀 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, inventore. Lorem ipsum dolor sit amet, Dicta, inventore. Lorem ipsumpisicing elit. Dicta,..
Code Lab 2016. 9. 29. 13:14

심플 롤링 배너(생성자 함수) - 단계별 학습 #4

다형성 및 합성을 이용한 심플 롤링 배너 - 단계별 학습 #4 이 글에서는 단계별 #3에 이은 마지막 스텝으로 객체 지향 프로그래밍의 핵심 기능인 다형성과 합성을 활용한 기능 확장 방법에 대해 알아봅니다. 전 단계에서는 롤링 효과가 한가지였으나 여기서는 4가지의 독립적인 롤링 효과를 합성하여 사용해보도록 합니다. HTML 4가지 롤링 효과를 적용하기 위한 다음과 같은 마크업이 있습니다. html CSS css body { margin: 20px auto; width: 700px; } .rolling-banner{ position:relative; float: left; overflow:hidden; border:2px solid #000; width:40%; height:150px; margin: 10p..
Code Lab 2016. 9. 29. 13:13

심플 롤링 배너(생성자 함수) - 단계별 학습 #3

상속을 활용한 심플 롤링 배너 - 단계별 학습 #3 이 글에서는 단계별 학습 #2에 이어 생성자(클래스) 상속을 활용해 기능을 확장하는 방법에 알아봅니다. 그리고 일반적인 롤링 배너의 경우 배너 영역에 마우스가 들어오는 경우에 롤링 효과가 멈추가 마우스가 배너 영역 밖으로 나가는 경우 다시 롤링되는 기능을 가지고 있는데 이 기능을 상속을 통해 좌측 롤링 배너에만 적용하여 구현해 보도록 합니다. HTML & CSS 마크업 및 CSS는 기존에 진행한 단계별 학습 #2와 동일하며 자바스크립트 소스만 알아보도록 하겠습니다. JavaScript javascript $(function () { // 인스턴스 생성 // 롤링 배너 인터벌 3초 지정, 롤링 애니메이션효과 1초 var rolling1 = new Roll..
Code Lab 2016. 9. 29. 13:13

심플 롤링 배너(생성자 함수) - 단계별 학습 #2

심플 롤링 배너 #2 이 포스팅은 단계별 학습 #1에서 진행했던 코드를 리팩토링하여 좀더 확장한 코드를 소개합니다. 마크업 단계별 학습 #1에서는 하나의 롤링배너만을 구현했지만 여기서는 여러개의 배너를 사용할 수 있도록 확장해 보도록합니다. html CSS css .rolling-banner{ position:absolute; overflow:hidden; border:2px solid #000; } .rolling-banner img{ position:absolute; top:0; left:0; width:100%; height:100%; } #banner1 { top:250px; left:50px; width:400px; height:200px; } #banner2 { top:250px; left:5..
Code Lab 2016. 9. 29. 13:13

심플 롤링 배너(생성자 함수) - 단계별 학습 #1

심플 롤링 배너 시작하기 이 포스팅에서는 생성자 함수, 프로토타입을 이용한 심플한 롤링 배너 구현 방법,원리에 대해 단계별 학습 진행해 보도록 합니다. 단계별 학습 중 첫 번째 단계이며 맨 하단의 링크를 통해 단계별 학습을 진행해 보세요. 마크업 html CSS css .rolling-banner{ position:relative; top:100px; left:100px; width:400px; height:200px; overflow:hidden;; border:2px solid #000; } .rolling-banner img{ position:absolute; top:0; left:0; } JavaScrip javascript ion () { // 인스턴스 생성 var rolling1 = new R..
Code Lab 2016. 9. 29. 13:13

Layer Pop-up(레이어 팝업) - 플러그인 타입 코드

Dialog (레이어 팝업) - 프로토타입 버전 이 글에서는 일반적으로 사용되는 레이어 팝업에 대한 소스를 공개합니다. 접근성 포커스 이동이 가능한 레이어 팝업이며, 자세한 것은 아래의 소스를 참고하시기 바랍니다. 사용시 문제가 있을 경우 댓글 부탁드립니다. 참고하여 해결하도록 하겠습니다. Dialog Source 다음은 레이어 팝업에서 사용되는 콘텐츠 및 버튼 참고 마크업입니다. html 레이어팝업 보기 로그인 팝업창 닫힘 Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem ipsum dolor sit amet, ipisicing. Lorem ipsu consectetur adipisicing. 1주일간 보지 않기 CSS 참고용 다음은 팝업 콘텐츠에..
Code Lab 2016. 9. 29. 13:12

Layer Pop-up (레이어 팝업)

일반 레이어 팝업 & 딤(Dim)처리 레이어 팝업 이 포스팅에서는 간단한 레이어 팝업에 대해 알아봅니다. 하단의 참조 링크에 다양한 타입의 레이어 팝업도 참고하시기 바랍니다. Simple Layer Pop-up See the Pen xwRNdQ by jaeheekim (@jaehee) on CodePen. Related links 심플 애니 레이어팝업 일반 팝업 Layer Pop-up (레이어 팝업) Layer Pop-up(레이어 팝업) - 플러그인 타입 코드 Accessibility Layer Popup(접근성 레이어 팝업 코드) Pure CSS : Layer-popup Auto center box #1 Pure CSS : Layer-popup Auto center box #2 Jaehee's WebC..
Code Lab 2016. 9. 29. 13:11

심플 애니 레이어팝업

Simple Animated Dialog 이 포스팅에서는 CSS3를 이용한 애니메이션 레이어 팝업에 대해 둘러봅니다. 참고로 SCSS를 컴파일한 CSS임을 알려드립니다. Source IE9이하에서는 동작하지 않을 수 있습니다. See the Pen 심플 애니 레이어팝업 by jaeheekim (@jaehee) on CodePen. SCSS Type css $bg-color: #f1f1f1; $text-color: #333333; $highlight-color: #E74C3C; * { box-sizing: border-box; } body { background: $bg-color; color: $text-color; font-family: 'Cairo', sans-serif; font-size: 16px..
Code Lab 2016. 9. 29. 13:09

thumbnail list banner #2(플러그인 타입)

썸네일 리스트형 배너 플러그인 타입 이번 포스팅은 앞선 썸네일 리스트형 배너 함수형 타입을 플러그인화 시킨 코드입니다. Result View See the Pen Thumbnail List Keyvisual #2 by jaeheekim (@jaehee) on CodePen. JS : PlugIn Source javascript /** * ================================+ * @plugin : thumbnail list banner * ================================+ */ (function (global, $) { var pluginName = 'thumbBanner'; function ThumbVisual($selector, options) { th..
Code Lab 2016. 9. 13. 08:17