JS 가이드 문서 wisdom.js 및 common.js 에 대한 가이드

기본적으로 jQuery 파일을 필요로 하며, 필요여부에 따라 추가적인 플러그인 ( Trasition 을 위한 easing.js와 드래그 컨트롤을 위한 drag.js )등을 필요로 합니다.

정해진 규격에 따라 HTML 마크업이 필요한 경우 HTML 섹션을 참고하여 마크업을 구성해야 하며, 자세한 소스 코드는 비스톤스 CodeConvention 상에서 확인 가능합니다.

또한 예제 섹션의 샘플들은 전부 좀더 명확한 확인을 위해 부트스트랩을 이용한 CSS 디자인이 적용된 사례로, 기본적으로 대다수의 플러그인들은 확장성을 고려하여 CSS 디자인은 되어있지 않습니다. ( 기능구현을 위한 필수 요소들은 제외 )

레이어 팝업

기본 설명

레이어 팝업은 common.js 에 포함되어 있으며, jQuery 파일이 필요합니다.

레이어 팝업은 최소한의 마크업만으로 작동합니다.

기본 클래스와 몇가지 마크업 규격만 따르면, 별도의 이벤트 스크립트를 작성할 필요없이 바로 작동합니다.
단, 최소한의 기능 구현만 되어있기 때문에 width, height를 비롯한 CSS 디자인은 직접 구현 해야합니다.

HTML

버튼의 기본 클래스를 layer_btn으로 지정하고, 레이어 팝업의 기본 클래스를 layer_pop 으로 지정합니다.
또한 레이어 팝업내에 layer_close 클래스를 지정하면 닫기 기능이 자동으로 활성화됩니다.

Javascript

레이어 팝업을 활성화 시킬 버튼의 클래스를 선택자로 openLayer함수에 레이어 팝업을 매개변수로 전달합니다.
한 페이지 내에 2개 이상의 레이어 팝업을 사용할 경우에는 추가 스크립트 작성이 필요합니다. 

					$('.layer_btn').on('click',function() {
						openLayer('layer_pop');
					});

					$('.layer_close').on('click',function() {
						closeLayer('layer_pop');
					});

					// 레이어팝업2, 레이어팝업3
					$('.layer_btn2').on('click',function() {
						openLayer('layer_pop2');
					});

					$('.layer_btn3').on('click',function() {
							openLayer('layer_pop3');
						});

					$('.layer_close').on('click', function() {
						closeLayer('layer_pop2')
						closeLayer('layer_pop3')
					})
닫기

레이어팝업

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

닫기

레이어팝업2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

닫기

레이어팝업3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Slick

기본 설명

Slick을 구동하기 위해서는 jQuery 파일과 slick.js 파일이 필요합니다.
Slick은 외부 플러그인으로 https://github.com/kenwheeler/slick/ 에서 다운로드 받을 수 있습니다.

특징

  • jQuery 기반의 플리킹 내비게이션 플러그인
  • 마크업 요소 선택에 제약이 없으며 초보자도 쉽게 사용하도록 설계
  • CSS Selector에 따라 다중 적용 가능
  • jQuery 1.7+, IE8 지원
( 하단의 예제는 육안으로 쉽게 확인하기 위해 추가적인 CSS를 작성한 상태입니다. )

기본 예제

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

HTML

div나 ul 등, 콘텐츠 부모 요소에 slick.js를 설정할 클래스를 지정합니다.
화살표 디자인 변경을 필요한 경우 button 요소를 마크업합니다. 

						
						

							 
    
								
  • content 1
    • 
						        
  • content 2
    • 
						        
  • content 3
    • 
						        
  • content 4
    • 
							 

						

						

							
							
						

							
						
						

							 
    
								
  • 1
    • 
								
  • 2
    • 
								
  • 3
    • 
								
  • 4
    • 
								
  • 5
    • 
								
  • 6
    • 
								
  • 7
    • 
								
  • 8
    • 
								
  • 9
    •

CSS

콘텐츠 요소인 li나 div에 float:left를 줍니다. 화살표나 도트 등 button 디자인이 필요한 경우, CSS를 통해 디자인합니다.
하기 예제 코드는 가장 기본적인 구조의 CSS Rule이며, 육안으로 확인을 위한 backgroud 속성과 width, height등은 직접 디자인해야 합니다. 

						.slick {overflow:hidden;}

						/* 기본 슬라이드 */
						.slick .slide li {float:left;height:150px;}
						
						/* 콘텐츠가 3개 보이는 슬라이드 */
						.slick .multiple_slides li { float:left;height:150px;text-align:center;}
						.slick .multiple_slides li h4 {margin-top:65px;color:#fff;font-size:30px;}

						/* 화살표 디자인 */
						.btn_area { text-align:center; overflow:hidden; }
						.btn_area button { display:block; width:100px;font-size:16px; color:#fff; font-weight:bold; border-radius:0; }

						/* 기존도트 숨기고 li를 css로 디자인. button:after로도 디자인 가능 */
						.slick .slick-dots {position: absolute; bottom:20px; left:50%; transform: translateX(-50%);}
						.slick .slick-dots li {float: left; margin:0 8px; width:11px; height: 11px; border-radius: 50%; background:#999; opacity: 0.3; cursor: pointer;}
						.slick .slick-dots li.slick-active {opacity: 1;}
						.slick .slick-dots li button {font-size:0; opacity:0;}

Javascript

콘텐츠 부모 요소의 클래스를 선택하여 slick.js 를 작성합니다.
그 외 필요한 옵션을 추가하여 사용합니다. 

						// 기본 슬라이드
						$(".slide").slick({
					        infinite: true,
					        dots: true,
					        prevArrow : $('.btn_prev'),
						  	nextArrow : $('.btn_next')
					      });

					     //  콘텐츠가 3개 보이는 슬라이드
						$('.multiple_slides').slick({
						  infinite: true,
						  slidesToShow: 3,
						  slidesToScroll: 3,
						  dots: true,
						  prevArrow : $('.btn_prev2'),
						  nextArrow : $('.btn_next2')
						});

모바일 디바이스에서 height관련 scrolling 이슈가 있습니다.


때에 따라 터치 슬라이드가 되지 않는 경우가 있으므로 하단의 script를 common.js 상단에 삽입할 것을 권장합니다. 
						var scrolling = false,
						ts = null;

						$('body').on('touchstart.scrollable', '.a', function(e) {
						  // Only execute the below code once at a time
						  if (!scrolling) {
						    scrolling = true;
						    if (e.currentTarget.scrollTop === 0) {
						      e.currentTarget.scrollTop = 1;
						    } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
						      e.currentTarget.scrollTop -= 1;
						    }
						    scrolling = false;
						  }
						  ts = e.originalEvent.touches[0].clientY;
						});

						$('body').on('touchmove.scrollable', '.a', function(e) {
						  //If there is no scrollabe content we disable default event
						  var te = e.originalEvent.changedTouches[0].clientY,
						      direction = ts > te ? 'down' : 'up';


						  $container = $('.a');
						  $content = $('.b');

						  if ($content.height() <= $container.height()) {
						      e.preventDefault();
						    console.log('Default prevented');
						  } else if ($container.scrollTop() <= 1 && direction == 'up') {
						      e.preventDefault();
						    console.log('Default prevented');
						  } else if ($container.scrollTop() > 0 && ($container.scrollTop() + $container.height() >= $content.height() - 1) && direction == 'down') {
						      e.preventDefault();
						    console.log('Default prevented');
						  }
						});

옵션

하기 표를 참고하여 초기화시 기본적인 옵션값들을 조절 가능합니다.
더 다양한 옵션값과 설명, 예시는 공식 배포처에서 확인 가능합니다.

옵션명 유형 기본 설명
autoplay boolean false 자동 움직임 사용 여부
autoplaySpeed int 3000 자동 움직임 속도 조절
slidesToShow int 1 보여지는 슬라이드 갯수
slidesToScroll int 1 넘어가는 슬라이드 갯수
dots boolean false 내비게이션 도트 사용 여부
dotsClass string ‘slick-dots’ 내비게이션 도트 class명 설정 (마크업을 설정하고 CSS 를 통한 디자인이 가능합니다.)
fade boolean false fade 사용여부
arrows boolean true 내비게이션 화살표 사용여부
appendArrows string $(element) 내비게이션 화살표 위치 변경
appendDots string $(element) 내비게이션 도트 위치 변경
prevArrow string 
<button class="slick-prev"></button>
 이전 화살표 (마크업을 설정하고 CSS 를 통한 디자인이 가능합니다.)
nextArrow string 
<button class="slick-next"></button>
 다음 화살표 (마크업을 설정하고 CSS 를 통한 디자인이 가능합니다.)
infinite boolean true 무한 슬라이드 허용 여부
centerMode boolean false 슬라이드 가운데 정렬 (slidesToShow가 홀수일 때 사용합니다.)
unslick object 슬릭 해제

Console.js

Console 플러그인

common.js 최상단에 콘솔출력 기능이 없는 웹브라우져 (IE6/7)에서 콘솔 로그를 피하는 방법이 선언되어 있습니다.

이벤트 객체 초기화 및 기타 간단한 플러그인들을 제어하는 common.js파일 최상단에 위치 시켰습니다.

테스트 시엔 console.js 하단에 log를 통해 테스트 코드를 작성한 후 결과 값을 얻은 후에는 반드시 해당 코드들을 삭제합니다.

Javascript

추가적으로 검증할 메소드가 있다면 배열에 추가하여 사용하고,
가급적 콘솔 디버그는 해당 소스코드 하단쪽에 위치시킵니다.

						// 콘솔 출력 기능이 없는 웹브라우저에서 콘솔 로그를 피함
						(function() {
							var method;
							var noop = function () {};
							var methods = [
								'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
								'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
								'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
								'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
							];
							var length = methods.length;
							var console = (window.console = window.console || {});

							while (length--) {
								method = methods[length];

								// methods 배열 변수에서 정의하지 않은 남은 부분의 method 변수값 처리
								if (!console[method]) {
									console[method] = noop;
								}
							}
						}());

헤더

하기 템플릿 부분은 reset.css 와common.css를 필요로 합니다.

각 메뉴별로 하나씩 보여지는 형태

HTML

codeConvention 의 header.html 참조

CSS

					/* header - 메뉴별로 하나씩 보여지는 형태
							  - 속성값은 프로젝트별로 변경 (넓이,높이,컬러) */
					.header .header_inner {position:relative;}
					.header .header_inner .gnb > li {position:relative;}
					.header .header_inner .gnb > li:hover > a {background:#ccc;}
					.header .header_inner .gnb > li:hover > ul {left:0;}
					.header .header_inner .gnb > li > ul {position:absolute;left:-3000px;top:50px;width:auto;}
					.header .header_inner .gnb > li > ul > li > a {display:block;height:50px;line-height:50px;padding:0 7px;font-size:13px;color:#fff;background:#666;}
					.header .header_inner .gnb > li > ul > li > a:hover {background:#999; color:#444c5c;}

JavaScript

메뉴 오버시 전체메뉴 펼쳐짐 형태

단순 마우스 이벤트시 슬라이드 처리 (자바스크립트 없음)

HTML

codeConvention 의 header_allmenu.html 참조

CSS

						.header {background:#000;}
						.header_inner {width:1200px;margin:0 auto;}
						.header_inner > ul {text-align:center;overflow:visible;width:840px;margin:0 auto;}
						.header_inner > ul:after {display:block;clear:both;content:'';}
						.header_inner > ul > li {width:120px;height:50px;float:left;background:#999;border-right:1px solid #000;}
						.header_inner > ul > li:last-child {border-right:0;}
						.header_inner > ul > li > a {display:block;font-size:12px;line-height:50px;color:#fff;text-align:center;}
						.header_inner > ul > li > ul > li {border-right:0;}
						.header_inner .gnb_depth2 {padding-top:10px; width:100%; display:none; position:absolute; top:50px; left:0;}
						.header_inner .gnb_depth2 > ul {overflow:hidden; width:840px; margin:0 auto;}
						.header_inner .gnb_depth2 > ul:after {display:block;clear:both;content:'';}
						.header_inner .gnb_depth2 > ul > li {float:left; width:120px;}
						.header_inner .gnb_depth2 > ul > li a {display:block; text-align:center;}
						.header_inner .gnb_depth2 > ul > li a:hover {color:#000;}

JavaScript

						$(".gnb_depth1 > li").mouseover(function(){
							$(".gnb_depth2").slideDown(350);
						});
						//GNB 메뉴 아웃
						$('.header_inner').mouseleave(function() {
							$(".gnb_depth2").slideUp(350);
						});

아코디언

하기 템플릿 부분은 reset.css, common.css, common.js 를 필요로 합니다.

HTML

.accordion는 common.css에 선언되어있는 예약어 입니다.

JavaScript

common.js에 선언되어 있습니다.

						// FAQ 열고/닫기 (아코디언 기본 none/block)
						$('.accordion li a').on('click', function () {
							if (!$(this).parent().hasClass('curr')){
								$('.accordion li.curr').removeClass('curr');
								$(this).parent().addClass('curr');
							} else {
								$(this).parent().removeClass('curr');
							}
						});

상단 이동

하기 템플릿 부분은 reset.css, common.css, common.js 를 필요로 합니다.

HTML

.btn_top는 common.js에서 사용하는 예약어 입니다.

JavaScript

common.js에 선언되어 있습니다.

						// 우측 Top버튼
						$('.btn_top a').on('click', function () {
							$('html, body').animate({'scrollTop':'0px'}, 500);
							$(document).animate({'scrollTop':'0px'}, 500);
						});

탭이동

하기 템플릿 부분은 reset.css, common.css, common.js 를 필요로 합니다.

HTML

.tab_menu와 .tab_box 클래스는common.js에서 이벤트 컨트롤을 위해 사용하는 예약어 입니다.

						
    
							
  • ...
    • 
							
  • ...
    • 
						

						
...

						
...

JavaScript

common.js에 선언되어 있습니다.

						// 탭 이동
						$('.tab_menu li').on('click', function () {
							var indx = $(this).index();
							$('.tab_box').css('display', 'none');
							$('.tab_box').eq(indx).css('display', 'block');
						});

Lnb 2depth, 3depth

하기 템플릿 부분은 reset.css, common.css, common.js 를 필요로 합니다.

HTML

.lnb와 .view 클래스는 common.js 와 common.css에서 사용하는 예약어 입니다.

						

							
     // 2depth
								
  •  // 활성화된 class에 view 추가
									2depth
									
       // 3depth
										
    • 3depth
      •  // 활성화된 class에 on 추가
										
    • 3depth
      • 
									
    
								
    • 
								
  • 2depth
    •

CSS

common.css에 선언되어 있습니다.

						/* lnb */
						.lnb > ul > li.view > a {color:#fff; background:#595151 url('../../images/sub/bg_lnb.gif') no-repeat 163px center;}
						.lnb > ul > li.view > ul {display:block;}
						.lnb > ul > li > ul > li.on {background:url('../../images/sub/blt_on.gif') no-repeat left center;}
						.lnb > ul > li > ul > li.on > a {color:#e71e26; font-weight:bold;}

JavaScript

common.js에 선언되어 있습니다.

						// lnb 탭이동 2depth, 활성화된 class에 view 추가
						$('.lnb > ul > li > a').on('click', function (){
							if (!$(this).parent().find('ul').is(':visible')){
								$('.lnb > ul > li.view').removeClass('view');
								$(this).parent().addClass('view');
							} else {
								$(this).parent().removeClass('view');
							}
						});

						// lnb 탭이동 3depth 활성화된 class에 on 추가
						$('.lnb > ul > li > ul > li > a').on('click', function (){
							var index = $(this).parent().index();
							if (!$(this).parent().find('ul').is(':visible')){
								$('.lnb > ul > li > ul > li.on').removeClass('on');
								$(this).parent().addClass('on');
							} else {
								$(this).parent().removeClass('on');
							}
						});

체크박스 디자인

하기 템플릿 부분은 reset.css, common.css, common.js 를 필요로 합니다.

HTML

.label안에 input[type=checkbox]와 디자인될 이미지 를 위치시켜 position 값으로 대체이미지 클릭시,
checkbox가 클릭되도록 Js 로 제어하는 구조 입니다. chk_img와 ico_chk 는 CSS 디자인과 이벤트 컨트롤을 위해 사용되는 예약어이며, 으로 input[type=checkbox]을 감싸는 구조로 작성되야 합니다.

CSS

common.css에 선언되어 있습니다.

						/* input design */
						.chk_img > .ico_chk {width:12px; height: 12px; margin:0; padding:0; background:url('../../images/common/bg_check.gif') no-repeat left top; display:inline-block; overflow:hidden; vertical-align:top; margin:3px 5px 0 0;}
						.chk_img.on > .ico_chk {background-position:left -12px; display:inline-block; vertical-align:top; margin:3px 5px 0 0;}
						.chk_img input[type=checkbox] {opacity:0; width:12px; height:12px;}

JavaScript

common.js에 선언되어 있습니다.

						// input 디자인 
						$('.chk_img span').on('click',function(){
							if(! $(this).parent().hasClass('on') ){
								$('.chk_img').addClass('on');
								$('.chk_img input').attr('checked',true);
							}else{
								$('.chk_img').removeClass('on');
								$('.chk_img input').attr('checked',false);
							}
						});

Holder.js 클라이언트 단 이미지생성

Holder는 지정한 자리에 더미이미지를 생성해주는 라이브러리 입니다.

Canvas, SVG 를 사용하여 색상, 폰트, 크기 변화등에 동적으로 반응하는 이미지를 생성해줍니다.

/js/vendor/holder.js 파일 외에 별도의 CSS 등은 전혀 필요없으며, 목업단계 및 테스트 단계에서 필요여부에따라 holder.js를 선언하여 사용합니다.

브라우저 지원

  • Chrome
  • Firefox 3+
  • Safari 4+
  • IE9+ (일부 6~8지원)
  • Opera 12+
  • Android

Script 선언부

테스트가 끝나면 불필요한 리소스 낭비를 피하기 위해 holer.js 파일 로드 부분은 제거합니다.

HTML

하기 예제코드와 같이 img 태그의 src 속성에 입력하는 방식이며,
콘솔 404 에러를 피하기 위해서는 src 속성 대신에 data-src 속성을 사용합니다. 

						
						// 예시) holder.js/300x200

기본 옵션

옵션은 URL 속성을 통하여 설정하며 다중 옵션은 &문자로 구분한다 (GET 방식 과 동일)

  • theme : 테마를 설정한다. 예) holder.js/300x200?theme=sky
  • bg : 배경색을 설정한다. 예) holder.js/300x200?bg=#cccccc
  • fg : 전경색을 설정한다. 예) holder.js/300x200?fg=sky
  • text : 문구를 설정한다. 예) holder.js/300x200?text=sky
  • size : 폰트크기를 설정한다. 기본단위는 pt 예) holder.js/300x200?size=50
  • font : 글꼴을 설정한다. 예) holder.js/300x200?font=Arial
  • align : 글자정렬을 설정한다. 예) holder.js/300x200?align=right
  • outline : 외각선을 설정한다. 예) holder.js/300x200?outline=yes

기본 테마는 6가지가 있다. sky, vine, lava, gray, industrial, social,

추가 옵션

텍스트의 경우 이미지 경계를 넘어서면 자동 줄바꿈이 이루어지며 \n로 줄바꿈을 강제적으로 시킬수도 있다.

백분율로 수치를 지정하면, 미디어 쿼리에 응답하는 유동적인 이미지가 생성된다 holder.js/100px200