# Doctype

HTML5 DOCTYPE을 사용합니다. SEO를 위해 mata 태그도 작성합니다.

# CSS

	

		LOGO
	
	

# Comment

개발 요소나 영역을 나누는 부분에 사용합니다.

/**
 * 합계 구하기
 * @param {number} x - 더할 숫자 1
 * @param {number} y - 더할 숫자 2
 * @return {number} x + y 의 합계
*/
function sum(x, y) {
	reutn x + y;
}

# Webfont

IE지원 여부에 따라 다르게 선언합니다.

구IE 지원

@font-face {
	font-family: 'Noto Sans KR';
	src:url(./common/css/fonts/NotoSans-Light.eot);  /* IE 8 이하 */
	src:
	    local('☺'), /* IE 8 이하에서 다운로드 방지 */
        url(./common/css/fonts/NotoSans-Light.woff2) format('woff2'), /* Chrome, Firefox, Safari, Opera */
        url(./common/css/fonts/NotoSans-Light.woff) format('woff'); /* IE 9+, Chrome, Firefox, Safari, Opera */
}

IE11+, 모던 브라우저 지원

@font-face {
	font-family: 'Noto Sans KR';
	font-weight:400;
	src:
        local(※), /* IE fix */
        url(./fonts/NotoSans-Regular.woff2) format('woff2'),
        url(./fonts/NotoSans-Regular.woff) format('woff');
}

# Typography

자주 사용되는 제목과 텍스트 영역에 사용합니다.
마진 겹침을 활용합니다.

# Button

기본 모양, 용도별, 크기별로 만듭니다.

기본 모양

	LINK


	SUBMIT


	CANCEL

크기별

	Link


	Submit


	Cancel

용도별

	Submit


	Confirm


	Notice


	Cancel

모양별

	Submit


	Confirm


	Notice


	Cancel

# Icon

스프라이트 이미지를 사용하고,
프로젝트에 따라 svg, png 아이콘을 사용합니다.

Sprite Image

기본 1배수 아이콘

2배수 아이콘(모바일,고해상도)

# Input

block input을 기본으로 사용합니다.

# Select

기본 select 박스를 사용합니다.

	치킨
	피자
	족발
	보쌈


	치킨
	피자
	족발
	보쌈

# Radio

기본 radio 박스 또는 커스텀 된 radio 버튼을 사용합니다.

	

		
			 치킨
		
	
	

		
			 피자
		
	
	

		
			 족발
		
	
	

		
			 보쌈
		
	



	

		
			 치킨
			
		
	
	

		
			 피자
			
		
	
	

		
			 족발
			
		
	
	

		
			 보쌈
			
		
	

# Checkbox

기본 Checkbox 또는 커스텀 된 Checkbox를 사용합니다.

	

		
			 치킨
		
	
	

		
			 피자
		
	
	

		
			 족발
		
	



	

		
			 치킨
			
		
	
	

		
			 피자
			
		
	
	

		
			 족발
			
		
	

# List

세로형 리스트와 가로형 리스트를 사용합니다.
프로젝트에 따라 float이나 flex를 사용합니다.

flex

	
치킨
	
피자
	
족발
	
보쌈

float

	
치킨
	
피자
	
족발
	
보쌈

blit List

	

		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, quae!
	
	

		Lorem ipsum dolor.
	
	

		Lorem ipsum dolor sit amet.
	

# Table

default

named

# Tab

	

		

			
				TAB1
			
		
		

			
				TAB2
			
		
		

			
				TAB3
			
		
		

			
				TAB4
			
		
	
	

		

			TAB1 Contents..

			Lorem ipsum dolor sit amet.
		
		

			TAB2 Contents..

			Lorem ipsum dolor sit.
		
		

			TAB3 Contents..

			Lorem ipsum dolor sit amet, consectetur.
		
		

			TAB4 Contents..

			Lorem ipsum.
		
	

$('#tabs1').tab({
	parentElement : '#tabs1', // 상단 탭 요소
	effect : 'tab', // 탭 효과 tab, accordion
	opened : '#tab1' // 기본 오픈 탭
});

# Modal

Modal

Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi facilis minus officia possimus praesentium quibusdam, quisquam reiciendis similique suscipit voluptate? Debitis distinctio, dolorum fuga fugit ipsam nisi quas repellat velit.

# Cookie

$.cookie.getCookie('today');
$.cookie.setCookie('today','1',1); // name, value, expiredays

# Slider

const swiper = new Swiper('.swiper', {
	// Autoplay
	autoplay: {
		delay: 3000,
	},

	// In Carousel
	slidesPerView: 1,
	spaceBetween: 10,

	// Direction
	direction : 'horizontal', /* horizontal, vertical */

	// Optional parameters
	loop: true,

	// Free mode
	freeMode : true,

	// If we need pagination
	pagination: {
		el: '.swiper-pagination',
		type : 'bullets' /* fraction, progressbar, custom */
	},

	// Navigation arrows
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},

	// And if we need scrollbar
	scrollbar: {
		el: '.swiper-scrollbar',
	},

	// Etc
	centeredSlides: true,

	on : {
		init : function () {
			console.log('초기화');
		},
		imagesReady : function () {
			console.log('이미지 로드 후 실행');
		},
		slideChange : function () {
			console.log('이동');
		}
	},
});

swiper.slideTo(index, speed, runCallbacks) // 해당 슬라이드로 이동
swiper.slidePrev(index, speed, runCallbacks) // 이전 슬라이드로 이동
swiper.slideNext(index, speed, runCallbacks) // 다음 슬라이드로 이동
swiper.autoplay.start(); // 자동 재생 시작
swiper.autoplay.stop(); // 자동 재생 정지
swiper.destroy() // 슬라이드 제거