인프런 React 강의 듣고 사이트 만들기 _ Front 작업 07. 메모창 만들기 (마우스로 움직일 수 있게 만들기)
기본 스티커 메모를 아시나요? 헤더 부분을 드래그하면 이동되는 것과 메모 입력하는 기능을 흉내내보았는데요. 제 사이트에는 딱 저 2가지 기능만 필요하여 저 부분만 작업했습니다! Memo.js import React, { useCallback, useRef, useState } from 'react'; import styled from 'styled-components'; const Wrap = styled.div` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; background: yellow; border: 1px solid #c0c0a4; box-sizing: border-box; `; c..
마우스로 창을 움직여보자!
폴더창이나 인터넷 창 등..... 보통 상단부 부분을 마우스로 꾹!누르고 움직이면 창을 이동시킬수 있잖아요? 이렇게요 ↓↓↓ 오늘은 이 기능을 만들어 보도록 하겠습니다.! ^^ 먼저 움직일 객체를 만들기위한 작업을 합니다. HTML 이곳을 드래그 하세요. 대충 모양을 꾸며줄게요. CSS .wrap{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; border: 1px solid #ddd; border-radius: 5px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); overflow: hidden; } .header{ padding: ..
jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. mouseenter & mouseover 마우스가 이벤트로 on 메서드를 통해 사용할 수도 있다. 요소에 내부로 들어왔을 때 실행된다. 차이점 mouseenter 자식영역으로 이동했다고 재 감지되지 않는다. mouseover 자식영역으로 이동했을때 재 감지된다. // HTML // jQuery // 마우스를 #box에서 #child로 이동해도 코드는 다시 실행되지 않음 $('#box').mouseenter(function(){ // 코드 작성 }); // 마우스를 #box에서 #child로 이..
jQuery는 DOM 객체를 탐색, 접근하여 조작하는 여러가지 방법을 제공한다. 실무에서 많이 사용하는 메서드 위주로 요약해서 작성하였으며 정확한 정보들을 확인하고 싶다면 jQuery 공식 사이트를 참조하면 된다. on 이벤트를 제어할 수 있는 메서드이며 과거에 사용하던 bind, delegate, live 메서드들의 모든 기능을 제공한다. 이벤트를 중첩해서 적용하고 싶은 경우 공백을 통해 입력한다. $('button').on('click mouseenter', function(){ // 코드 작성 }); $('button').on('click', onClickFunction); function onClickFunction(){ // 코드 작성 }; one 이벤트를 제어할 수 있는 메서드이며 on과 동일..