javascript/sample (23) 썸네일형 리스트형 email.js 사용 메일폼 보낼때 사용 폼 양식 폼 라벨 메시지 보내는사람 이메일 메시지 타이틀 메시지 내용 룰렛 이벤트 룰렛이벤트 HTML SCSS main{ width:100%; $pW: 720; max-width:720px; margin:0 auto; .roulette_area{ display: table; text-align: center; width:100%; .roulette_box{ display:table-cell; vertical-align: middle; .roulette_center{ position: relative; width:100%; padding-bottom:100%; margin:pImg( 100, $pW ) 0 0 pImg( 30, $pW ); .btn_start{ display:block; width:pImg( 290, $pW ); margin:pImg( 180, $pW ) 0 0 pImg.. swiper 프로그래스바 슬라이드 swiper 프로그래스바 슬라이드HTML 1 2 3 4 / CSS *{ margin:0; padding:0; } html, body { position: relative; overflow: hidden; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; } .slide_list li{ display:block; float: left; width:100%; height: 100%; text-align: center;} .slide_list li p{ padding-top:20%; font.. 초성으로 맞추는 단어 퍼즐 초성으로 맞추는 단어 퍼즐 HTML 초성으로 알아보는 단어 퍼즐 결과 확인 방갑습니다. 초성 타입 a입니다. 초성 타입 b입니다. 초성 타입 c입니다. 다시 하기 CSS #wrap{ max-width:720px; margin:0 auto;} .wrap_inner{ padding-top:50px;} .intro_box{ padding: 20px;} .intro_box h2{ font-size:34px; text-align: center; padding-bottom:20px;} .intro_box input{ display:block; width:250px; height:35px; margin:0 auto 30px;} .intro_box .btn_result{ display:block; width:250px.. 모바일 터치 드래그 슬라이드 모바일 터치 드래그 슬라이드( 모바일 기계에서만 작동됨 ) HTML 0 SCSS #wrap{ width:100%; max-width:720px; margin:0 auto; font-size:0; #drag_box{ $pLR : 40; $pW : 720 - ( $pLR * 2); padding: 0 pImg( $pLR ); .bar_box{ margin-top:pImg( 32, $pW ); position: relative; width:100%; overflow: hidden; .bar{ display:block; width:100%; padding-bottom: pImg( 50, $pW ); background:#000; border-radius: 1.2rem; } .cricle{ display:inli.. 제이쿼리 메뉴 제이쿼리 메뉴 HTML menu1 menu2333 menu2143 me CSS body{ margin:0; padding:0; } a{ text-decoration: none; } ul, ol{ list-style: none; margin:0; padding:0;} header{ width:100%;} .header_area{ margin: 10px 0;} .header_inner{ width:1280px; margin:0 auto;} .one_depth-list{ width:100%; text-align: center; } .one_depth-list li{ display: inline-block; margin: 0 24px;} .one_depth-list li a{ display:block; font.. 오늘 하루 안보기 팝업 오늘 하루 안보기 팝업 HTML X 여기가 팝업 글 내용 오늘하루 안보기 CSS .btn_open{ text-align: center; font-size:20px; display:inline-block; margin:0 auto; text-decoration: none;} .dimd{ display:none; position: fixed; top:0; left:0; width: 100%; height: 100%; background: #000; opacity: 0.8; z-index:10;} #popup_layer{ display:none; position: absolute; top:0; left:50%; margin-left:-400px; width:800px; background:#fff; z-ind.. 비오는 효과 제이쿼리 비오는 효과 제이쿼리 HTML CSS body{ margin:0; padding:0;} #wrap{ position: relative; background:#151515; width:100%; height:100vh; overflow: hidden;} .item_list{ position: relative; top:0; left:0;} .item_list li{ position: absolute; top:0; left:0; opacity: 0;} SCRIPT function create() { _w = $( window ); _itemList = $( ".item_list" ); _itemTarget = _itemList.children( "li" ); _wH = _w.height(); console.l.. 이전 1 2 3 다음
