그냥, 일단 써내려가자

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

웹사이트에서 PC와 모바일 사용자에게 각각 다른 경험을 제공해야 할 때가 있습니다. 특히 PC에서만 제대로 작동하는 기능이나 모바일에 최적화된 별도 페이지로 연결해야 하는 경우, 사용자의 디바이스를 감지하여 적절한 URL로 연결하는 기능이 필요합니다.이 글에서는 JavaScript와 미디어 쿼리를 활용해 PC 사용자는 새 탭으로 특정 URL을 열고, 모바일 사용자는 다른 URL로 리다이렉트하는 함수를 구현해 보겠습니다. 이 방법은 별도의 라이브러리 없이 순수 JavaScript만으로 구현 가능합니다.  ① PC에서는 새탭으로 이동, 모바일에서는 alert창 띄워서 접속 막기function pcOnlyLink(url) { const isMobile = window.matchMedia('(max-wid..

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

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

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