• input 파일 다중 업로드 (MultiFile plugin) html <input type="file" name="attach" id="attach"> <div class="attaedbox"></div> <script type="text/javascript"> $(':file[name=attach]').MultiFile({ 'max' : 5, 'accept' : 'gif|jpg|jpeg|bmp|png|pdf', 'maxfile' : 10240, //각 파일 최대 업로드 크기 (kb) 'list' : $('.attaedbox'), //파일목록을 출력할 요소 지정가능 'STRING' : { // error문구를 원하는대로 수정 'remove' : "<a href=\"#\" class=\"remove\">제거</a>", 'duplicate' : "$file 은 이미 선택된 파일입니다.", 'denied' : "$ext 는(은) 업로드 할수 없는 파일확장자입니다.", 'selected' :'$file 을 선택했습니다.', 'toomuch' : "업로드할 수 있는 최대크기를 초과하였습니다.($size)", 'toomany' : "업로드할 수 있는 최대 개수는 $max개 입니다.", 'toobig' : "$file 은 크기가 매우 큽니다. (max $size)" } }); </script> css .MultiFile-wrap {min-height: 52px;display: flex;align-items: center;} .MultiFile-label + .MultiFile-label {margin-top: 2px;} .MultiFile-label {display: flex;align-items: center;} .MultiFile-label > .remove {margin-right: 10px;width: 40px;height: 25px;line-height: 23px;box-sizing: border-box;border: 1px solid #ccc;border-radius: 3px;text-align: center;font-size: 12px;color: #333;background: #fff;} jquery​​​​​​​ /* jquery-multifile v2.2.2 @ 2020-04-16 06:05:29 */ window.jQuery&&function(d){"use strict";function g(e){return 1048576<e?(e/1048576).toFixed(1)+"Mb":1024==e?"1Mb":(e/1024).toFixed(1)+"Kb"}function h(e){return(e.files&&e.files.length?e.files:null)||[{name:e.value,size:0,type:((e.value||"").match(/[^\.]+$/i)||[""])[0]}]}d.fn.MultiFile=function(e){if(0==this.length)return this;if("string"==typeof arguments[0]){if(1<this.length){var i=arguments;return this.each(function(){d.fn.MultiFile.apply(d(this),i)})}return d.fn.MultiFile[arguments[0]].apply(this,d.makeArray(arguments).slice(1)||[])}"number"==typeof e&&(e={max:e});e=d.extend({},d.fn.MultiFile.options,e||{});d("form").not("MultiFile-intercepted").addClass("MultiFile-intercepted").submit(d.fn.MultiFile.disableEmpty),d.fn.MultiFile.options.autoIntercept&&(d.fn.MultiFile.intercept(d.fn.MultiFile.options.autoIntercept),d.fn.MultiFile.options.autoIntercept=null),this.not(".MultiFile-applied").addClass("MultiFile-applied").each(function(){window.MultiFile=(window.MultiFile||0)+1;var i=window.MultiFile,f={e:this,E:d(this),clone:d(this).clone()},c=d.extend({},d.fn.MultiFile.options,e||{},(d.metadata?f.E.metadata():d.meta?f.E.data():null)||{},{});0<c.max||(c.max=f.E.attr("maxlength")),0<c.max||(c.max=(String(f.e.className.match(/\b(max|limit)\-([0-9]+)\b/gi)||[""]).match(/[0-9]+/gi)||[""])[0],0<c.max?c.max=String(c.max).match(/[0-9]+/gi)[0]:c.max=-1),c.max=new Number(c.max),c.accept=c.accept||f.E.attr("accept")||"",c.accept&&c.accept.match(/\//)&&(c.accept=""),c.accept||(c.accept=f.e.className.match(/\b(accept\-[\w\|]+)\b/gi)||"",c.accept=new String(c.accept).replace(/^(accept|ext)\-/i,"")),c.maxsize=0<c.maxsize?c.maxsize:f.E.data("maxsize")||0,0<c.maxsize||(c.maxsize=(String(f.e.className.match(/\b(maxsize|maxload|size)\-([0-9]+)\b/gi)||[""]).match(/[0-9]+/gi)||[""])[0],0<c.maxsize?c.maxsize=String(c.maxsize).match(/[0-9]+/gi)[0]:c.maxsize=-1),c.maxfile=0<c.maxfile?c.maxfile:f.E.data("maxfile")||0,0<c.maxfile||(c.maxfile=(String(f.e.className.match(/\b(maxfile|filemax)\-([0-9]+)\b/gi)||[""]).match(/[0-9]+/gi)||[""])[0],0<c.maxfile?c.maxfile=String(c.maxfile).match(/[0-9]+/gi)[0]:c.maxfile=-1),1<c.maxfile&&(c.maxfile=1024*c.maxfile),1<c.maxsize&&(c.maxsize=1024*c.maxsize),!1!==c.multiple&&1<c.max&&f.E.attr("multiple","multiple").prop("multiple",!0),d.extend(f,c||{}),f.STRING=d.extend({},d.fn.MultiFile.options.STRING,f.STRING),d.extend(f,{n:0,slaves:[],files:[],instanceKey:f.e.id||"MultiFile"+String(i),generateID:function(e){return f.instanceKey+(0<e?"_F"+String(e):"")},trigger:function(e,t,a,i){var l,n=a[e]||a["on"+e];if(n)return i=i||a.files||h(this),d.each(i,function(e,i){l=n.apply(a.wrapper,[t,i.name,a,i])}),l}}),1<String(f.accept).length&&(f.accept=f.accept.replace(/\W+/g,"|").replace(/^\W|\W$/g,""),f.rxAccept=new RegExp("\\.("+(f.accept||"")+")$","gi")),f.wrapID=f.instanceKey,f.E.wrap('<div class="MultiFile-wrap" id="'+f.wrapID+'"></div>'),f.wrapper=d("#"+f.wrapID),f.e.name=f.e.name||"file"+i+"[]",f.list||(f.wrapper.append('<div class="MultiFile-list" id="'+f.wrapID+'_list"></div>'),f.list=d("#"+f.wrapID+"_list")),f.list=d(f.list),f.addSlave=function(u,m){var e;f.n++,u.MultiFile=f,u.id=u.name="",u.id=f.generateID(m),u.name=String(f.namePattern.replace(/\$name/gi,d(f.clone).attr("name")).replace(/\$id/gi,d(f.clone).attr("id")).replace(/\$g/gi,i).replace(/\$i/gi,m)),0<f.max&&f.files.length>f.max&&(e=u.disabled=!0),f.current=u,(u=d(u)).val("").attr("value","")[0].value="",u.addClass("MultiFile-applied"),u.change(function(e,i,t){d(this).blur();var r=this,a=f.files||[],l=this.files||[{name:this.value,size:0,type:((this.value||"").match(/[^\.]+$/i)||[""])[0]}],n=[],s=0,c=f.total_size||0,o=[];d.each(l,function(e,i){n[n.length]=i}),f.trigger("FileSelect",this,f,n),d.each(l,function(e,i){function a(e){return e.replace("$ext",String(l.match(/[^\.]+$/i)||"")).replace("$file",l.match(/[^\/\\]+$/gi)).replace("$size",g(t)+" > "+g(f.maxfile))}var l=i.name.replace(/^C:\\fakepath\\/gi,""),t=i.size;f.accept&&l&&!l.match(f.rxAccept)&&(o[o.length]=a(f.STRING.denied),f.trigger("FileInvalid",this,f,[i])),d(f.wrapper).find("input[type=file]").not(r).each(function(){d.each(h(this),function(e,i){var t;i.name&&(t=(i.name||"").replace(/^C:\\fakepath\\/gi,""),l!=t&&l!=t.substr(t.length-l.length)||(o[o.length]=a(f.STRING.duplicate),f.trigger("FileDuplicate",r,f,[i])))})}),0<f.maxfile&&0<t&&t>f.maxfile&&(o[o.length]=a(f.STRING.toobig),f.trigger("FileTooBig",this,f,[i]));var n=f.trigger("FileValidate",this,f,[i]);n&&""!=n&&(o[o.length]=a(n)),s+=i.size}),c+=s,n.size=s,n.total=c,n.total_length=n.length+a.length,0<f.max&&a.length+l.length>f.max&&(o[o.length]=f.STRING.toomany.replace("$max",f.max),f.trigger("FileTooMany",this,f,n)),0<f.maxsize&&c>f.maxsize&&(o[o.length]=f.STRING.toomuch.replace("$size",g(c)+" > "+g(f.maxsize)),f.trigger("FileTooMuch",this,f,n));var p=d(f.clone).clone();if(p.addClass("MultiFile"),0<o.length)return f.error(o.join("\n\n")),f.n--,f.addSlave(p[0],m),u.parent().prepend(p),u.remove(),!1;f.total_size=c,(l=a.concat(n)).size=c,l.size_label=g(c),f.files=l,d(this).css({position:"absolute",top:"-3000px"}),u.after(p),f.addSlave(p[0],m+1),f.addToList(this,m,n),f.trigger("afterFileSelect",this,f,n)}),d(u).data("MultiFile-wrap",f.wrapper),d(f.wrapper).data("MultiFile",f),e&&d(u).attr("disabled","disabled").prop("disabled",!0)},f.addToList=function(r,e,i){f.trigger("FileAppend",r,f,i);var s=d("<span/>");d.each(i,function(e,t){var i=String(t.name||"").replace(/[&<>'"]/g,function(e){return"&#"+e.charCodeAt()+";"}),a=f.STRING,l=a.label||a.file||a.name,n=a.title||a.tooltip||a.selected,a="image/"==t.type.substr(0,6)?'<img class="MultiFile-preview" style="'+f.previewCss+'"/>':"",a=d(('<span class="MultiFile-label" title="'+n+'"><span class="MultiFile-title">'+l+"</span>"+(f.preview||d(r).is(".with-preview")?a:"")+"</span>").replace(/\$(file|name)/gi,(i.match(/[^\/\\]+$/gi)||[i])[0]).replace(/\$(ext|extension|type)/gi,(i.match(/[^\.]+$/gi)||[""])[0]).replace(/\$(size)/gi,g(t.size||0)).replace(/\$(preview)/gi,a).replace(/\$(i)/gi,e));a.find("img.MultiFile-preview").each(function(){var i=this,e=new FileReader;e.readAsDataURL(t),e.onload=function(e){i.src=e.target.result}}),0<e&&c.separator&&s.append(c.separator),s.append(a);i=String(t.name||"");s[s.length]=('<span class="MultiFile-title" title="'+f.STRING.selected+'">'+f.STRING.file+"</span>").replace(/\$(file|name)/gi,(i.match(/[^\/\\]+$/gi)||[i])[0]).replace(/\$(ext|extension|type)/gi,(i.match(/[^\.]+$/gi)||[""])[0]).replace(/\$(size)/gi,g(t.size||0)).replace(/\$(i)/gi,e)});var t=d('<div class="MultiFile-label"></div>'),a=d···
• DOM 복사 & 삭제 1 html <a href="#" class="btn4" data-dom-class=".domEducation" data-dom-num="0">추가하기<i class="axi axi-plus"></i></a> <div class="form-align domEducation"> <a href="#" class="btn2 del" data-del-class=".domEducation">삭제</a> <dl class="item w16"> <dt>학교명 <em class="col">*</em></dt> <dd> <input type="text" placeholder="학교명을 입력해주세요."> </dd> </dl> <dl class="item w33"> <dt>재학기간 <em class="col">*</em></dt> <dd class="many-inputs"> <input type="text"> <em class="hipen">~</em> <input type="text"> </dd> </dl> </div> jquery // 복사 & 삭제 dom_add_del = { 'init' : function(){ this.action(); }, 'action' : function(){ //dom var dom_arr = [ '<div class="form-align domEducation"><a href="#" class="btn2 del" data-del-class=".domEducation">삭제</a><dl class="item w16"><dt>학교명 <em class="col">*</em></dt><dd><input type="text" placeholder="학교명을 입력해주세요."></dd></dl><dl class="item w33"><dt>재학기간 <em class="col">*</em></dt><dd class="many-inputs"><input type="text"><em class="hipen">~</em><input type="text"></dd></dl><dl class="item w16"><dt>전공 <em class="col">*</em></dt><dd><input type="text" placeholder="전공을 입력해주세요."></dd></dl><dl class="item w16"><dt>소재지 <em class="col">*</em></dt><dd><input type="text" placeholder="소재지를 입력해주세요."></dd></dl><dl class="item w16"><dt>비고</dt><dd><input type="text"></dd></dl></div>', 'html 작성해주세요', 'html 작성해주세요' ]; //add $('*[data-dom-class]').on({ 'click' : function(e){ e.preventDefault(); var cname = $(this).data('dom-class'); var num = $(this).data('dom-num'); $(cname).last().after(dom_arr[num]); } }) //del $(document).on('click', '*[data-del-class]', function(e){ e.preventDefault(); var cname = $(this).data('del-class'); $(this).closest(cname).remove(); }) } } dom_add_del.init();
• MAC OS 에서만 CSS 파일 적용 Script <script type="text/javascript"> if( (navigator.userAgent).indexOf("Mac OS") > -1 ){//아이폰, 사파리가 해당됩니다. document.write('<link rel="stylesheet" href="/theme/wm-type1/css/global_macos.css?ver=asdas" />'); } </script> MAC OS 에서만 CSS 파일을 불러옵니다.
• 카카오맵 (마커, 오버레이, 부드럽게이동) 2 THML <ul class="fran-list"> <?php for ($i=0; $i < 3; $i++) { ?> <li> <a href="#" class="link"></a> <strong>충북1급자동차공업사</strong> <span class="add">충북 청주시 흥덕구 송절로 37</span> <span class="tel">00-000-0000</span> </li> <?php } ?> </ul> <div id="map"></div> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?=$config_daum_map_key?>"></script> CSS #map {width:100%;height:650px;} .wrap {position: relative;z-index: 77;} .wrap .marker {border: 0px;padding: 0;background: none;margin: 0 auto;display: block;} .wrap .info {display: none;width: 280px;height: 130px;border-radius: 10px;padding: 17px 20px;border: 1px solid #ddd;background: #fff;position: absolute;bottom: 57px;left: 50%;transform: translateX(-50%);box-shadow: 0 0 15px rgba(0,0,0,0.2);box-sizing: border-box;} .wrap .info:after {display: block;content: '';width: 18px;height: 14px;position: absolute;top: 100%;left: 50%;transform: translateX(-50%);background: url('../images/main/overlay-box-arrow.png') no-repeat 50% 50%;background-size: contain;} .layOn {z-index: 78 !important;} .layOn > .wrap .info {display: block;} .info .close {position: absolute;top: 5px;right: 5px;font-size: 22px;color: #444;width: 30px;height: 30px;line-height: 30px;text-align: center;} .info .close:hover {cursor: pointer;} .info .tit {display: block;margin-bottom: 10px;font-size: 18px;color: #333333;font-weight: 700;letter-spacing: -0.05em;line-height: 30px;} .info .add, .info .tel {display: block;font-size: 15px;color: #666666;line-height: 26px;letter-spacing: -0.05em;padding-left: 22px;position: relative;background-repeat: no-repeat;background-position: 0 3px;} .info .add:before, .info .tel:before {display: block;font-family: 'axicon';font-size: 16px;color: #2f880e;position: absolute;top: 0;left: 0;} .info .add:before {content: '\e779';} .info .tel:before {content: '\e77d';} .fran-list li {position: relative;z-index: 0;} .fran-list li .link {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 11;} javascript var mapContainer = document.getElementById('map'), // 지도의 중심좌표 mapOption = { center: new kakao.maps.LatLng(37.481510, 126.881393), // 지도의 중심좌표 level: 11 // 지도의 확대 레벨 }; var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다 var markerImg = '/images/main/icon-marker.png'; // 마커를 표시할 위치와 title 객체 배열입니다 var positions = [ { title: '충북1급자동차공업사', add : '충북 청주시 흥덕구 송절로 37', tel : '043-263-4002', latlng: new kakao.maps.LatLng(37.481510, 126.881393), pos : [37.481510, 126.881393] }, { title: '충북1급자동차공업사2', add : '충북 청주시 흥덕구 송절로 37', tel : '02-523-2020', latlng: new kakao.maps.LatLng(37.841510, 126.881393), pos : [37.841510, 126.881393] }, { title: '충북1급자동차공업사3', add : '충북 청주시 흥덕구 송절로 37', tel : '02-523-2020', latlng: new kakao.maps.LatLng(37.481510, 126.818393), pos : [37.481510, 126.818393] }, ]; for (var i = 0; i < positions.length; i ++) { // 커스텀 오버레이에 표시할 컨텐츠 입니다 // 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에 // 별도의 이벤트 메소드를 제공하지 않습니다 var overlay = []; var content = '<div class="wrap lay'+i+'" data-num="'+i+'">' + ' <button type="button" class="marker"><img src="'+ markerImg +'" alt=""></button>' + ' <div class="info">' + ' <div class="close" title="닫기"><i class="axi axi-close"></i></div>' + ' <strong class="tit">'+ positions[i].title +'</strong>' + ' <p class="add">'+ positions[i].add +'</p>' + ' <p class="tel">'+ positions[i].tel +'</p>' + ' </div>' + '</div>'; // 마커 위에 커스텀오버레이를 표시합니다 // 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다 overlay[i] = new kakao.maps.CustomOverlay({ content: content, map: map, position: positions[i].latlng }); } //open function mapOpen(idxNum){ $('.lay'+idxNum).parent('div').addClass('layOn') .siblings().removeClass('layOn'); } //click on list function panTo(){ $('.fran-list .link').on({ 'click' : function(e){ e.preventDefault(); idxNum = $(this).parent('li').index(); // 이동할 위도 경도 위치를 생성합니다 var moveLatLon = positions[idxNum].latlng; // 지도 중심을 부드럽게 이동시킵니다 // 만약 이동할 거리가 지도 화면보다 크면 부드러운 효과 없이 이동합니다 map.panTo(moveLatLon); //open mapOpen(idxNum); } }) } panTo(); //overlay close function layClose(){ $(document).on('click', '.wrap .info .close', function(){ $(this).closest('.wrap').parent('div').removeClass('layOn'); }) } layClose(); //overlay open function layOpen(){ $('.wrap .marker').on({ 'click' : function(e){ idxNum = $(this).closest('.wrap').parent('div').index(); console.log(idxNum); // 이동할 위도 경도 위치를 생성합니다 var moveLatLon = positions[idxNum].latlng; // 지도 중심을 부드럽게 이동시킵니다 // 만약 이동할 거리가 지도 화면보다 크면 부드러운 효과 없이 이동합니다 map.panTo(moveLatLon); //open mapOpen(idxNum); } }) } layOpen();
• 레이어 드래그 앤 드롭 javascript window.onload = () => { $(init); function init() { $('#makeMeDraggable').draggable({ containment: '#content', cursor: 'move', snap: '#content' }); } };
• [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 바로가기

• 1
• 2