🔻반응형 메뉴바 만들기🔻 메뉴를 하나 클릭하면 튀어나오는 애니메이션과 위치이동을 한다. 다른 메뉴를 클릭하면 원래 메뉴는 원위치로 들어가고 클릭한 메뉴가 튀어나온다. 같은 메뉴를 클릭하면 원위치로 돌아간다. 기본 뼈대 이벤트 olditem 이라는 변수에 이전 클릭한 메뉴 객체를 담아 현재와 같으면 원위치로 돌아가고 다른 메뉴이면 olditem를 원위치시키고 클릭한 메뉴를 위치이동 시킨다.
🔻transition 추가하기🔻 JavaScript에서 transition을 추가하기 위해 타이머를 사용한다. 상자를 클릭하면, 회전을 하고 다시 클릭하면 회전을 멈춘다. 기본 뼈대 transition 추가하기 상자 이벤트 위 방법은 script로만 조작하는 방법으로 현재는 이벤트와 속성에 대한 변화는 자바스크립트에서 작업하고, 타이머 역할은 CSS의 transition으로 자바스크립트와 CSS 함께 사용하는 추세이다. JavaScript + CSS 같이 사용하기 transition 추가하기 상자 위와 같이 작성하면 상자는 한번 클릭할 때마다 랜덤한 각도로 회전한다.
🔻박스 사이즈 조절하기🔻 우측하단부를 클릭하고 드래그를 했을 때, 불투명도가 낮아지고 마우스 위치만큼 박스 사이즈가 조절된다. 기본 뼈대 우측하단부 눌러 사이즈 조절하기 마우스가 상자의 우측 하단부를 눌렀는지 확인하는 함수를 만든다. function isVaild(event) { //1. 현재 상자의 크기 확인 let w = parseInt(window.getComputedStyle(box1).width); let h = parseInt(window.getComputedStyle(box1).height); //2. 상자 width, height에서 10px 안쪽 영역인지 확인 if (event.offsetX >= (w-10) && event.offsetX = (h-10) && event.offsetY
🔻버전 1. position : absolute🔻 기본 뼈대 상자 여러개 Drag&Drop 상자1 상자2 상자3 이벤트 생성한 객체에 draggable 클래스만 추가하면 해당 이벤트가 적용된다. 고스트 이미지 현상 이미지를 드래그 할 때 바로 움직이지않고 색이 옅어지는 미리보기 이미지(고스트 이미지) 현상이 발생한다. event.stopPropagation(); return false; 해당 코드를 추가해준다. 전체 코드 상자 여러개 Drag&Drop 상자1 상자2 상자3 🔻버전 2. position : relative🔻 기본 뼈대 상자 여러개 Drag&Drop 상자1 상자2 상자3 이벤트
🔻상자 1개 Drag & Drop🔻 Drag & Drop : 개체 이동 인터페이스 body에 onmousedown, onmousemove, onmouseup 이벤트로 적용한다. 🔻버전 1. position : absolute🔻 기본 뼈대 drag&drop을 구현합니다. 빈 화면 클릭 방지 빈 화면에서 드래그를 했을 때, 이벤트가 발생하는 것을 방지하기 위해 누른 대상이 빈 화면인지, 상자인지 확인다. window.onmousedown = function() { if (event.target.id == 'box1') { isDown = true; } }; 클릭한 위치로 무게 중심두기 window.onmousedown = function() { //상자의 어느 부분을 눌렀는지 저장한다. x = event.o..
🔻클릭한 위치에 상자 생성하기🔻 좌클릭하면 박스 생성, 우클릭하면 박스 삭제되게 구현한다. 기본 뼈대 클릭한 위치에 상자 생성하기 이벤트
🔻클릭한 위치로 상자 이동하기🔻 좌측 상단에 몰려 있는 상자들이 클릭한 위치로 순서대로 이동한다. 클릭 한번당 하나의 상자가 이동하며, 나중에 클릭한 상자는 맨 위에 쌓인다. 기본 뼈대 상자1 상자2 상자3 상자4 상자5 무게중심 맞춰 이동하기 list[index].style.left = event.clientX - 75 + 'px'; list[index].style.top = event.clientY - 75 + 'px'; 클릭시 상자가 이동하는데 무게중심을 상자 가운데 맞추기 위해 상자 크기의 반을 빼준다. 이벤트 상자의 position이 absolute이므로 문서 좌측 상단을 기준 원점이 맞춰져있기 때문에 clientX, clientY 를 사용하여 문서 좌측 상단 기준으로 좌표를 반환받아 상자를 이..
🔻자바스크립트로 css 조작 방법🔻 1. style 프로퍼티 모든 태그는 인라인 스타일 시트와 같은 style 속성을 제공한다. 자바스크립트도 style 프로퍼티를 제공한다. 2. class 조작 간접적으로 class 조작하는 결과가 나온다. 관리차원에서 유용한 방법이다. className 프로퍼티 classList 프로퍼티 참고 : HTML 문서에 CSS를 적용하는 방법 https://steady-record.tistory.com/entry/CSS-HTML-%EB%AC%B8%EC%84%9C%EC%97%90-CSS%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95 🔻style 프로퍼티로 조작하기🔻 기본 뼈대 CSS 상자 box1 스타일 조..
🔻마우스 위로 올리면 해당 칸에 이미지 추가하기🔻 마우스가 호버했을 때만 이미지가 생성되고 마우스가 해당 칸을 떠나면 이미지가 삭제된다. 기본 뼈대 이벤트 빈틈으로 이미지가 중복으로 생성되는 것을 방지하기 위해 현재 target의 자식이 1개라도 있는 것을 확인한다. 이미지가 이미 생성되었다면 td 자식으로 이미지가 존재하므로 조건문에 걸려 이미지가 생성되지 않는다. 🔻보조키의 눌림 상태 확인 메서드🔻 event.ctrlKey event.shiftKey event.altKey 해당 보조키를 누르면 true를 반환한다. 🔻ctrl키를 눌렀을 때 다른 이미지 생성🔻 그냥 마우스를 호버했을 때와 Ctrl 키를 누르고 호버했을 때 다른 이미지가 생성된다. 기본 뼈대 동일
🔻마우스 클릭 버튼에 따라 다른 이미지 생성하기🔻 좌클릭을 하면 rect_icon01.png, 우클릭 하면 rect_icon02.png, 휠을 클릭하면 이미지가 삭제되게 구현을 할 것이다. 이미 좌클릭으로 rect_icon01.png가 생성되있더라도 우클릭하면 rect_icon02.png으로 바뀌어야 한다. 기본 뼈대 테이블 이벤트 클릭으로 td위에 img가 생기면서 내가 선택한 객체가 td이면 아직 클릭 전 이미지가 생성되지않아 새로운 이미지만 생성하면 되고, 내가 선택한 객체가 td가 아니라면 이미 이미지가 존재하는 것으로 해당 이미지를 삭제 후 새로운 이미지를 생성한다. 주의할 점은, td위에 img가 생기므로 새로 생성한 img를 td에 연결할 때는 event.target이 아닌 event.cur..
