반응형 IT102 수량버튼 + / - 클릭시 총 금액 변경 스크립트 display:table을 이용하여 왼쪽 오른쪽 정렬하고 수량 up down 이미지 클릭했을 때 input 태그에 수량이 같이 올라가며 총금액도 변환되어야 한다. input id값은 수정시 스크립트도 같이 수정해 줘야하며 수량을 직접 입력하지 않게 하기위해 readonly가 있어야한다. 수량표시 + / - 정가 ￦200,000 판매가 ￦160,000 플러스 마이너스 총 금액 74,000 Number.prototype.format = function(){ if(this==0) return 0; var reg = /(^[+-]?\d+)(\d{3})/; var n = (this + ''); while (reg.test(n)) n = n.replace(reg, '$1' + ',' + '$2'); return n.. 2020. 7. 11. [CSS] input custom css input 체크박스나 라디오 버튼을 그대로 가져다 쓰면 모양이 예쁘지 않아서 CSS를 통해 체크되는 모양을 바꿀 수 있는 input custom css 입니다. 글씨를 클릭해도 (display:none 해놓은) input태그에 체크가 될 수 있도록 글씨를 label 태그 안에 넣어주고 클릭을 하면 글씨 앞에 있는 i태그가 체크되는 박스 모양입니다. 큰 체크박스 큰 체크박스 큰 라디오버튼 큰 라디오버튼 /*스크립트 사용하지 않은 체크박스 커스텀 css*/ input.chkBasic[type="checkbox"] {display:none; vertical-align:middle; } input.chkBasic[type="checkbox"] + label.chkBasic {vertical-align:middl.. 2020. 6. 25. [script] 옆에서 나오는 menu script 메뉴버튼에 있는 하얀화살표는 코드어썸을 사용해서 아이콘은 가져와 봤다. 폰트어썸 처음 써봤는데 div, class만 가져오면 바로 사용할수 있어서 좋은것 같다. font-size, color 를 이용해서 css로 크기,색 까지 변경해서 사용할수 있어서 편리함. 위에 링크는 폰트어썸 사이트에서 가져와서 연결하면 된다. $(document).ready(function(){ $("#quick_bar span").click(function(){ $("#quick_bar").toggleClass('on'); }); }); #quick_bar{position:fixed; right:-255px; top:0; width:255px; height:100%; background:black; transition:0.5s .. 2020. 5. 23. [script] 이미지 돋보기 효과 스크립트(magnifier) 보통 쇼핑몰에 상품 이미지에 마우스 올렸을때 확대되서 돋보기처럼 보이게 하는 효과를 codepen 에서 찾아서 해봤다. 예전에 꾸며놨던 티스토리 배경인데 이미지가 있어서 아주 유용하게 잘쓰고 있다 ㅋㅋㅋ 사진 크기 비율을 맞게 하지않아서 세로로 찌그러진 느낌이 있긴한데 사이즈가 맞는 이미지 잘 구해서 쓰면 괜찮다. $(document).ready(function () { var nativeWidth = 0; var nativeHeight = 0; $(".content_left").mousemove(function (e) { if (!nativeWidth && !nativeHeight) { var imgObject = new Image(); imgObject.src = $(".smallImg").attr(.. 2020. 5. 23. [slick] slick 슬라이드 (breakpoint , 딤드+유튜브) slick 슬라이드 반응형. 전체 width 값에 따라 breakpoint 옵션을 사용해서 슬라이드 3 -> 2 -> 1 개씩 보이게 한다. +) 추가 img 클릭 했을때 레이어 팝업이 어둡게 뜨면서 유튜브화면 뜨는 스크립트 추가!! head안에 아래 링크 연결 해줘야 한다. slick + 유툽팝업이 연결되는 링크인데 이것도 역시 codepen에 올라와있던것 참고해서 사용함. script를 head영역에 넣은게 아니고 body에 넣어서html 아래에 있다. .slick-slide{ margin:0 25px; border:1px solid red;} .slick-slide span{display:block; } .slick-slide img{width:600px; height:600px; width:100.. 2020. 5. 21. [menu] 한줄로 나열되는 탭메뉴(반응형) div와 div 사이를 margin으로 여백을 주는것도 좋지만 반응형을 하게되면 줄어들때마다 여백을 새로 지정해줘야하기 때문에 번거로움이 있어서 좀더 편한방법으로 할수 있는 css를 정리했다. html구조는 너무 간단. 평소와 같다. 111 222 333 444 555 666 777 888 999 #container{max-width:1400px; width:100%; margin:50px auto 0; } #tab{margin:0 -5px; border:1px solid blue;} #tab li{float:left; display:table; width:20%; height:65px; padding:5px;} #tab li a{display:table-cell; vertical-align:middle.. 2020. 5. 18. [script] dot_움직이는 배경화면 (codepen) codepen 돌아다니다가 스크립트를 이용해 연결되는 점들이?? 움직이는 특이한 배경화면이 있어서 정리해 봤다. 스크립트를 이렇게 다 써야하는지는 모르겠지만... 다 써있길래 고대로 가져와서 사용해봄.. ;(function (window, document) { "use strict"; var pluginName = 'particleground'; function extend(out) { out = out || {}; for (var i = 1; i < arguments.length; i++) { var obj = arguments[i]; if (!obj) continue; for (var key in obj) { if (obj.hasOwnProperty(key)) { if (typeof obj[key] .. 2020. 5. 17. [script] top_btn 탑버튼 animation 스크롤을 150이상 내렸을 때 탑버튼이 보임. 탑 버튼 클릭 했을 때 제일 윗페이지로 이동하는 애니메이션. 스크롤 이동해도 오른쪽 하단에 계속 있어야하기때문에 position:fixed로 고정시킴. $(window).scroll(function(){ if ($(window).scrollTop() > 150){ $("#top_btn").addClass("on"); } else { $("#top_btn").removeClass("on"); } }); $("#top_btn").click(function(){ $("body,html").animate({scrollTop:0},500); }); TOP #top_btn{position:fixed; right:50px; bottom:-50%; width:55px; h.. 2020. 5. 15. [script] gnb menu slide toggle2 gnb 영역에 마우스 hover 했을때 아래 sub_gnb 리스트 + 하얀색 배경이 같이 내려와야한다. 오른쪽 메뉴버튼 클릭했을때 마찬가지로 서브메뉴와 뒷배경이 같이 보여져야 함. 스크립트도 hover 했을 때와 click 했을 때 두가지로 써야함. 추가되는 class는 on으로 통일해서 css 한번만 써도 될수 있게 했다. $(document).ready(function(){ $(".gnb").hover(function(){ $("#header").toggleClass('on'); $(".gnb_bar").stop().slideToggle(); $(".bg").stop().slideToggle(); }); $('.gnb_btn').click(function(){ $('#header').toggleCla.. 2020. 5. 12. 이전 1 2 3 4 5 6 ··· 12 다음 반응형
