본문 바로가기

jQuery9

애니메이션 - Animation Steps | 움직이는 이미지 CSS Animation Steps gif 파일의 프레임을 풀어서 하나의 이미지로 만든후 값을 지정하여 움직이는 애니메이션 효과를 만들었습니다. See the Pen stepAni by hmm365 (@hmm365) on CodePen. html step 클래스는 이미지를 넣을 stepbox 가 넘치지 않도록 영역을 잡아준후 stepbox 에 이미지를 넣습니다. 코드 보기 Start Stop css stepbox 에 해당하는 이미지크기를 원하는대로 조정한후 background 를 이용하여 프레임을 해체한 이미지를 불러옵니다. 여기서 중요한점은 크기를 조정한 결과에 따라 이미지 속도라 달라진다는것을 확인할수있습니다. 따라서 저는 원본이미지크기가 1600 / 1200 사이즈이므로 3배를 줄여 animatio.. 2022. 9. 7.
애니메이션 - CSS Intro animation animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state 종류 예시 animation-name @keyframe에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-function 애니메이션 키프레임 움직임을 설정합니다. animation-delay 애니메이션이 시작되기 전까지 시간을 설정합니다. animation-iteration 애니메이션 반복 횟수를 설정합니다. animation-derection 애니메이션 방향을 설정합니다. animation-fill-mode 애니메이션 끝.. 2022. 9. 7.
jQuery - mouseenter / movesover 차이점 mouseenter / movesover 차이점 MouseOver/Out : 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 해당 자식요소의 영역까지 포함됨 MouseEnter/Leave : 지정된 태그 요소(혹은 자신)의 영역에만 해당되며, 만약 자식요소가 있다면 해당 자식요소의 영역은 제외됨 예시 See the Pen jquery19 by hmm365 (@hmm365) on CodePen. 1번 div의 경우는 회색 영역에만 영향을 줍니다. 1번의 경우는 마우스를 우선 회색 div 범위내에 올리면 p태그로 감싸여 있는 글씨 부분의 배경이 노랑색으로 변하는걸 확인하실 수 있습니다. 그리고 다시 연두색 영역인 p태그 영역으로 마우스를 가져다 놓으면 최종적으로 하양색 선이 생기는걸 확인하실 .. 2022. 9. 5.
jQuery : 속성 관련 메서드 attr()관련 메서드 선택한 요소의 attribute(속성)를 선택, 생성, 변경할 수 있습니다. 실행 분류 형식 취득 $("a").attr("href"); 생성, 변경 $("a").attr("href", "http://icoxpublish.com").attr("target", "_blank"); $("a").attr({"href": "http://icoxpublish.com", target:"_blank"}); 콜백 함수 $("a").attr("href", function(index, h){ //index는 각 a 요소의 index 0, 1, 2 //h는 각 a 요소 href 속성1 return attribute(속성) // 각 a 요소의 속성을 생성 및 변경합니다. }); ... 다음 네이버 네이트.. 2022. 9. 5.
jQuery - 탐색 선택자 탐색 선택자 JQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 기본 탐색 선택자종류 선택자 종류 설명 children() $('div').children() div 요소의 자식 요소를 선택합니다. parent() $('p').parent() p 요소의 부모 요소를 선택합니다. parents() $('p').parents('div') p요소의 부모가 되는 모든 div요소를 선택합니다. closest() $('p').closest('div') p요소의 부모가 되는 첫번째 div요소를 찾습니다. next() $('div.m').next() div.m요소의 다음 요소를 선택합니다. nextAll() $('div.m').nextAll() div.m요소의 다음 요소.. 2022. 9. 1.
jQuery - 필터 선택자 필터 선택자 JQuery는 html 요소와 관련된 기능구현이 많아 그만큼 CSS와 매우 밀접한 관계가 있습니다. 필터 선택자는 선택자에 ':'이 붙은 선택자를 말합니다. 기본 필터 선택자 종류 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("td:first") 첫 번째 td 요소를 선택합니다. :last $("td:last") 마지막 td 요소를 선택합니다. :header $(":header") 헤딩(h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li 요소를 선택합니다. :gt() $("li:gt(0)") index가 0보다 큰 li 요소들.. 2022. 9. 1.
728x90
반응형

자바스크립트 사진

JavaScript

자세히보기