Web Club

Code Lab 검색 결과

해당 글 96건

Dropdown with Multiple checkbox select with jQuery

jQuery 를 이용한 체크박스, 콤보막스 SourceSee the Pen Dropdown with Multiple checkbox select with jQuery by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

Code Lab 2017. 4. 25. 07:00

탭메뉴 플러그인 및 CSS Animation

tab-menu plugin & CSS3 Animation SourceSee the Pen tab plugin & css animation by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

Code Lab 2017. 3. 11. 10:30

slide gallery(fade effect)

페이드 효과 배너타입 이 포스팅에서는 페이드 효과를 이용한 배너 타입 코드를 소개합니다.아래 코드펜을 참고하세요.SourceSee the Pen 페이드 효과 갤러리 by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

Code Lab 2017. 3. 8. 17:20

Infinite rolling slider type(무한 롤링 슬라이드), gallery

Slider Type아래의 소스는 무한 롤링이 되는 슬라이드 타입으로 플레이,정지버튼을 포함하고 있습니다.스터디 목적으로 작성한 코드로서 잠재적인 버그가 있을 수 있으니 참고바랍니다. Source PreviewSee the Pen 무한 롤링 배너(플레이버튼 포함) by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

Code Lab 2016. 12. 22. 09:32

thumbnail list banner #1 - (ver2. 함수형 타입)

썸네일 리스트형 배너이 포스팅의 코드는 thumbnail list banner #1 ver1을 업데이트한 함수형 타입 코드입니다. Source OverviewSee the Pen Thumbnail List Keyvisual #1(Ver.2) by jaeheekim (@jaehee) on CodePen. related links thumbnail list banner #1 (ver1. 함수형 타입) Jaehee's WebClub

Code Lab 2016. 12. 15. 09:25

vertical sliding tab type(세로형 탭타입의 슬라이딩 배너)

Vertical Slide TabType 다음의 소스는 세로형 탭 형식의 슬라이딩 배너입니다. HTML 다음의 마크업은 슬라이딩 배너에 사용되는 소스입니다. html 스포츠 포토 패션 포토 동물 포토 CSS 다음의 소스는 css 소스로 사용자 정의에 맞게 다시 정의하여 사용하기 바랍니다. css *{margin: 0;padding: 0;} body {font-size: 12px;margin: 50px;} li {list-style: none;} .slide-v {margin-top: 30px} .slide-v:after {clear: both; display:block; content:""} .slide-v .tab {float: left; width: 122px;height: 114px;border: ..

Code Lab 2016. 12. 14. 12:38

Responsive Background Image Fade on Scroll

스크롤시 백그라운 이미지 페이드인 처리하기 Source PreviewSee the Pen 스크롤시 백그라운드 이미지 페이드인 처리 by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

Code Lab 2016. 11. 26. 07:00

커스텀 파일업로드 타입(file-upload) -접근성고려 #2

웹 접근성 파일업로드 타입 이 포스팅의 인풋 타입의 파일 업로드는 디자인 커스텀이 가능할 뿐만 아니라 접근성 포커스 이동까지 준수한 파일 업로드입니다. 현재 포커스시의 색상은 빨간색 타입의 dotted 로 정의되어 있습니다. HTML html 파일 업로드 찾아보기 CSS css * { margin: 0; padding: 0; } body { width: 700px; margin: 40px auto; } /* input file type */ .input-file { display: inline-block; } .input-file [type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: h..

Code Lab 2016. 11. 1. 17: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

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

워터마크 기능 구현

Watermark /* watermark on input text */ if(typeof String.prototype.trim !== 'function') { String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); } } var $input_list = $('.ipt-text'); $.each($input_list, function(idx, item){ var $input_text = $input_list.eq(idx); var watermark = $input_text.val(); $input_text.on('focus blur', function(e){ var $this = $(this), focusValue = $th..

Code Lab 2016. 9. 29. 13:25

Browser & OS Check 및 IE 멀티클래스

Browser & OS 체크와 IE 크로스브라우징을 위한 멀티 클래스 추가하기 브라우저와 OS를 체크하고 IE 크로스브라우징을 위한 IE 전용 클래스를 html 에 추가하는 코드입니다. Browser, OS Check & IE multiClass javascript var DUI = {}; DUI.check = { siteCode : window.LOCALE ? window.LOCALE : '', browser : (function () { var agent = navigator.userAgent; var browserList = { 'ie7' : agent.match(/msie 7.0/i), 'ie8' : agent.match(/msie 8.0/i), 'ie9' : agent.match(/msie 9...

Code Lab 2016. 9. 29. 13:23

IE9이하 custom placeholder 처리하기

Custom Placeholder 플레이스 홀더는 브라우저마다 조금씩 다르게 구현되어 있습니다. 예를 들어, Chrome 은 텍스트 필드에 키값이 입력되어질 때 플레이스홀더 마킹이 사라지고 키값에 대한 텍스트를 모두 지웠을 경우에 플레이스홀더 마킹값이 나타나게 됩니다. 그리고 IE10이상에서의 플레이스홀더는 텍스트 필드에 포커스가 갈 경우에 바로 플레이스홀더 마킹이 사라지게 됩니다. IE9이하에서는 플레이스홀더가 지원하지 않기 때문에 IE9이하를 위한 사용자 플레이스홀더를 알아보도록 합니다. IE9이하 Custom Placeholder 다음의 사용자 플레이스홀더는 IE10이상은 오리지널 플레이스홀더를 사용하고 IE9이하에서만 사용자 플레이스홀더를 지원하도록 합니다. 그리고 IE10이상의 오리지널 플레이스..

Code Lab 2016. 9. 29. 13:22

input type X 버튼 크로스브라우징 - input clear button

IE 10이상의 input type의 X 버튼 구현하기 IE 계열에서 생기는 X 버튼을 모든 브라우저에서 동일하게 구현해 봅니다. IE input type의 clear 버튼 See the Pen IE input type clear button by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

Code Lab 2016. 9. 29. 13:22

커스텀 라디오 버튼 - 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