개발자 도담씨

[Web Programming] - [jQuery] 슬라이드 배너와 스크롤 탐지 메뉴바 만들기 이전 슬라이드 배너에서는 플러그인을 사용했었는데 사용하다보니 문제점이 하나 있었다! 반응형이 안되던것... 처음 웹 브라우저의 크기를 인식해서 되는 것 같았다. 😓그래서 책을 보고 우선 반응형으로 만들어보고 슬라이드 애니메이션을 추가해 보았다. ① 일정한 시간에 한 번씩 배열에 들어있는 이미지를 순차적으로 전환② 전환 시간 설정 가능③ 이미지 무한 롤링④ 함수 활용 html + css 부분123456789101112131415161718192021222324252627282930313233343536373839 banner body{ margin: 0px; } #banner{ width: 100%; height..

참고 블로그배너 : http://two-leaves.tistory.com/entry/간단한-슬라이드-배너만들기 메뉴바 : http://webdir.tistory.com/481 위는 완성한 결과물이다! 😆배너는 일정 시간마다 자동으로 넘어 가게끔 슬라이드 효과를 나태냈고상단 맨위 두번째 메뉴부분을 스크롤을 인식해서 일정 부분을 위로 스크롤시 나타나고아래로 스크롤시 사라지게 나타냈다. html과 css는 가볍게 훑어본 뒤 jQuery부분을 중점으로 다루겠다. 12345678910111213141516171819202122232425262728293031323334353637 Music Player Music Award Album Music Colored by Color Scriptercs html 부분은 다..

아직 직접적으로 복잡한 애니메이션을 구현할 실력은 안되지만 !인터넷엔 많은 정보가 있다 ㅎ3ㅎ원하는 효과를 찾아 그냥 ctrl + c / v만 하는건 재미도 없고 실력도 늘지 않을 테니분석해서 포스팅 하는 카테고리를 만들어 봤다. 😚 첫번째로 만나볼 친구는 Input 태그의 CSS 효과이다.참고 : https://codepen.io/andreasstorm/pen/gKGbxo webkit 관련 속성들은 되도록 빼면서 한줄씩 분석했다.( webkit이 나쁘다는게 아니라 익스플로러는 되지 않으니 최대한 호환 되게끔... )코드는 해당 참고 사이트에서 보면서 같이 분석해주시면 감사하겠다. XD 위에서부터 처음 만나는 친구들을 정리해 놓으려고 한다.box-sizing: border-box;해당 속성을 지정하면 해..

이번에는 mouseover과 mouseenter의 차이점에 대해 기록하려 한다 :)mouseover / mouseout 과 mouseenter / mouseleave 은 둘다 동일하게마우스 커서가 노드에 들어오거나 노드 밖으로 나가면 발생하는 이벤트이다. 하지만 mouseover은 만약 내부에 자식 노드가 있을 경우 자식 노드에서도 동일하게 이벤트가 발생한다.즉, 자식노드를 독립적인 노드로 처리 해버린다.반대로 mouseenter은 내부 자식 노드를 부모 노드의 일부분으로 처리 함으로써 자식 노드에서 이벤트가 발생하지 않는다. 12345678910111213141516171819202122232425262728293031323334353637 var count = 0; var $info = null; $..

jQuery 이벤트를 공부하다 세부적으로 돌아가는 부분에 대해 정리해보고자 한다 ! 우선 "이벤트"라고 하면 이름만 들어도 감이 올 듯한데 책에서는 일종의 "알림 기능"이라 설명하고 있다.이벤트 종류로는 크게 마우스 이벤트, 키보드 이벤트, 태그요소 고유 이벤트, 사용자 정의 이벤트 이렇게 4종류로 나뉜다.*태그요소 고유 이벤트 : 엘리먼트마다 발생하는 고유 이벤트(ex. img 태그 요소 경우 이미지가 모두 로드 될 시 load 이벤트 발생 ) 그리고 가장 중요한 이벤트 단계에 대해 자세히 알아보자. 책의 그림이 명확히 이해되도록 되어있어 첨부하고 싶은데 스캔할 수가 없다...😥 1단계 "캡쳐 단계"는 가장 먼저 실행 되는 이벤트 단계로써, 흐름은 가장 최상위 노드(document)부터 순서대로 htm..

물고기 움직이기버튼을 누르면 물고기가 랜덤한 위치로 움직이되 패널 ( 파랑 바탕 )을 벗어나지 않도록 합니다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 button{ margin: 10px; } .panel{ width: 600px; height: 400px; border: 1px solid #999; position: relative; background-color: blue; margin: 10px; } #fish{ position: absolute; left: 250px; top: 150px; } window.onload = function(..

동적 로딩을 할려면 스크롤의 하단 부분을 체크할 수 있어야 하기에 ! 아래부분 인식부터 해보자사실 구글에 검색하면 바로 나오는 간단한 (?) 조건문이지만한번도 제대로된 설명을 보지 못했고 정확하지 않은 부분을 발견해서 포스팅하게 되었다. 😖 HTML 부분을 참고하고자 첨부한 사진이다.크게 볼 건 없지만 혹시나 자바스크립트 삐약이인 나같은 사람들을 위해.. 햇갈리지 말라고 올려본다! 👍( 화질이 왜이렇게 안좋지..? ) 123456 /** list부분을 스크롤시 발생하는 함수 **/ $("#list").scroll(function(){ if ($(this)[0].scrollHeight - Math.round($(this).scrollTop()) == $(this).outerHeight()){ alert('..

정말 오랜만에 글을 쓴다..!지난번 JSP중이던걸 이어서 추가한다고 다른 공부를 못했다..2018/05/15 - [Web Programming] - JAVA Script 1편 + 자바스크립트 기본2018/05/15 - [Web Programming] - Java Script 2편 + 자바스크립트 문서 객체 모델2018/05/16 - [Web Programming] - Java Script 3편 + 자바스크립트 문서 객체 조작자바스크립트의 기초에 이어서 jQuery라는 친구를 한번 만나 보려고한다. 이미 지난번에 jQuery사용한 코드를 올렸지만 그래도 기초는 중요하니까 😝 오늘 배송받은 따끈따끈한 자바스크립트 + jQuery 완전 정복 스터티 친구와 함께 해보려 한다 !1편의 목차를 보니 for, if,..

간단한 페이지 틀 하나 만드는데도 초보인 나에게는 시간이 엄청 걸리는지라 오랜만에 이렇게 글을 쓰게 된다. 😥이전글 - [Web Programming] - CSS 속성 정리편 + 추가 기타 속성과 키워드이전글에서 포스팅했던 CSS 속성 외에도 웹 페이지를 만들다 보면 새로운 친구들을 만나게 되어 응용하면서 정리했었다.로그인 & 회원가입 페이지에 이어서 게시글이 나타나는 '메인 페이지'를 만들면서 새로 만난 속성들을 정리하는 시간을 가져보고자 한다 ! 우선 이번 메인페이지에서는 CSS와 조금 더 동적인 부분을 구현해보고자 JQuery를 사용해봤다.그리고 요즘 반응형 웹이라는걸 많이 사용해서 ( 내 블로그 또한 그렇고 ! ) 깊게 공부한건 아니지만 구글을 통해 흉내만 내봤다...👶좌측 초록색 부분은 내가 만..

JSP를 MySQL과 연동하고 있는 도중 잘 되던 코드에서 갑자기 아래과 같은 오류가 발생했다. com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: No operations allowed after connection closed. 구글에 찾아보니 오류가 발생하는 이유는 MySQL 커넥션이 일정 시간동안 미 사용되어 커넥션이 해제되어 발생하는 문제라고한다.이런 경우 재접속을 해주어야한다.https://forums.mysql.com/read.php?39,112048,112146#msg-112146MySQL 사이트에 들어가보면 실제로 8시간 후에 종료된다고 설명되어 있으며, 대부분 경험하는 오류라고한다. 😠한 가지 해결책으로 제시 된 ..