Code Lab 검색 결과

해당 글 96건

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

썸네일 리스트형 배너이번 포스팅에서는 간단한 썸네일 리스트 배너를 작성해 보도록 합니다.(학습 목적으로 참고하시기 바랍니다.) Result ViewSee the Pen Thumbnail List Keyvisual by jaeheekim (@jaehee) on CodePen. JavaScript Source javascript var DUI = DUI || {}; (function (global, $) { DUI.gallery = function (selector) { var current = 0, thumbListSize = 6, thumbnail = $(selector), prev = selector + ' > .prev', next = selector + ' > .next', $container = ..
Code Lab 2016. 9. 12. 09:38

Accordion Menu Plug-in Type

아코디언 메뉴 플러그인 이 포스팅에서는 아코디언 메뉴타입의 플러그인을 소개합니다. DEMO ViewSee the Pen 아코디언 메뉴 플러그인 by jaeheekim (@jaehee) on CodePen. HTML html 메인메뉴 01 서브메뉴 01-1 01-1-1 01-1-2 01-1-3 01-1-4 01-1-5 서브메뉴 01-2 서브메뉴 01-3 01-2-1 01-2-2 01-2-3 메인메뉴 02 서브메뉴 02-1 02-1-1 02-1-2 02-1-3 02-1-4 서브메뉴 02-2 02-2-1 02-2-2 02-2-3 메인메뉴 03 서브메뉴 03-1 03-1-1 03-1-2 03-1-3 메인메뉴 04 서브메뉴 04-1 04-1-1 04-1-2 서브메뉴 04-2 04-2-1 04-2-2 04-2-3 ..
Code Lab 2016. 9. 8. 09:23

메뉴 슬라이딩 효과

Menu with sliding hover 이 글에서는 오버시 슬라이딩 오버효과를 사용해 봅니다. HTML html MENU 01 MENU 02 MENU 03 MENU 04 CSS css @import url(https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900); * { box-sizing: border-box; font-family: Raleway; } body { text-align: center; background-color: #f96; } .menu-container { display: inline-block; position: absolute; top: 50%; left: 50%; transfor..
Code Lab 2016. 6. 17. 10:15

1단 메뉴 jQuery Study #2

1단 메뉴 제이쿼리 스터디 단계별 학습 #2 이 글에서는 1단 메뉴 단계별 학습 #1의 코드를 가지고 jQuery 플러그인으로 만드는 방법에 대해 알아봅니다. 플러그인은 어디에나 꽂을 수 있도록 만드는 목적이 있기에 여기서는 동일한 1단 메뉴를 2개 만들어 테스트해보도록 합니다. HTML 2개의 동일한 1단 메뉴에 대한 마크업은 다음과 같습니다. html MENU 01 MENU 02 MENU 03 MENU 04 MENU 05 First MENU Second MENU third MENU forth MENU 04 fifth MENU 05 CSS css * { padding:0; margin:0; } body{ font-size:9pt; } #barMenu1 { position:relative; left:10..
Code Lab 2016. 6. 15. 13:24

1단 메뉴 jQuery Study #1

1단 메뉴 제이쿼리 스터디 단계별 학습 #1 이 글에서는 제이쿼리 그리고 자바스크립트의 생성자함수 및 프로토타입을 이용하여 심플한 1단 메뉴를 구현해 보는 시간을 가져보겠습니다. 다음 단계별 학습 #2를 통해서는 이 1단 메뉴를 플러그인 타입으로 리팩토링해 보도록 하겠습니다. HTML 간단한 1단 메뉴를 위해 다음과 같은 마크업을 작성합니다. html MENU 01 MENU 02 MENU 03 MENU 04 MENU 05 CSS 1단 메뉴에 대한 스타일시트는 다음과 같이 준비합니다. css * { padding:0; margin:0; } body{ font-size:9pt; } #barMenu1 { position:relative; left:100px; top:100px; width:450px; over..
Code Lab 2016. 6. 15. 10:52

jQuery 사용자 유틸리티 - 세자릿수 콤마 찍어보기

$.유틸리티함수() 이 포스팅에서는 3자리수마다 콤마(,)를 추가하는 유틸리티를 만들어 봅니다. 예를 들어 숫자 1234567 이 있다면 1,234,567 와 같이 콤마를 추가하는 유틸리티 함수 구현 방법에 대해 간단히 소개합니다. JavaScript Source javascript $.addComma = function (value) { // 숫자를 문자열로 형변환한다 // 아래의 string 메서드 중 배열로 반환해주는 split 메서드를 사용하기 위해 문자열로 변환한 것이다 var data = value + ""; // 문자를 배열로 만들기 var arrResult = data.split(""); // 배열 요소를 뒤에서 3자리수마다 콤마 추가하기 var startIndex = arrResult.l..
Code Lab 2016. 6. 2. 14:17

match box height (같은 박스 높이값을 설정하는 스크립트)

Match Height Box이 포스팅에서 소개하는 소스는 박스간의 높이값을 동일하게 만들어주는 스크립트입니다.CSS3를 이용하면 컬럼들 간의 높이값을 설정하는 것이 가능하지만 아직까지는 지원이 미흡한 실정입니다.이 소스는 data-compare-height="2" 로 기본으로 설정되어 있으며 .box를 찾아서 같은 높이값을 만들도록 합니다.data 속성값인 number 값을 변경하여 커스텀 가능합니다. 예) data-compare-height="3" 이 경우 3개씩 박스가 같은 높이값을 반환합니다. HTML다음의 마크업은 match box height 에 사용되며 data-compare-height="2"와 매치시킬 박스의 클래스를 .box로 정의하면 사용자 정의하여 사용하실 수 있습니다. html 공..
Code Lab 2016. 5. 29. 07:30

Vertical 3depth LNB Menu type(세로형 3뎁스 메뉴타입)

Vertical 3depth LNB Menu type 이 포스팅에서는 3depth 타입의 세로형 메뉴에 대해 소개하고자 합니다. 해당 CSS는 프로젝트 환경에 적합하도록 커스텀하여 사용하시기 바랍니다. HTML html LNB 타이틀 1Depth - 2Depth - 3Depth - 3Depth - 3Depth - 2Depth - 3Depth - 3Depth - 2Depth - 2Depth 1Depth - 2Depth - 3Depth - 3Depth - 2Depth - 3Depth - 3Depth - 3Depth 1Depth - 2Depth - 2Depth 1Depth - 2Depth - 2Depth CSS css * {margin: 0;padding: 0;} body {width: 700px;margin..
Code Lab 2016. 5. 28. 07:00