그냥, 일단 써내려가자

안녕하세요 무택입니다 :) 오늘은 탭 클릭 시 원하는 내용을 노출시키거나 비노출시키는 코드에 대해 써보도록 하겠습니다. 정말 많이 사용하는 기능인데 아래에서 최대한 쉽게 설명을 해볼 테니 아래 내용을 참고해 주세요😀 탭 클릭 시 내용 노출, 비노출 HTML/CSS tab one tab two tab three tab one contents tab two contents tab three contents JS const tab = document.querySelectorAll('.tab'); const con = document.querySelectorAll('.content'); tab.forEach(function(tab_btn, index){ tab_btn.addEventListener('click'..

안녕하세요 무택입니다 :) 오늘은 JS를 이용해서 before&after를 효과적으로 보여줄 수 있는 UI를 카피 구현해 봤습니다. 원본 사이트에서 JS코드를 찾아볼 수가 없어서 따라서 구현하는데 애를 조금 먹었는데, 아래에서 자세한 코드들을 살펴보시죠😊 읽기 전 보면 좋은 글 [JavaScript]마우스 좌표를 구할 수 있는 다양한 방법 HTML/CSS JS const find_xy = document.getElementsByClassName('find_xy')[0]; find_xy.addEventListener('mousemove', function (e) { const moveX = e.offsetX; document.querySelector('.af_img_div').style.width = (5..

안녕하세요 무택입니다 :) 오늘은 JS를 이용해서 map+area에 `hover`효과를 줄 수 있는 방법에 대해 써보려고 합니다. `hover`는 css에서 간단하게 줄 수 있는 코드인데 area에도 적용이 가능할까 궁금증에 찾아본 내용인데 JS를 이용해서 적용할 수 있더라구요. 주로 css에 접근할 수 없는 경우에 쓸 수 있는 코드로, 아래에서 같이 한 번 살펴봐요😀 HTML JS function on_mouse() { document.querySelector('#main_img').src = `https://i.ibb.co/RPM1KMJ/image-16.png`; } function off_mouse() { document.querySelector('#main_img').src = `https://i..

안녕하세요 무택입니다 :) 오늘은 JS를 이용해서 최신 웹디자인 및 퍼블리싱 카피를 해보려고 합니다. 기능은 마우스 올렸을 때 이미지가 나타나서 마우스를 따라다니는 기능입니다. 아래에서 자세한 내용을 살펴봅시다😀 HTML/CSS ALL IMAGE VIDEO FILM JS const div_wraps = document.querySelectorAll('.div_wrap'); document.getElementById('list_ul').addEventListener('mousemove', function(e){ const x = e.clientX; const y = e.clientY; div_wraps.forEach(function(div){ div.style.transform = `translate(${..

안녕하세요. 무택입니다 :) 오늘은 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('..

안녕하세요 무택입니다 :) 오늘은 자바스크립트로 HTML 내에 코드를 어떻게 넣을 수 있는지 알아보겠습니다. 필요에 따라 HTML 내에 하드코딩식으로 넣을 수도 있지만 하나의 방법으로 자바스크립트로 어떻게 넣는지 알아보겠습니다🤔 왜 JS를 이용해서 넣을까? 단순히 한 부분에 간단한 코드를 넣는다고 하면 하드코딩으로 직접 HTML 코드를 넣으면 편합니다. 하지만 넣어야 하는 코드가 `input_text`라는 클래스를 가진 요소 앞에 모두 넣으려고 한다면 하드코딩으로 하기 힘듭니다. 그렇기 때문에 JS를 활용하면 특정 클래스나 아이디 등의 관련된 위치에 넣을 수 있는 편의성이 있습니다. HTML/CSS post JS window.addEventListener('load', function () { let p..

안녕하세요 무택입니다 :) 오늘은 로딩화면에 대해 써보려고 합니다. 국내에는 로딩화면을 쓰는 사이트가 많지는 않은 걸로 알고 있습니다. 하지만 해외 사이트를 돌아다니다 보면 로딩화면을 구현한 사이트를 자주 접하는 것 같습니다. 여기에 대한 이유는 아래에서 설명드리겠습니다. 로딩화면이 필요성 사이트의 소스들(이미지, 영상, 스크립트 등)이 많아서 무거운 사이트의 경우 사이트에 들어가면 화면이 모두 다 불러와지는 데까지 시간이 소요됩니다. 1초에서 길면 10초까지 걸리는 사이트들이 있는데 시간이 1초 정도만 넘어가더라도 사용자는 지루함을 느낄 수 있습니다. 시간이 더해질수록 기다리지 않고 사이트를 이탈하는 경우가 많아지죠. 이런 이유에서 어쩔 수 없이 사이트가 무거워지는 경우 로딩화면을 구현함으로써 기다림을..

안녕하세요 무택입니다 :) 오늘은 js에서 스크롤 높이의 개념에 대해 정리해보려고 합니다. js를 처음 배우기 시작한 사람으로서 스크롤 높이의 개념이 아직 헷갈릴 때가 많습니다. 그래서 스스로 정리할 겸 이해하기 쉽게 설명해 보도록 하겠습니다. 스크롤 높이 종류 높이의 종류는 크게 세 가지로 정리할 수 있습니다. 1. 요소의 실제 높이(전체 높이) : scrollHeight 2. 요소의 보여지는 높이 : clientHeight 3. 요소를 스크롤한 값 : scrollTop 이미지를 클릭하면 크게 볼 수 있어요 위 텍스트 박스의 클래스가 txtBox라고 한다면 document.querySelector(".txtBox").scrollHeight; //txtBox 요소의 전체 높이 document.queryS..

안녕하세요 무택입니다 :) 오늘 알아볼 기능은 html요소에 클래스 추가하는 함수를 만들어보려고 합니다. 오늘의 기능에서 포인트는 기능을 함수로 만들어서 반복 사용에 편하게 만드는 것입니다. 오늘의 예제 코드 1.HTML/CSS - 글자수가 5를 넘어가면 클래스 추가 글자입력: 2.JS - let title = document.querySelector('#title'); //요소에 클래스 추가하는 함수 function addClass(el, className) { el.classList.add(className); } function removeClass(el, className) { el.classList.remove(className); } function print(){ let prtLang = d..