그냥, 일단 써내려가자

① HTML Amenity 안락한 생활의 편의시설 환자분들의 건강과 회복, 그리고 완벽한 통증 관리를 위해 항상 안락함과 편안함을 제공하는 병원이 되도록 최선을 다하겠습니다. Amenity 안락한 생활의 편의시설 환자분들의 건강과 회복, 그리고 완벽한 통증 관리를 위해 항상 안락함과 편안함을 제공하는 병원이 되도록 최선을 다하겠습니다. Amenity 안락한 생활의 편의시설 환자분들의 건강과 회복, 그리고 완벽한 통증 관리를 위해 항상 안락함과 편안함..

① HTML추천 컨텐츠 자연의 신비 눈부신 풍경과 자연이 만들어낸 경이로운 모습들을 담았습니다. 도시의 밤 불빛으로 가득한 도시의 야경을 담은 컬렉션입니다. ..

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..

안녕하세요 무택입니다 :)오늘은 우연히 개발자도구에서 AI기능을 발견해서 이 내용에 대해 포스팅해 보도록 할게요잉 개발에는 사알짝 발만 담그고 있는 저는 주로 개발자도구에서 Elements탭이랑 console탭만 살펴보는데 console탭에서 AI가 디버깅을 도와주는 기능을 발견했습니다.백엔드는 아무것도 몰라서 디버깅을 할 일은 없지만 이 기능에 대해 알아보도록 할게요  AI를 이용해 디버깅을 해보자 전제조건이 기능은 크롬만 사용이 가능합니다. 최신 버전의 크롬으로 확인해 주세요크롬에 로그인된 환경 1. 우선 기능을 사용하기 위해서는 개발자도구 설정에서 기능을 켜야 합니다.근데 언어를 영어로 설정해야 기능을 킬 수 있어요.(왜...)고분고분히 개발자도구 설정에서 언어를 영어로 변경해 줍시다.  2. 언어..

HTML/CSS 꿈은 AM 15:30 AM 15:30 없고요 그냥 AM 15:30 AM 15:30 놀고 싶습니다. AM 15:30  JSconst bubble_01 = () => gsap.timeline().to('.chat_wrap .bubble.first', { scale: 1, duration: .05,}, .5);const bubble_02 = () => gsap.timeline().to('.chat_wrap .bubble.first', { top: 168, duration: .05,}, .5)...

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

안녕하세요 무택입니다 :)오늘은 UX를 조금, 아주 조금이라도 향상시킬 수 있는 팁 datalist에 대해 써보겠습니다.datalist는 `input`에서 텍스트를 입력받을 때, 몇몇 예시를 보여주는 기능입니다.`select`를 사용하기에는 선택사항이 정해져 있는 건 아니고,`input`을 사용할 때 선택사항을 보여줘서 선택할 수 있는, 약간의 편리성을 더해주는 기능입니다. 사용방법사용방법은 어렵지 않습니다.See the Pen [HTML/CSS] input의 datatlist 추가 by TytanLee (@TytanLee) on CodePen. `input의 list`와 `datalist의 id`만 일치시켜 주면 선택사항을 노출시킬 수 있습니다.  사용에 적합한 상황텍스트를 입력받아야 하는데, 사용자..

안녕하세요 무택입니다 :)오늘은 아주 빠르게 '텍스트 필드에서 자동완성 비활성화하기'를 알아보겠습니다.우리는 인터넷에서 오만가지를 다 검색해 봅니다.'주식으로 부자 되기', '아무도 나를 모르고 돈 많은 부자 되기'..(여러분도 원하잖아요..)가끔 '내가 이런 것도 검색했나' 기억도 안나는 기록들이 나오는데..개발자로서 이런 기록들을 보여주지 않게 만들 수 있는자동완성 비활성화, 바로 시작합니다. input 자동완성 비활성화하기위 이미지처럼 자동완성은 `autocomplete`라는 옵션을 사용합니다.대체적으로 모든 브라우저에 활성화되어 있는데 아래 코드를 통해 확인해 보시죠See the Pen [HTML]Autocomplete 기능 by TytanLee (@TytanLee) on CodePen.첫 번째..

안녕하세요, 무택입니다 :)오늘은 부드러운 스크롤링을 위한 라이브러리 Locomotive-scroll을 들고 왔습니다. 사용 방법이 쉽지는 않은데 아래에서 최대한 쉽게 설명한 내용을 보고 사용해 보세요! Good Referance 공간기록ㅣ빈 공간에 가치를 담다공간기록이 만들어 낸 빈공간에는 공간기록과 클라이언트의 수많은 가치있는 이야기들이 새롭게 기록되어져 담깁니다.ggglog.com  HTML/CSS scroll-speed 양수 scroll-speed : 0.5 scroll-speed : 1 ..