Blog Content

  • 탭메뉴 1-1

    Category 개발연습막쓰기/jQuery on 2019. 11. 18. 14:03

    이벤트 위임을 이용한 탭메뉴 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..

    Read more
  • jQuery 수 더하기

    Category 개발연습막쓰기/jQuery on 2019. 2. 13. 21:08

    jQuery 수 더하기 토탈 수 올려주기 예를들면 음식점이나 영화 티켓 예매등 예약시 성인, 청소년, 어린이등의 인원수를 체크하여 토탈 값을 내려준다. 기타 다른용도로 사용을 해야 한다면 타이틀만 변경 하고 사용 해도 된다. 결과 화면은 다음과 같다. 빼기 0 더하기 빼기 0 더하기 빼기 0 더하기 Total = 0 // 인원 체크 토탈 function countBtn(){ var $wrap = $('.totalFn'), $btnMinus = $wrap.find('.minus'), $btnPlus = $wrap.find('.plus'); $cell = $wrap.find('.cell'); $btnMinus.on('click', function(e){ var $this = $(this); var num =..

    Read more
  • jQuery infinite scroll 무한스크롤

    Category 개발연습막쓰기/jQuery on 2019. 2. 7. 20:58

    제이쿼리 무한스크롤 infiniteScroll 얼마전 컴퓨터를 포멧 이후 아직 포토샵을 설치 하기 전이라.. 이미지는 대충 웹에서 사용하는 포토샵으로 대처.. 나름 쓸만한듯... https://pixlr.com/editor/ 를 클릭하면 이동 스크롤을 내릴때 마다 객체가 생성되는 제이쿼리 무한스크롤 infinite Scroll 이라고도 하고.. 일단 처음 만들어봤는데 여기저기 돌아다니는 소스도 많고... 크게 어렵거나 한것 같지는 않았는데.. 그냥 내 입맛에 맞게 만들어보았다. * {margin:0; padding:0; list-style: none;} .infiniteScroll {border:1px solid #ccc; width:200px; font-size:0;} .infiniteScroll im..

    Read more
  • jQuery 이미지 갤러리

    Category 개발연습막쓰기/jQuery on 2018. 12. 20. 19:46

    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..

    Read more
  • setInterval 타이머

    Category 개발연습막쓰기/jQuery on 2018. 12. 9. 11:40

    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 + ..

    Read more
  • jQuery 폐쇄형 슬라이드

    Category 개발연습막쓰기/jQuery on 2018. 9. 18. 21:06

    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..

    Read more
  • jQuery 실행 파일의 위치

    Category 개발연습막쓰기/jQuery on 2018. 9. 3. 20:41

    script 파일을 문서 하단에 배치하는 이유 스크립트 파일을 head에 혹은 body맨 하단에 배치 하는 이유 : 하단 이미지 참고 하단에 실행문을 보면 제이쿼리에서 제공하는 동일한 문법이다. 문장을 해석하면 Document가 준비가 되면 실행을 하라는 문구이다. 이 문장은 상단의 이미지에서 상단 배치에 해당하는 부분으로말 그대로 문서가 준비가 되면 스크립트를 실행 하라는 말이 된다. $(function(){ // 실행문 }); $(document).ready(function(){ // 실행문 }); 그렇다면 하단에 배치 할 경우 하단의 문법으로 코딩이 가능한 형태가 된다.이 말은 상단의 문법도 가능하지만, Document가 로딩이 되면서 순차적으로 스크립트의 영역에 도달했을때 실행을 하게된다.(fun..

    Read more
  • 이미지 체인지 관련

    Category 개발연습막쓰기/jQuery on 2018. 5. 16. 14:17

    이미지 체인지 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/..

    Read more
  • jQuery 슬라이드 메뉴

    Category 개발연습막쓰기/jQuery on 2018. 3. 15. 06:00

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

    Read more
  • 이미지 갤러리

    Category 개발연습막쓰기/jQuery on 2018. 2. 6. 13:39

    jQuery Images Gallery 이번 포스팅에서는 이미지 갤러리를 만들어볼까 합니다.쇼핑몰이나 이런곳에서 자주 등장하는 이미지 갤러리 인데요. 자 진행하기에 앞서 이미지를 3장 저는 준비 했는데요이미지 갤러리이다 보니 이미지는 필수 겠죠? 저는 한효주씨를 모델로 jQuery Gallery를 만들어 보았는데요.생각보다 어렵지 않습니다. See the Pen JpKmMR by uicode (@uicode) on CodePen. 네 상단의 코드를 보시면 .. 원래는 RESULT 부분에 결과값이 나오게 되어있는데요이부분이 사정없이 깨지는 모습을 볼 수 있을거에요^^ 왜냐면... 제가 이미지를 담아야 하는 공간이 없기 때문에저 부분은 직접 이미지를 만들어서 넣어보시기 바랍니다. 아래는 제가 만든 이미지 갤..

    Read more