Blog Content

이벤트 위임을 이용한 탭메뉴 1 - 1 이벤트 위임을 이용한 탭메뉴 1-1 이벤트 위임을 이용한 탭메뉴 Tab 1 Tab 2 Tab 3 Lorem ipsum 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias amet commodi cupiditate molestias laboriosam sit! Delectus magni esse magnam libero Lorem list 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam tincidunt mauris eu risus. Vestibulum auctor dapibus neque. Yolo 3 Pellentesque h..

jQuery image Gallery jQuery 를 이용한 이미지 갤러리 일단 디자인은 없이 그냥 내키는대로 했다.CSS는 알아서 입히시길 바랍니다.(살짝 디자인을 할것을 그랬나...) 이전 다음 * {margin:0; padding:0; list-style: none;} .slider-wrap {margin:100px auto; width:600px; border:1px solid #ccc;} /* 이미지 */ .img-box {width:400px; margin:20px auto; height:250px; overflow:hidden; font-size:0; border:2px solid orchid;} .img-box img {width:100%; height:100%;} /* 버튼 */ .sma..

setInterval를 이용한 카운트 다운 setInterval을 이용한 카운트 다운은행이나 어떤 특정 사이트에 로그인 이후, 혹은 휴대폰 인증을 받을때 사용이 되는 타이머 // 카운트 다운 var num = 60 * 3; // 몇분을 설정할지의 대한 변수 선언 var myVar; function time(){ myVar = setInterval(alertFunc, 1000); } time(); function alertFunc() { var min = num / 60; min = Math.floor(min); var sec = num - (60 * min); console.log(min) console.log(sec) var $input = $('.input').val(min + '분' + sec + ..

애트리뷰트 이용해서 레이어 팝업창 띄우기 팝업창 띄우기 소스 팝업1 팝업2 팝업 팝업 닫기 팝업 띄우기 팝업 2 팝업 닫기 팝업 띄우기 2 /* 팝업 */ .pop {height:100%; height:100%; min-height:100%;} .popup-wrap {display:none; width:100%; background:#ccc;} /* 팝업 공통 */ .popup-wrap .popup-area { background:#fff; position:fixed; left:50%; top:50%; z-index:2; transform: translate(-50%, -50%);} .popup-wrap .pop-title {padding:15px 30px 20px; background:#685e52; ..

jQuery 슬라이드 웹사이트에서 제이쿼리를 이용한 슬라이드폐쇄형으로 작업되었다. 즉, 이전, 다음 이미지가 보이지 않는 오로지 중앙에 이미지가 나올때 적합한 소스이다.오픈된 슬라이드 메뉴가 아닌 폐쇄형 슬라이드다. 실행된 이미지 이전 다음 0000 1111 2222 3333 .wrap {width:400px; margin:0 auto; } .wrap .sliderWrap {width:400px; height:200px;overflow:hidden;} .wrap .slider:after {display:block; content:""; clear:both;} .wrap .slider {height:100%; width:1600px; position:relative;} .wrap .box {float:le..

이미지 체인지 jQuery 이미지 체인지 관련 jQuery 왜 만들었는지 모르겠는데... 무슨생각으로 만들었지..그냥 회사에서 뭔가 하고 있다가 만들었는데 .... 그래도 코드만 덩그러니 있으면 뭔가 보기 싫으니..살짝 수정을 다시 해본다.. /* HTML */ // 이미지 체인지 function main_change(){ var change_img = $ (".main_visual .swiper-wrapper .swiper-slide img"); // var ui_width = window.innerWidth; // 브라우저 width 값 var allWidth = window.innerWidth; if ( allWidth < 1000 ) { change_img.attr('src', 'resource/..

제이쿼리 슬라이드메뉴 제이쿼리 슬라이드 메뉴를 한번 만들어 보았습니다..if문과 jQuery animate를 이용해서 메뉴를 열렸다 펼쳤다 하는 슬라이드 메뉴입니다. JS 코드를 설명드리자면 ..버튼을 클릭 하면 만약 num이 0보다 크면 위에 있는 animate를 실행그렇지 않으면 아래 있는 animate를 실행.. See the Pen XEbZEL by uicode (@uicode) on CodePen. 최초 제이쿼리 슬라이드 메뉴 실행화면 닫힘버튼을 눌렀을때 슬라이드 메뉴가 사라지면서 메뉴명이열림 버튼으로 변경됩니다. 코드를 보시면 아시겠지만 width 값을 변수에 담고 그 값을호출해오는 방식을 사용하였는데 .. 클릭했을때 좌표가 ( 마이너스 - )값이 들어가니저는 당연히 그러면 if문의 조건 값이..

jQuery 시작하기 Hello World 모든 프로그래밍은 Hello World로 시작한다는 말을 어디선가?들어본듯 합니다. 그래서 저도 거창하게 프로그래밍이랄꺼 까진 없지만..기본부터 충실하게 스터디를 하며, 블로그에 포스팅해보고자 ...거창한 꿈을 갖고... 이렇게 흠흠..... 사실 오늘은 토요일이라 넘어갈까 하다가 jQuery에 대해 블로그에 포스팅을 해보기 위해 아주 간단한 예문을 하나 준비해보았습니다.간단하게 설명을 드리자면 .. See the Pen LQGKYB by uicode (@uicode) on CodePen. 위에 소스를 보시면 var는 변수를 의미합니다. var 변수를 선언하고 변수 이름을 btn 이라는 변수명을 지정했습니다.그리고 그 변수안에 button이라는 버튼 HTML을 ..

DOM 문서 객체 모델 DOM은 HTML 문서의 요소를 제어하기 위해서 처음 지원되었는데 문서의 내용, 구조, 스타일에 접근하거나 변경하는 수단입니다. 웹 브라우저 사이에 DOM 구현이 호환되지 않음에 따라서, W3C에서 DOM 표준 규걱을 작성하게 되었습니다. DOM은 문서(Document), 객체(Object), 모델(Model)의 약자로 문서는 HTML의 전체를 의미합니다.객체는 Javascript가 HTML의 구성요소들을 독립된 것으로 인식하는것을 의미하구요.Javascript 가 문서를 해석 하는 것을 모델이라고 합니다. 이처럼 프로그램이나 스크립트가 효율적으로 문서의 내용과 구조 모양등을 접근함에있어갱신, 교체, 삭제하도록 도와줍니다. DOM Tree 돔트리 출처 - W3schools 위에 이..

텝 Animate 드롭 메뉴 01. CSS 123456789101112.tab_type02 ul:after {content:""; display: block; clear:both;}.tab_type02 li {float:left;/* width:25%;*/}.tab_type02 li a{display:block; padding:10px; border:1px solid #ccc; text-align:center;}.tab_type02 li.on a{background:#ccc; color:#fff; }.tab_type02 .box_area { position: relative;}.tab_type02 .box {border:1px solid #ccc; border-top:0; width:100%; paddi..