그냥, 일단 써내려가자

JavaScript로 모바일 기기 감지하기안녕하세요 무택입니다 :)오늘은 프론트엔드 개발할 때 정말 자주 필요한 모바일 기기 감지 방법에 대해 알아볼게요. 모바일과 데스크톱에서 각각 다른 UI를 보여주고 싶을 때 많이 고민하셨죠? 😊다양한 방법이 있지만, 각각의 장단점을 비교해서 가장 좋은 방법을 알려드릴게요! 특히 초보자분들도 쉽게 따라 할 수 있도록 자세히 설명해 드릴게요~1. 미디어 쿼리로 모바일 감지하기 (가장 추천해요!)제가 가장 추천하는 방법은 미디어 쿼리를 사용하는 거예요! 간단하고 정확해서 요즘 웹 개발에서 가장 많이 쓰이는 방법이랍니다.function detectMobile() { // 화면 너비가 768px 이하면 모바일로 판단해요 return window.matchMedia('(..

안녕하세요 무택입니다 :)오늘은 오랜만에 JS 기능을 들고 왔습니다😀오늘의 주제 "" iframe 불러올 때 자동 높이 맞추기 "" 입니다. iframe을 불러올 때 높이가 고정값이면 좋지만그렇지 않은 경우도 있어요.모바일에 iframe이 들어간다던가, 반응형 사이트라던가..그런 경우에 반드시 필요한 기능이죠.아래에서 코드 바로 확인해 보시죠😎  HTML/JS  코드 설명코드 원리불러올 `iframe`의 높이를 측정`iframe`을 불러올 때, 높이를 위에서 측정한 값으로 부여``를 사용해 불러올 때 위 기능 실행 상세 설명 아이프레임을 작성할 때 중요한 점은 id 부여, scrolling 설정, 스크립트 실행입니다.  function height_cal() { var ifrm_height = ..

안녕하세요 무택입니다 :) 오늘은 탭 클릭 시 원하는 내용을 노출시키거나 비노출시키는 코드에 대해 써보도록 하겠습니다. 정말 많이 사용하는 기능인데 아래에서 최대한 쉽게 설명을 해볼 테니 아래 내용을 참고해 주세요😀 탭 클릭 시 내용 노출, 비노출 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초 정도만 넘어가더라도 사용자는 지루함을 느낄 수 있습니다. 시간이 더해질수록 기다리지 않고 사이트를 이탈하는 경우가 많아지죠. 이런 이유에서 어쩔 수 없이 사이트가 무거워지는 경우 로딩화면을 구현함으로써 기다림을..