code 검색 결과

해당 글 25건

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

반응형 유튜브 동영상 삽입하기 - Responsive YouTube Video

Responsive YouTube Video & Object유튜브와 같은 미디어는 고정된 높이와 너비를 제어하여 추가하기 때문에 브라우저 크기나 장치의 폭에 따라 크기를 조정할 필요가 있을 경우 문제가 될 수 있습니다.다시 말해, 반응형 웹에서 일반적인 유튜브 소스코드를 추가할 시에 모바일,태블릿,스크트톱에서 원치않는 사항에 직면하게 될 것입니다.이렇듯 반응형 웹에서 유튜브 동영상과 같은 미디어를 다루는 방법에 대해 간단히 알아봅니다. 일반적인 마크업 구조유튜브 동영상을 삽입시에 다음과 같은 마크업을 할 수 있습니다. html 위와 같이 유튜브 소스를 아이프레임으로 삽입시에 아이프레임을 감싸주는 부모 컨테이너와 같은 요소가 필요합니다. CSS 구성 css .video-container { position..
StyleSheet/CSS 2016. 9. 30. 08:20

Dropdown Menu BootStrap

Analysis dropdown Menu Bootstrap 부트스트랩에서 사용되는 드롭다운 메뉴 코드를 소개합니다. 아래의 코드는 웹에서만 사용 가능하도록 리얼 부트스트랩의 코드를 조금 제거하였으며 국제 웹접근성(ARIA)를 준수하고 있습니다. HTML 다음의 마크업에는 ARIA가 적용되어 있습니다. html 첫번째 메뉴 서브메뉴 1-1 서브메뉴 1-2 서브메뉴 1-3 서브메뉴 1-4 두번째 메뉴 서브메뉴 2-1 서브메뉴 2-2 서브메뉴 2-3 서브메뉴 2-4 CSS 다음의 스타일은 사용자 디자인에 적절하도록 커스텀 사용하시기 바랍니다. css a { color: #337ab7; text-decoration: none; } .container { padding-right: 15px; padding-lef..
Code Lab 2016. 9. 29. 13:25

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

탭 메뉴 프로토타입 Ver.1 - tab menu

tab menu prototype Ver. 1 프로토타입 기반의 탭 메뉴 버전입니다. data-* 프로퍼티로 컨트롤되는 탭메뉴에 대해 알아봅니다. 마크업 구조 다음은 탭 메뉴에 대한 마크업 구조입니다. html 재취업 소식 창업 소식 두줄 탭 그외 소식 재취업 소식에 대한 내용 Lorem ipsum dolor sit amet, elit. Est, sapiente. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, sapiente. Lorem ipsum dolor sit amet, sapiente. 창업소식에 대한 내용 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, sapient..
Code Lab 2016. 2. 28. 13:35

Tooltip UI - 툴팁 레이어

간단한 Tooltip layer 구현해보기 웹 서비스시에 많이 사용되는 툴팁에 대해 알아봅니다. Tooltip Layer 툴팁을 마크업할 시에 접근성을 고려하여 툴팁 타켓(대상)과 툴팁 콘텐츠를 맵핑(연결)시키도록 합니다. html Lorem ipsum dolor sit amet, consectetur 툴팁 레이어 보기 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, quam. Lorem ipsum doloisicing elit. Iste, quam. Lorem ipsumdipisicing elit. Iste, quam. Lorem ipsum dolor sit amet, Iste, quam. Lorem ipsum dolor sit amet..
Code Lab 2016. 1. 26. 08:47

RequireJS 의 모듈

requireJS 모듈 정의와 호출 Javascript는 사용하기 편한만큼 편함에 너무 의존하다보면 돌이킬 수 없는 스파게티 코드나 중복 코드 발생이 많아질 수 있어, 모듈 프로그래밍이 필요합니다. RequireJS는 이러한 경우의 한 대안이 될 수 있습니다. RequireJS를 사용하면 모듈 생성/호출 등 관리를 통해 좀 더 체계적인 프로그래밍을 가능하게 해 주며, 브라우저 지원 또한 IE 6 이상 지원합니다. RequireJS에서 모듈 정의/호출에 사용되는 함수 - 모듈 정의 Module Define - 모듈 호출 Module Require 모듈 정의 / 호출 방식은 다음과 같습니다. javascript /** * -------------------------------------- * 모듈 정의 *..
Web Tech/RequireJS 2016. 1. 25. 13:54

RequireJS - module loader(모듈 로더)

JS 모듈 관리(Javascript Modules Management) RequireJS 는 자바스크립트 파일/모듈 로더입니다. 브라우저 환경에서 최적화되어 있으나 Node 와 같은 다른 자바스크립트 환경에서도 사용될 수 있습니다. 그렇다면 모듈 로더는 무엇인가?! JAVA 나 그 밖의 다른 서버사이드 언어는 파일을 include 하여 사용할 수 있으나 자바스크립트 자체로는 file01.js 파일로부터 다른 file02.js 파일을 include 할 수 있는 방법이 없습니다. 하지만 이를 해결할 수 있는 여러가지 방법이 존재하고 있으며 이러한 방법을 통해 자바스크립트 파일들 서로 간에 의존성/종속성 관리를 할 수 있습니다. 여러가지 방법 중의 하나인 RequireJS 와 같은 모듈 방식의 스크립트 로더를..
Web Tech/RequireJS 2016. 1. 25. 13:40

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

스크롤 메뉴(Scroll Menu) 구현해보기

Scroll Menu 주로 프로모션용 웹페이지나 사이트의 메인페이지에 많은 내용의 콘텐츠를 보여줄 때 사용합니다. 대개 메뉴를 클릭하면 해당 메뉴 섹션으로 스크롤이 이동하여 섹션의 내용이 화면에 보이도록 UI를 구성합니다. Temp Mark-up html header 메뉴 1 메뉴 2 메뉴 3 상단으로 섹션 1 섹션 2 섹션 3 푸터단 Temp CSS css .header { position: relative; height: 200px; background-color: #ffccec;} /* contents */ .section-01,.section-02,.section-03 { position: relative; height: 600px; } .section-01 { background-color: #..
Code Lab 2016. 1. 18. 08:46

Accordion Pattern Collection(아코디언 메뉴)

아코디언 메뉴 타입 모음 아코디언 메뉴에 대한 다양한 자바스크립트 코드 패턴을 알아봅니다. 아코디언 메뉴 JS 패턴 #1 See the Pen 아코디언 메뉴 패턴 #1 by jaeheekim (@jaehee) on CodePen. 아코디언 메뉴 JS 패턴 #2 클릭했던 메뉴를 다시 클릭하면 닫히지 않고 다른 메뉴를 클릭해야만 닫히도록 구현한 경우입니다. See the Pen 아코디언 패턴 #2 by jaeheekim (@jaehee) on CodePen. 아코디언 메뉴 JS 패턴 #3 삼항 연산자를 이용한 패턴입니다. See the Pen 아코디언 패턴 #3 by jaeheekim (@jaehee) on CodePen. 아코디언 메뉴 JS 패턴 #4 객체 리터럴 방식으로 싱글톤 패턴입니다. See the..
Code Lab 2016. 1. 15. 15:54

jQuery skip navigation 플러그인

웹 접근성 강화를 위한 Skip Navigation Plugin Pattern 웹 사이트 제작시 많이 사용되는 스킵 네비게이션에 대해 알아봅니다. 접근성 강화를 위한 스킵 네비게이션을 플러그인화 시켜보고 뒤로가기(shift+tab)을 눌렀을 때에도 올바른 접근을 하도록 구현해 봅니다. Navi 마크업 일반적인 마크업 구성은 아래와 같습니다. 사용자 콘텐츠에 적합하게 구성하시되 네비 항목의 맵핑만 주의하시면 됩니다. html art-5 art-6 art-7 art-8 art-9 art-10 jQuery.fn.skipNav() 플러그인 한글 로렘입숨. 가슴을, 소리. 한글 로렘입숨. 찬란한, 청춘의, 설레는. 햇볕처럼 설레게 빛나는 설레는 피어나는 해도, 숨소리가, 꽃보다 땀 젊음의. 꽃처럼, 찬란한. 어디..
Code Lab 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