본문 바로가기

I LOVE WHAT I DO

0과 1 사이, 새로운 시작!

코드 한 줄이 세상을 바꾼다.

부족하지만 최선을 다하면 된다.

JS

총 18개

0과 1 사이에서

[HTML/CSS/JS] 로드셀 스타일 SVG 게이지 UI 만들기 (디지털 계기판 디자인) 2025. 3. 28. 14:36 안녕하세요 😎이번 포스팅에서는 SVG + JavaScript를 활용하여 만든 로드셀 스타일의 디지털 게이지 UI를 소개합니다.스마트 계기판, IoT 센서 시각화, 스마트팩토리 대시보드 등에 활용할 수 있는 멋진 디자인입니다!🔧 주요 특징SVG 기반 부드러운 곡선 게이지실시간으로 숫자와 포인터 동기화JavaScript로 원하는 수치만큼 게이지 반영 가능Gradient & Shadow를 활용한 고급스러운 디자인디지털 숫자 표시 + kg 단위 텍스트🎨 디자인 예시게이지는 중심 좌표 (112, 112)을 기준으로-140° ~ 140° 범위의 각도에 따라 움직입니다.게이지 수치 입력 → 호(Arc) + 포인터 회전중앙에는 실시간으로 디지털 숫자 표시로드셀, 저울, 계기판 등 UI에 활용 가능📦 주요 Jav..
[JavaScript] window.scrollY 값이 변하지 않는 버그 2024. 10. 24. 17:43 스크롤을 움직여도 console.log 를 출력했을 때 아무런 값이 표출 되지 않는 부분이 있었다.Google에 검색을 해서 찾아 보있을 때 body 및 html이 아닌 다른 main 태그 등등에 overflow hidden을 주면 스크롤 값이 생기지 않는다고 한다. body{overflow-x:hidden;} 이러한 형태로 바디에 두는것이 안전하다  참고자료https://stackoverflow.com/questions/17665080/overflow-x-hidden-is-breaking-jquery-scroll-event
button 안에 i태그가 있을 시 클릭 이벤트 2024. 1. 23. 13:28 document.addEventListener("click", (event) => {  for (let i = 0; i boardUpdateOpen.length; i++) {    const currentBoardUpdateBox = boardUpdateBox[i];    const clickedElement = event.target;    if (      (clickedElement === boardUpdateOpen[i] ||        (clickedElement.tagName === "I" &&          clickedElement.parentElement === boardUpdateOpen[i])) &&      currentBoardUpdateBox.style.display ===..
메뉴 왼쪽 2023. 2. 22. 11:52 메뉴 1 메뉴 2 메뉴 3
욕설 필터링 만들기 2023. 2. 21. 17:06 욕설 필터링 예제 입력:
팝업창 만들기 2023. 2. 21. 17:05 팝업 열기 팝업 내용 닫기
메뉴 버튼 클릭시 다른거는 내려가고 클릭한 버튼만 나오게 2023. 2. 21. 16:44 메뉴 1 메뉴 2 메뉴 3 메뉴 1 - 항목 1 메뉴 1 - 항목 2 메뉴 1 - 항목 3 메뉴 2 - 항목 1 메뉴 2 - 항목 2 메뉴 2 - 항목 3 메뉴 3 - 항목 1 메뉴 3 - 항목 2 메뉴 3 - 항목 3
Javascript - Array filter 사용하기 2023. 2. 20. 23:06 filter는 Array의 함수 중 가장 많이 쓰이는 3 대 함수라 한다.3개는 amp,filter,reeduce 등이 있다. filter의 활용도는 매우 높은 편이라 어디라고 정해진 곳 없이 사용되는 편이다. filter는 해석 그대로 걸러주는 역할을 하는 함수이다.주로 특정 조건을 만족하는 새로운 배열을 필요로 할 떄 사용하는 편이다. const numbers = [1, 2, 3, 4, 5];const result = numbers.filter(number => number > 3);console.log(numbers);// [1, 2, 3, 4, 5];console.log(result);// [4, 5]예제 코드는 array를 통해 주어진 값들을 filter를 통해 3보다 큰 수를 가진 값들을 걸어..
유용한 add toggle remove 용어 2023. 2. 2. 13:42 /** * 인자에 DOM 요소와 클레스명을 전달하면 해당 DOM 요소에 클레스명을 첨삭(더하거나 빼거나)해줌 * @param {document} target 클레스명을 변경하고자 하는 DOM 요소 * @param {string} className 첨삭하고자 하는 클레스명 */function toggleClassList(target, className) { target.classList.toggle(className);}/** * 인자에 DOM 요소와 클레스명을 전달하면 해당 DOM 요소에 클레스명을 더해줌 * @param {document} target 클레스명을 변경하고자 하는 DOM 요소 * @param {string} className 더하고자 하는 클레스명 */function addClassLi..
Js 이것은 상단 메뉴바가 스크롤 시 따라 올 수 있도록 제작 2023. 1. 31. 17:47 if (document.querySelector('.title_category') !== null) { const scrollC = document.querySelector('.title_category'); const scrollD = document.querySelector('.detail_title_category'); const scrollE = document.querySelector('.DescTop'); window.addEventListener('scroll', () => { if (window.scrollY >= 66) { scrollC.style.position = "fixed"; scrollC.style.top = "0"; scrollC.styl..
Js 다른 슬라이드 기능 2023. 1. 31. 17:42 if (document.querySelector('.detail_title_category') !== null) { const detailTitleCategory = document.querySelector('.detail_title_category') const detailTitleList = document.querySelector('.detail_title_list'); const scrollBtnSet = document.querySelector('.fix'); const prevBtn = document.querySelector('.prev_btn'); const nextBtn = document.querySelector('.next_btn'); // EventListener det..
Js 스크롤 기능 2023. 1. 31. 17:39 if (document.querySelector('.giftSubImgArea') !== null) { // DOM const giftSubImgList = document.querySelector('.giftSubImgList') // 테마 버튼들 모여있는 영역 const prevBtn = document.querySelectorAll('.subImgSlideBtn')[0] // 버튼 // variable const PREV_NUM = -309 // 버튼 클릭 시 이동할 픽셀 // EventListener prevBtn.addEventListener('click', () => handleControlBtn(PREV_NUM)) nextBtn.addEventListener('click',..