그냥, 일단 써내려가자

안녕하세요. 무택입니다 :) 오늘은 JS에서 마우스 좌표를 구할 수 있는 메서드에 대해 소개해보려고 합니다. 웹 개발에 있어서 마우스 좌표를 구하는 일은 자주 생기기 때문에 거의 필수라고 생각하는데 아래에서 자세한 내용을 살펴보시죠😆 screenX,Y screenX,Y는 모니터(스크린) 기준으로 좌표를 표시합니다. clientX,Y clientX,Y는 브라우저 기준으로 좌표를 표시합니다. 아래 나오는 pageX,Y와 유사하지만 clientX,Y는 스크롤바를 신경 쓰지 않습니다. pageX,Y pageX,Y는 스크롤을 포함한 페이지를 기준으로 좌표를 표시합니다. offsetX,Y offsetX,Y는 특정(선택한) 요소를 기준으로 좌표를 표시합니다. See the Pen [javaScript]마우스 좌표 구..

안녕하세요 무택입니다 :) 오늘은 js에서 다양한 방법으로 페이지 이동시키는 방법에 대해 써보려고 합니다. 대체적으로 필요하지 않은 기능이지만 상황에 따라 필요할 수 있기 때문에 참고 삼아서 '이런 것도 있구나'정도로 봐주시면 좋을 것 같습니다. HTML 페이지 이동(현재창) 페이지 이동(새창) onclick 페이지 이동(현재창) onclick 페이지 이동(새창) JS var button = document.querySelector('.href'); button.addEventListener("click", function(){ window.location.href = "https://www.pinterest.co.kr/"; }); var button_02 = document.querySelector('..

clip-path를 활용한 동적인 마우스 오버 효과 See the Pen [아카이브]마우스 오버 액션(플러스엑스) by TytanLee (@TytanLee) on CodePen. 1. html 구조 - 이미지를 감싸는 영역은 총 두 개. 하나는 `:hover`를 주기 위한 영역, 하나는 `clip-path`를 설정할 영역 - `clip-path`를 준 영역에 `:hover`를 넣으면 `clip-path` 영역이 줄어들거나 늘어날 때 마우스 위치에 따라 효과가 무한 반복. 때문에 `clip-path` 영역 위에 `:hover`를 넣기 위한 영역을 만들어줘야 한다. 2. 효과 원리 - `.wrap`영역에 마우스를 올리면 이미지를 감싸고 있는 `div`의 `clip-path`를 줄이고, 그 안에 들어있는 `i..

spread operator(...) 설명 -1- var 어레이 = ['hello', 'world']; console.log(...어레이); // hello world -2- var 문자 = 'hello'; console.log(...문자); // console.log('h','e','l','l','o') h e l l o 1. Array에 붙이면 대괄호를 제거해줌 2. 문자에 붙이면 문자를 펼쳐줌 활용방법 -1- var a = [1,2,3]; var b = [4,5]; var c = [...a, ...b] console.log(c) // [1,2,3,4,5] // Deep copy var d = [1,2,3]; var e = [...d]; // var e = d => X(값이 공유됨) d[3] = 4;..

변수에 대한 정의 var 이름 = "Kim"; let 번호 = "000"; const 주소 = "서울"; const 영화 = {제목 : "명량", 개봉 : "0000.00"}; - 호이스팅 현상 : 변수나 함수의 선언을 스크립트 맨 위로 끌고 오는 현상 재선언 재할당 범위 var O O fucntion let X O { } const X X { } - var 변수는 호이스팅 시 undefined이 자동으로 할당 - const 변수는 오브젝트 내부의 값은 변경 가능(Ex.const 오브젝트 = { 이름 : '만두'; } => '만두'는 변경 가능 - 수정불가능한 오브젝트를 만드는 메소드 : Object.freeze(select); 변수 퀴즈 모달창0 모달창1 모달창2 버튼0 버튼1 버튼2 Template ..

this와 애로우 함수의 사용 // this의 쓰임 1 console.log(this); //window가 나옴 function 함수(){ console.log(this); //window가 나옴 } 함수(); //window.함수(); // this의 쓰임 2 // 오브젝트 함수 내에서 쓰면 그 함수를 갖고 있는 오브젝트를 말함 var 오브젝트 = { data : 'Kim', 함수 : function(){ console.log(this) } } 오브젝트.함수(); // 애로우 fucntion을 쓰면 함수 밖의 this를 그대로 가져옴 var 오브젝트2 = { data : 'Kim', 함수 : () => { console.log(this) } } 오브젝트2.함수(); // case study 3 var ..

폼 만들기 로그인하세요 전송 닫기 버튼 - 제이쿼리의 $(select).on('click', function(){})은 자바스크립트 select.addEventListener('click', fucntion(){})과 같은 의미 - 제이쿼리의 $(select).on('click', function(e){}) 함수 안에 `e`를 넣으면 `e.target`은 유저가 실제로 누른 것을 불러옴 - $(select).is(select)는 괄호 안의 값에 따라 `true`와 `false`로 반환함 - `.preventDefault()`는 `a`나 `submit`같이 페이지 이동이나 새로고침의 동작을 막아줌 (비슷한 예시로 `.stopPropagation`도 사용할 수 있는데 이 메서드는 이벤트버블링을 막아줌) 다크..

안녕하세요 무택입니다 :) 오늘은 마우스 커서를 커스텀할 수 있는 코드에 대해 써보려고 합니다. 최근에는 다양한 hover들이 많이 등장해서 이 기능도 자주 접해보신 분들이 많을 것 같은데, 아래에서 자세한 내용을 알아보시죠😉 HTML/CSS 자세히 보기 jQuery document.addEventListener("mousemove", (e) => { // 마우스 커서의 좌표를 가져옵니다. const x = e.clientX; const y = e.clientY; // cursor_div를 커서 좌표로 이동 $("#cursor_div").css('transform', 'translate(' + x + 'px, ' + y + 'px)'); // 원하는 영역에 올라오면 클래스 추가 및 제거 $('.img_f..

안녕하세요 무택입니다 :) 오늘은 웹피(webP)에 대해 써보려고 합니다. 자세한 내용은 아래를 확인해 주세요! 웹피(webP) 파일이란? 웹피(WebP)는 구글에서 개발한 이미지 파일 포맷입니다. 흔히 알고 있는 jpg, gif와 같은 파일 형식을 말하고, 인터넷 서버 환경의 대부분을 점유하고 있는 구글은 조금 더 쾌적한 서버 환경을 만들기 위해서 개발했다고 합니다. 웹피의 장점 압축률이 높아 파일 크기가 작습니다. WebP는 JPEG, PNG, GIF 등 기존 이미지 포맷보다 압축률이 높아 동일한 이미지 품질에서 파일 크기가 작습니다. 이는 웹사이트의 로딩 속도를 향상시킬 수 있습니다. 명 이미지와 애니메이션 이미지를 지원합니다. WebP는 투명 이미지와 애니메이션 이미지를 지원합니다. 이는 GIF ..

안녕하세요 무택입니다 :) 오늘은 포토샵에서 직선 그림자 디자인을 어떻게 만드는지 정말 간단한 방법으로 알아보겠습니다. 여러 가지 방법이 있겠지만 오늘 알려드리는 방법은 가장 간단한 방법으로 실무에서 활용할 때 가장 편할 거라고 생각합니다😀 예시 디자인 오늘 이런 그림자를 어떻게 만드는지 한번 알아봐요! 만드는 방법 1. 사용할 텍스트를 써서 텍스트 레이어를 만들어 줍니다. 2. 텍스트 레이어를 선택하고 'Ctrl+J'를 눌러 복사한 후, 원본 레이어보다 아래로 깔아줍니다. 3. 복사된 레이어를 선택한 상태에서 'Ctrl+T'를 눌러 자유 변형 상태로 만들어 줍니다. 그리고 왼쪽 상단의 X축과 Y축을 조절하는 곳에서 각각 1px씩 더해주고 엔터를 눌러줍니다.(오른쪽 아래로 이동해야 합니다.) 4. 이제 ..