Recent Posts
-
[javascript] toggle 이벤트
javascript var btn_tog = document.getElementById("btn2"); btn_tog.addEventListener('click', () => { text_tog(); }); function text_tog(){ btn_tog.classList.toggle("on"); if(btn_tog.classList.contains("on")){ btn_tog.innerText = "처리중"; }else{ btn_tog.innerText = "완료"; } } 결과 화면 sample site 바로가기
-
[javascript] onclick 이벤트
javascript var ele_btn = document.getElementsByClassName("btn_cn")[0]; var ele_btn_qs = document.querySelector(".btn_qs"); var ele_btn_qsa = document.querySelector(".btn_qsa"); var ele_btn_reset = document.getElementById("btn_reset"); ele_btn.addEventListener('click', () => { ele_btn.innerText = ":::클릭했지롱~:::"; }); ele_btn_qs.addEventListener('click', () => { ele_btn_qs.innerText = ":::클릭했지롱~:::"; }); ele_btn_qsa.addEventListener('click', () => { ele_btn_qsa.innerText = ":::클릭했지롱~:::"; }); ele_btn_reset.addEventListener('click', () => { ele_btn.innerText = "버튼 클릭해줄래?"; ele_btn_qs.innerText = "선택자 querySelector로 적용"; ele_btn_qsa.innerText = "선택자 querySelectorAll로 적용"; }); 결과 화면 sample site 바로가기
-
[javascript] click 이벤트
javascript var btn_color = document.getElementById("btn1"); btn_color.addEventListener('click', () => { asd(); }); function asd(){ btn_color.style.background='red'; btn_color.style.color='white'; } 결과 화면 sample site 바로가기
-
[javascript] 이벤트 종류
javascript onclick : 마우스 왼쪽 클릭 ondbclick : 마우스 왼쪽 더블 클릭 onmousedown : 마우스 왼쪽 또는 오른쪽 클릭 ⇔ onmouseup : 마우스 왼쪽 또는 오른쪽 놓았을때 발생 onmouseover : mouseenter ⇔ onmouseout : mouseleave onchange : 요소 변경될 때 onselect : 값 선택되었을 때 onfocus : 포커스가 갔을 때 ⇔ onblur : 포커스를 잃었을 때
-
[javascript] 선택자 종류
javascript getElementById() getElementsByClassName() getElementByTagName() querySelector() querySelectorAll()
-
[javascript] 변수 & 상수
javascript const zzzz = '상수 const입니다.'; document.write('<p class="colBlue">' + zzzz + '</p>'); 결과 화면 변수 : 변경 가능 상수 : 변경 불가능 (재선언X) [변수] var : 어디서나 사용 가능 / 재선언 가능 [변수] let : 해당 scope(중괄호'{}' 안의 범위)에서만 사용 가능 / 재선언 불가 [상수] const : 해당 scope(중괄호'{}' 안의 범위)에서만 사용 가능 / 재선언 불가 sample site 바로가기
-
[javascript] 배열 Array
javascript var stit = ['제목1','제목2','제목3']; document.write('<p class="colBlue">2번째 값 : ' + stit[1] + '</p>'); 결과 화면 sample site 바로가기
-
[javascript] 데이터의 형태
javascript var val1 = 24; var val2 = '안녕'; var val3 = true; document.write('<p class="mt10 colBlue">숫자 : ' + typeof(val1) + '<br />문자 : ' + typeof(val2) + '<br />논리 : ' + typeof(val3) + '</p>'); 결과 화면 숫자 : number 문자 : string 논리 : boolean sample site 바로가기
-
[javascript] 변수 선언하기 (초기화)
javascript var eleName = '변수 이름'; var eleNumber = '1'; document.write('<p class="colBlue">' + eleName + ' / 번호:' + eleNumber + '</p>'); 결과 화면 sample site 바로가기
-
[javascript] 값 출력
javascript document.write('<p class="colBlue">안녕</p>'); 결과 화면 sample site 바로가기
-
html5 video tag 정지, 재생, 처음부터 재생 시키기 1
[사이트] 글 퍼왔습니다. jquery // slide 이동시 video 컨트롤 $ele.roll.on('afterChange', function(event, slick, currentSlide, nextSlide){ // video 요소를 만듬 var $video = $('#visual_video')[0]; // 동영상이 있는 슬라이드에 도달하면 동영상 첨부터 재생 (2번 슬라이드) if (currentSlide == 2) { $video.play(); // slick auto play 일시 중지함 // code ... } else { $video.pause(); $video.currentTime = 0; // slick auto play 재작동함 // code ... } }); html <video oncontextmenu="return false;" autoplay muted loop playsinline> <source src="<?=DIR?>/files/momt_video.mp4" type="video/mp4"> </video>
-
[Jquery] 특정 영역만 인쇄하기 - printThis 1
HTML <a href="#" id="btn_print">프린트하기</a> jquery // print $(document).ready(function() { $("#btn_print").click(function() { $("#prdt-view").printThis(); }); }); /* * printThis v2.0.0 * @desc Printing plug-in for jQuery * @author Jason Day * @author Samuel Rouse * * Resources (based on): * - jPrintArea: http://plugins.jquery.com/project/jPrintArea * - jqPrint: https://github.com/permanenttourist/jquery.jqprint * - Ben Nadal: http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm * * Licensed under the MIT licence: * http://www.opensource.org/licenses/mit-license.php * * (c) Jason Day 2015-2022 * * Usage: * * $("#mySelector").printThis({ * debug: false, // show the iframe for debugging * importCSS: true, // import parent page css * importStyle: true, // import style tags * printContainer: true, // grab outer container as well as the contents of the selector * loadCSS: "path/to/my.css", // path to additional css file - use an array [] for multiple * pageTitle: "", // add title to print page * removeInline: false, // remove all inline styles from print elements * removeInlineSelector: "body *", // custom selectors to filter inline styles. removeInline must be true * printDelay: 1000, // variable print delay * header: null, // prefix to html * footer: null, // postfix to html * base: false, // preserve the BASE tag, or accept a string for the URL * formValues: true, // preserve input/form values * canvas: true, // copy canvas elements * doctypeString: '...', // enter a different doctype for older markup * removeScripts: false, // remove script tags from print content * copyTagClasses: true // copy classes from the html & body tag * copyTagStyles: true, // copy styles from html & body tag (for CSS Variables) * beforePrintEvent: null, // callback function for printEvent in iframe * beforePrint: null, // function called before iframe is filled * afterPrint: null // function called before iframe is removed * }); * * Notes: * - the loadCSS will load additional CSS (with or without @media print) into the iframe, adjusting layout */ ; (function($) { function appendContent($el, content) { if (!content) return; // Simple test for a jQuery element $el.append(content.jquery ? content.clone() : content); } function appendBody($body, $element, opt) { // Clone for safety and convenience // Calls clone(withDataAndEvents = true) to copy form values. var $content = $element.clone(opt.formValues); if (opt.formValues) { // Copy original select and textarea values to their cloned counterpart // Makes up for inability to clone select and textarea values with clone(true) copyValues($element, $content, 'select, textarea'); } if (opt.removeScripts) { $content.find('script').remove(); } if (opt.printContainer) { // grab $.selector as container $content.appendTo($body); } else { // otherwise just print interior elements of container $content.each(function() { $(this).children().appendTo($body) }); } } // Copies values from origin to clone for passed in elementSelector function copyValues(origin, clone, elementSelector) { var $originalElements = origin.find(elementSelector); clone.find(elementSelector).each(function(index, item) { $(item).val($originalElements.eq(index).val()); }); } var opt; $.fn.printThis = function(options) { opt = $.extend({}, $.fn.printThis.defaults, options); var $element = this instanceof jQuery ? this : $(this); var strFrameName = "printThis-" + (new Date()).getTime(); if (window.location.hostname !== document.domain && navigator.userAgent.match(/msie/i)) { // Ugly IE hacks due to IE not inheriting document.domain from parent // checks if document.domain is set by comparing the host name against document.domain var iframeSrc = "javascript:document.write(\"<head><script>document.domain=\\\"" + document.domain + "\\\";</s" + "cript></head><body></body>\")"; var printI = document.createElement('iframe'); printI.name = "printIframe"; printI.id = strFrameName; printI.className = "MSIE"; document.body.appendChild(printI); printI.src = iframeSrc; } else { // other browsers inherit document.domain, and IE works if document.domain is not explicitly set var $frame = $("<iframe id='" + strFrameName + "' name='printIframe' />"); $frame.appendTo("body"); } var $iframe = $("#" + strFrameName); // show frame if in debug mode if (!opt.debug) $iframe.css({ position: "absolute", width: "0px", height: "0px", left: "-600px", top: "-600px" }); // before print callback if (typeof opt.beforePrint === "function") { opt.beforePrint(); } // $iframe.ready() and $iframe.load were inconsistent between browsers setTimeout(function() { // Add doctype to fix the style difference between printing and render function setDocType($iframe, doctype){ var win, doc; win = $iframe.get(0); win = win.contentWindow || win.contentDocument || win; doc = win.document || win.contentDocument || win; doc.open(); doc.write(doctype); doc.close(); &nbs···
-
[Jquery] 첨부파일 추가 삭제
HTML <div class="_fileWrap w100"> <div class="fileaddel"> <input type="file" placeholder="파일을 첨부해주세요."> <span class="btns"> <a href="#" data-fileadd="._fileWrap"><i class="axi axi-plus-circle"></i> 파일 추가</a><hr /> <a href="#" data-filedel="._fileWrap">파일 삭제</a> </span> </div> </div> CSS .fileaddel {width: calc(265px + 145px + 20px);position: relative;display: flex;justify-content: space-between;align-items: center;} .fileaddel .btns {display: flex;align-items: center;} .fileaddel .btns a {color: #444444;letter-spacing: -1px;} .fileaddel .btns a i {display: inline-block;vertical-align: -2px;font-size: 18px;color: #999999;} .fileaddel .btns hr {border: 0;padding: 0;margin: 0 13px;width: 1px;height: 10px;background: #bbb;} jquery //file add & del fileaddel = { 'init' : function(){ this.action(); }, 'action' : function(){ var $ele = { 'add' : '*[data-fileadd]', 'del' : '*[data-filedel]' } $(document).on('click', $ele.add, function(e){ e.preventDefault(); var $wrap = $(this).data('fileadd'); var $ele = $($wrap).last().clone(); // console.log($ele); $($wrap).last().after($ele); }) $(document).on('click', $ele.del, function(e){ e.preventDefault(); var $wrap = $(this).data('filedel'); $(this).closest($wrap).remove(); }) } } $(function(){ if($('*[data-fileadd]').length>0){ fileaddel.init(); } })
-
[Jquery] 화면 아래로 내려갔을때 class 추가
jquery //Bottom Fixed botFix = { 'init' : function(){ this.action(); }, 'action' : function(){ var $ele = { 'foot' : $('#footer'), 'wrap' : $('#ft-inquiry') } var classFix = function(){ var wt = $(window).scrollTop(); var wh = $(window).height(); var tt = $ele.foot.offset().top; if(wt < tt - wh){ $ele.wrap.addClass('on'); }else{ $ele.wrap.removeClass('on'); } } $(window).on({ 'load scroll' : function(){ classFix(); } }); } } $(function(){ if($('#ft-inquiry').length>0){ botFix.init(); } })
-
[Jquery] 숫자 효과
jQuery <script type="text/javascript"> $(function(){ var loop = 0 $(window).on({ 'scroll load' : function(){ var st = parseInt($(window).scrollTop()); var pos = $('._counter').offset().top - ($(window).height() / 2); if(st >= pos && loop==0){ $("._counter strong").each(function(i){ $(this).flipping_text({ tickerTime: 30, tickerCount: 15, customRandomChar: "1234567890" }); }) loop++; } } }) }) </script> /* jQuery Plugin : counter number */ !function(e){function r(e,t){var n,r,i=t;this.pause=function(){window.clearTimeout(n);i-=new Date-r};this.resume=function(){r=new Date;n=window.setTimeout(e,i)};this.resume()}var t={tickerTime:10,customRandomChar:false,tickerCount:10,opacityEffect:true,resetOnChange:false};var n=false;e.fn.flipping_text=function(i){var s=this;resetAll=function(t){t.each(function(t){e(this).css({opacity:1,visibility:"visible"}).text(e(this).data("ft-text"))})};return this.each(function(o){function c(){var e=f.text(),t=0;if(a.customRandomChar!=false){var i=a.customRandomChar}else{var i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"}f.attr("data-ft-text",e).html("");for(var s=0;s<l;s++){f.append("<span data-ft-bk='"+e.charAt(s)+"' class='ft_char"+s+"'></span>");var o=new r(function(){t=t+1;var e=0;if(n==true){return false}else{for(var s=0;s<a.tickerCount;s++){var o=f.find(".ft_char"+(t-1));var u=new r(function(){if(n==true){return false}else{if(e==a.tickerCount-2){o.css("opacity","1").text(o.data("ft-bk"));return false}else{if(a.opacityEffect==true){var t=e/a.tickerCount}else{var t=1}o.css("opacity",t).text(i.charAt(Math.floor(Math.random()*i.length)));e++}}},s*a.tickerTime)}}},(s+1)*a.tickerTime*a.tickerCount)}}if(e(this).data("delay")!==undefined){var u=e(this).data("delay")+0}else{var u=0}var a=e.extend({},t,i),f=e(this),l=f.text().length;if(a.resetOnChange==true){e(window).on("blur",function(){n=true;resetAll(s)})}f.css("visibility","hidden");var h=new r(function(){if(n==true){return false}else{f.css("visibility","visible");c()}},u*o)})}}(window.jQuery)
-
다차원 배열
<?php $_data = array( array( '제목1', '부제목1', '내용1' ), array( '제목2', '부제목2', '내용2' ), array( '제목3', '부제목3', '내용3' ) ); for ($i=0; $i < count($_data); $i++) { ?> <li> <?php if($_data[$i][0]){ ?><strong><?=$_data[$i][0]?></strong><?php } ?> <?php if($_data[$i][1]){ ?><span><?=$_data[$i][1]?></span><?php } ?> <?php if($_data[$i][2]){ ?><p><?=$_data[$i][2]?></p><?php } ?> </li> <?php } ?> <?php $_data = [ [ 't1' => '제목1', 't2' => '내용1' ], [ 't1' => '제목2', 't2' => '내용2' ], [ 't1' => '제목3', 't2' => '내용3' ] ]; for ($i=0; $i < count($_data); $i++) { ?> <li> <strong><?=$_data[$i][t1]?></strong> <p><?=$_data[$i][t2]?></p> </li> <?php } ?>
-
[Jquery] fullpage 1
fullpage 사용 방법 사이트 URL : https://github.com/alvarotrigo/fullPage.js 적용된 사이트 URL : geosoft *2.9.7버전까지 무료 사용가능 HTML <aside id="aside"> <ul> <li data-menuanchor="firstPage"><a href="#firstPage">menu1</a></li> <li data-menuanchor="secondPage"><a href="#secondPage">menu2</a></li> <li data-menuanchor="3rdPage"><a href="#3rdPage">menu3</a></li> <li data-menuanchor="4thpage"><a href="#4thpage">menu4</a></li> <li data-menuanchor="5thpage"><a href="#5thpage">menu5</a></li> <li data-menuanchor="6thpage"><a href="#6thpage">menu6</a></li> </ul> </aside> <div id="fullpage"> <article class="section about"> main </article> <article class="section foot"> main </article> </div> jQuery $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage', '6thpage', 'foot'], menu : '#aside', responsiveWidth: '1400', navigation:'true', showActiveTooltip: true, css3: true }); });
-
D-day 날짜
PHP <?php $endDate = date('2022-12-25'); //디데이 날짜 $Dday = floor(( strtotime(substr($endDate,0,10)) - strtotime(date('Y-m-d')) )/86400); if($Dday < 0){ $Dday = '00'; //D-Day 가 -로 넘어 갔을때 00으로 맞춤 } //echo 'D-'.$Dday; ?> HTML <?=$Dday?>
-
[Jquery] 이미지맵 반응형 2
jquery $(document).ready(function(){ //이미지맵이 있는 경우 반응형 이미지맵 처리 var coords = new Array(); function imagemap_coords(type){ $('area[coords2]').each(function(idx){ if(type=='ready'){ coords[idx] = $(this).attr('coords'); } var map_id = $(this).parent('map').attr('name'); var $img = $('img[usemap="#'+map_id+'"]'); var org_width = parseInt($img[0].naturalWidth); var now_width = $img.width(); var coords2 = coords[idx].split(','); var coords_re = ''; for(var i=0;i<coords2.length;i++){ coords_re += ','+coords2[i]*(now_width/org_width); } coords_re = coords_re.substring(1); $(this).attr('coords',coords_re); }); } imagemap_coords('ready'); $(window).resize(imagemap_coords); }); * 맵 api를 사용하는 경우 usemap 문제 발생할 수 있음. * 그런 경우 area 에 attribute 추가해서 사용할 것
-
[Jquery] 입력한 글자 수 체크
jquery // 입력한 글자수 체크 $('#content1').keyup(function (e){ var content = $(this).val(); $('#bytes1').html(content.length);//글자수 실시간 카운팅 if (content.length > 500){ alert("최대 1000자까지 입력 가능합니다."); $(this).val(content.substring(0, 500)); $('#bytes1').html("500"); } }); $('#content1').trigger('keyup');
-
[Jquery] 즐겨찾기 버튼
HTML <a calss="btn1" id="favorite">즐겨찾기</a> jquery //즐겨찾기 $(document).ready(function() { $(document).on('click', '#favorite', function(e) { var bookmarkURL = window.location.href; var bookmarkTitle = document.title; var triggerDefault = false; if (window.sidebar && window.sidebar.addPanel) { // Firefox version < 23 window.sidebar.addPanel(bookmarkTitle, bookmarkURL, ''); } else if ((window.sidebar && (navigator.userAgent.toLowerCase().indexOf('firefox') > -1)) || (window.opera && window.print)) { // Firefox version >= 23 and Opera Hotlist var $this = $(this); $this.attr('href', bookmarkURL); $this.attr('title', bookmarkTitle); $this.attr('rel', 'sidebar'); $this.off(e); triggerDefault = true; } else if (window.external && ('AddFavorite' in window.external)) { // IE Favorite window.external.AddFavorite(bookmarkURL, bookmarkTitle); } else { // WebKit - Safari/Chrome alert((navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Cmd' : 'Ctrl') + '+D 키를 눌러 즐겨찾기에 등록하실 수 있습니다.'); } return triggerDefault; }); });
-
[Jquery] 스크롤 시 해당 영역에 class 추가
CSS @media screen and (min-width: 1300px){ /* action */ #main-group .tt > * {opacity: 0;top: -50px;} #main-group.active .tt > * {opacity: 1;top: 0;} #main-group.active .tt > h3 {transition: all 0.5s 0s;} #main-group.active .tt > p {transition: all 0.5s 0.5s;} #main-group.active .tt > span {transition: all 0.5s 1s;} #main-group.active .tt > a {transition: all 0.5s 1.5s;} } jquery //scroll section active section_active = { 'init' : function(){ this.action(); }, 'action' : function(){ var $ele = { 'ani' : $('._ani'), 'win' : $(window), } $ele.win.on('load scroll', function(){ $ele.ani.each(function(i){ if( ( $ele.win.scrollTop() + ($ele.win.height() / 2) ) > $ele.ani.eq(i).offset().top ){ $(this).addClass('active'); }else{ $(this).removeClass('active'); } }); }); } } $(function(){ if($('#main ._ani').length>0){ section_active.init(); } }) 참고 사이트 : 저스트그룹
-
[Jquery] header 상단에서만 특정 class 추가
jquery //header bg headBg = { 'init' : function(){ this.action(); }, 'action' : function(){ var $ele = { 'win' : $(window), 'hd' : $('#header') } $ele.win.on({ 'scroll resize load' : function(){ var wt = $ele.win.scrollTop(); var hh = $ele.hd.height(); //console.log(wt); if(wt > hh){ $ele.hd.addClass('fix'); } else { $ele.hd.removeClass('fix'); } } }); } } $(function(){ if($('#header').length>0){ headBg.init(); } })
-
[Jquery] 메뉴 버튼 클릭 시 특정 위치로 스크롤 이동
HTML <aside id="aside"> <ul class="vam"> <li class="active"><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> </ul> </aside> <section class="_section">section1</section> <section class="_section">section2</section> <section class="_section">section3</section> CSS #aside {position: fixed;top: 0;bottom: 100px;right: 30px;font-family: empty;font-size: 0;text-align: center;} #aside:before {display: inline-block;vertical-align: middle;content: '';width: 0;height: 100%;} #aside .vam {display: inline-block;vertical-align: middle;} #aside ul > li a {display: block;margin: 10px 0;font-size: 16px;color: #000;} ._section {min-height: 500px;} ._section:nth-child(odd) {background: #f1f1f1;color: #000;} Jquery //section target section_target = { 'init' : function(){ this.action(); }, 'action' : function(){ //aside Active 처리 var win = $(window); var sec = $('._section'); var $aside = $('#aside'); var $asideSlide = '#aside ul > li a'; var ii = $('#aside li.active').index(); var asideActive = $('#aside li'); var wh = []; var secNum = 0; var spd = 600; sec.each(function(i){ wh[i] = sec.eq(i).offset().top; }); $(document).on('click',$asideSlide, function(e){ var i = $(this).parents('li').index(); var hh = $('#header').height(); var pos = $('._section').eq(i).offset().top - hh; e.preventDefault(); $('html,body').animate({ 'scrollTop' : pos },600,'easeInOutQuart'); return false; }); function acc(){ asideActive.eq(secNum).addClass('active').siblings().removeClass('active'); if(secNum==0){ $aside.addClass('home-on'); }else{ $aside.removeClass('home-on'); } } acc(); win.on({ 'load scroll resize' : function(){ var sh = parseInt($(this).scrollTop()); for (i=0;i<sec.length;i++){ if(sh >= parseInt(wh[i]) - (win.height()/2)){ secNum = i; acc(); } } } }); } } $(function(){ $(window).on({ 'load' : function(){ if($('._section').length>0){ section_target.init(); } } }); })
-
[Jquery] 수량 증가 감소 버튼
HTML <div class="count-wrap _count"> <button type="button" class="minus">감소</button> <input type="text" class="inp" value="1" /> <button type="button" class="plus">증가</button> </div> CSS .count-wrap {position: relative;padding: 0 38px;border: 1px solid #ddd;overflow: hidden;width: 60px;} .count-wrap > button {border: 0;background: #ddd;color: #000;width: 38px;height: 38px;position: absolute;top: 0;font-size: 12px;} .count-wrap > button.minus {left: 0;} .count-wrap > button.plus {right: 0;} .count-wrap .inp {border: 0;height: 38px;text-align: center;display: block;width: 100%;} jQuery //수량 옵션 $('._count :button').on({ 'click' : function(e){ e.preventDefault(); var $count = $(this).parent('._count').find('.inp'); var now = parseInt($count.val()); var min = 1; var max = 999; var num = now; if($(this).hasClass('minus')){ var type = 'm'; }else{ var type = 'p'; } if(type=='m'){ if(now>min){ num = now - 1; } }else{ if(now<max){ num = now + 1; } } if(num != now){ $count.val(num); } } });
-
[Jquery] 우클릭 및 드래그 막기
jQuery //우클릭 금지 $(document).bind('contextmenu',function(e){ return false; }); //드래그 금지 $('*').bind('selectstart',function(e){ return false; });
-
[Jquery] tab
HTML <div class="_tabWrap"> <div class="tab-tab"> <a href="#">제목1</a> <a href="#">제목2</a> </div> <div class="tab-article"> <article>내용1</article> <article>내용2</article> </div> </div> jQuery $(function(){ $('._tabWrap').tab(); }) $(function(){ $('._tabWrap').tab({ 'tabAfter' : function() { //실행 }, 'loadAfter' : function() { //실행 } }); }) /* jQuery Plugin : tab */ $(function(){$.fn.tab=function(options,callback){return this.each(function(){var $el=$(this);$.fn.tab.defaults={tab:$('.tab-tab'),article:$('.tab-article'),className:'active',mode:'normal',tabAfter:'',loadAfter:''};var option=$.extend({},$.fn.tab.defaults,options);var $tab=$('> *',$el.find(option.tab));var $article=$('> *',$el.find(option.article));function init(){tab_mark_no();article_mark_no();start();loadAfter()}function tab_mark_no(){$tab.each(function(i){$(this).attr('tab',i);if(i==0){$(this).addClass(option.className)}})}function article_mark_no(){$article.each(function(i){$(this).attr('tab',i);if(i>0){$(this).hide()}})}function tabAfter(){if(option.tabAfter){eval(option.tabAfter())}}function loadAfter(){if(option.loadAfter){eval(option.loadAfter())}}function start(){$tab.click(function(e){e.preventDefault();var no=$(this).attr('tab');$(this).addClass(option.className).siblings().removeClass(option.className);$article.each(function(){var hasTab=$(this).attr('tab');if(typeof hasTab!==typeof undefined&&hasTab!==false&&hasTab==no){switch(option.mode){case'fade':$(this).fadeIn();break;default:$(this).show();break}}else{$(this).hide()}});tabAfter()})}init()})}});
-
$_SERVER 함수
$_SERVER 함수 정리 $_SERVER['PHP_SELF'] = 현재페이지의 주소에서 도메인과 넘겨지는 값 제외 = /default/index.php *파일명으로 id 생성 : id="<?php echo substr(basename($_SERVER['PHP_SELF']), 0, -4);?>" $_SERVER['DOCUMENT_ROOT'] = 현재 사이트가 위치한 서버상의 위치 => /webapp/include $_SERVER['HTTP_ACCEPT_ENCODING'] = 인코딩 방식 => gzip, deflate $_SERVER['HTTP_ACCEPT_LANGUAGE'] = 언어 => ko $_SERVER['HTTP_USER_AGENT'] = 사이트 접속한 사용자 환경 => Mozilla/4.0(compatible; MSIE 6.0; Windows NT 5.1; Q312461; .NET CLR 1.0.3705 $_SERVER['REMOTE_ADDR'] = 사이트 접속한 사용자 IP => xxx.xxx.xxx.xxx $_SERVER['HTTP_REFERER'] = 현제 페이지로 오기전의 페이지주소값 => http://www.test.net/index.php?user=??? (A태그나 form으로 전송시 값이 넘어옴. onclick으로 전송시 값이 넘어오지 않음) $_SERVER['SCRIPT_FILENAME'] = 실행되고 있는 위치와 파일명 => webapp/include/index.php $_SERVER['SERVER_NAME'] = 사이트 도메인 => www.test.com (버추얼 호스트에 지정한 도메인) $_SERVER['HTTP_HOST'] = 사이트 도메인 => www.test.com (접속할 때 사용한 도메인) $_SERVER['SERVER_PORT'] = 사이트가 사용하는 포트 => 80 $_SERVER['SERVER_SOFTWARE'] = 서버의 소프트웨어 환경 => Apache/1.3.23 (Unix) PHP/4.1.2 mod_fastcgi/2.2.10 mod_throttle/3.1.2 mod_ssl/2.8.6 OpenSSL/0.9.6c $_SERVER['GATEWAY_INTERFACE'] = cGI 정보 => CGI/1.1 $_SERVER['SERVER_PROTOCOL'] = 사용된 서버 프로토콜 => HTTP/1.1 $_SERVER['REQUEST_URI'] = 현재페이지의 주소에서 도메인 제외 => /index.php?user=???&name=??? $_SERVER['APPL_PHYSICAL_PATH'] = 현재페이지의 실제 파일 주소 => D:\webapp/ $_SERVER['QUERY_STRING'] = get방식의 파일명 뒤에 붙어서 넘어오는 값 => ?user=???&name=??? (반드시get방식으로 넘겨야됨)
-
IP가리기
HTML Content 영역 가리기 <?php if($_SERVER["REMOTE_ADDR"]=='106.241.17.234'){ ?> Content 영역 <?php } ?> 작업 전달시 활용 <?php if($_SERVER["REMOTE_ADDR"]=='106.241.17.234'){ echo '<div class="ip-info">'; echo '<span class="small"><i class="axi axi-info-outline"></i> 106.241.17.234 IP에서만 노출되고 있습니다.<br />'; echo '<i class="axi axi-info-outline"></i> 개발 작업 후 삭제 해주세요.<br /></span>'; echo '아래 영역은 제품 상세보기 페이지입니다.'; echo '</div>'; } ?> CSS /* Etc */ .ip-info {margin: 5px 0;border: 1px solid #ddd;background: #f7f7f7;padding: 12px 15px;font-size: 12px;color: #111;letter-spacing: -0.05em;line-height: 1.4em;font-weight: 600;text-align: left;} .ip-info .small {display: block;font-size: 9px;color: red;font-weight: 600;line-height: 15px;}
-
[Jquery] slick slider
slick 슬라이더 사용 방법 사이트 URL : https://kenwheeler.github.io/slick/ HTML <div class="visual"> <div class="roll"> <div class="item">slider1</div> <div class="item">slider2</div> <div class="item">slider3</div> </div> <p class="vis-dots"> <span class="now">01</span> / <span class="tot">03</span> </p> <div class="vis-control"> <button class="play">play</button> <button class="stop">stop</button> </div> </div> jQuery //visual visual = { 'init' : function(){ this.action(); }, 'action' : function(){ var $ele = { 'roll' : $('.visual .roll') } var rolling = function(){ //item total number var tot_len = $('.visual .item').length; if (tot_len < 10) { tot_len = '0' + tot_len; } //10 이하 번호앞에 텍스트 0 입력 $('.visual .vis-dots .tot').text(tot_len); //slider $ele.roll.slick({ 'fade' : false, //Fade 롤링 효과 'dots' : true, //하단 pager 'arrows' : true, //next,prev 버튼 'infinite' : true, //무한반복 'slidesToShow' : 1, //슬라이드 갯수 'slidesToScroll' : 1, //롤링시 슬라이드 갯수 'autoplay' : true, //자동롤링 'autoplaySpeed' : 4000, //자동롤링 딜레이 'swipe' : false, //모바일 스와프 여부 'centerMode' : false, //Center모드. 가운데 slide에 'slick-active' 클래스 부여. 'centerPadding' : 0, //Center모드인 경우 좌/우 여백 설정 'vertical' : false, //vertical 모드 'zIndex' : 80, //z-index 'responsive' : [ //tablet { 'breakpoint' : 1300, 'settings' : { 'swipe' : true } }, //mobile { 'breakpoint' : 750, 'settings' : { 'swipe' : true } } ] }); //현재 슬라이드 number $ele.roll.on('afterChange', function(event, slick, currentSlide, nextSlide){ now_len = currentSlide + 1; if (now_len < 10) { now_len = '0' + now_len; } //10 이하 번호앞에 텍스트 0 입력 $('.visual .vis-dots .now').text(now_len); }); //control play $('.vis-control .play').click(function(){ $ele.roll.slick('slickPlay'); }); //control stop $('.vis-control .stop').click(function(){ $ele.roll.slick('slickPause'); }); } rolling(); } } $(function(){ if($('.visual').length>0){ visual.init(); } }) 영상 같이 슬라이드 HTML <div class="visual"> <div class="roll"> <div class="item" data-src="<div class='video'><video class='vis_video pc' autoplay muted playsinline><source src='<?=DIR?>/files/main.mp4' type='video/mp4'></video><video class='vis_video mobile' autoplay muted playsinline><source src='<?=DIR?>/files/main.mp4' type='video/mp4'></video></div>"> <div class="video"> <!-- controls autoplay muted loop playsinline --> <video class="vis_video pc" autoplay muted playsinline> <source src="<?=DIR?>/files/main.mp4" type="video/mp4"> </video> <video class="vis_video mobile" autoplay muted playsinline> <source src="<?=DIR?>/files/main.mp4" type="video/mp4"> </video> </div> </div> <div class="item"> <a href="#" target="_blank" class="__pc"><img src="<?=DIR?>/images/main/visual1.jpg" /></a> <a href="#" target="_blank" class="__ta"><img src="<?=DIR?>/images/main/visual1.jpg" /></a> <a href="#" target="_blank" class="__mo"><img src="<?=DIR?>/images/main/visual1.jpg" /></a> </div> </div> </div> CSS #main .visual .video {position: relative;z-index: 0;width: 100vw;height: 900px;overflow: hidden;} #main .visual .video video {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);min-width: 100%;min-height: 100%;width: auto;height: auto;} #main .visual .video video.pc {display: block;} #main .visual .video video.mobile {display: none;} jQuery // visual visual = { 'init' : function() { this.action(); }, 'action' : function() { var $video_pc = $('.vis_video.pc'); var $video = $('.vis_video.mobile'); var $ele = { 'win' : $('window'), 'roll' : $('.visual .roll') } var rolling = function() { $ele.roll.slick({ 'fade' : true, // Fade 롤링 효과 'dots' : true, // 하단 pager 'arrows' : false, // n···