Hello,

kok nae-ga ha-myun an-dweneun MAGIC...🧚

2018/07 4

웹 프로그래밍/공부일지
Input 태그 애니메이션 분석 편

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

2018.07.16 ﹒ 23:13
웹 프로그래밍
jQuery mouseover vs. mousenter 차이점에 대해 알아보기 😏

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

2018.07.13 ﹒ 10:19
웹 프로그래밍
jQuery 이벤트에 대해 알아보기 😉

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

2018.07.11 ﹒ 17:26
웹 프로그래밍
[ jQuery ] 미션 ( 물고기 움직이기 + 랜덤 스타일 적용하기 )

물고기 움직이기버튼을 누르면 물고기가 랜덤한 위치로 움직이되 패널 ( 파랑 바탕 )을 벗어나지 않도록 합니다. 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(..

2018.07.10 ﹒ 15:45