본문 바로가기

전체 글47

웹사이트 마우스 커서 바꾸기 커스터마이징 - CSS와 JavaScript 방법 총정리 (Custom Cursor Tips) 1. 서론오늘은 웹사이트에서 마우스 커서를 JavaScript와 CSS를 이용해 바꾸는 방법에 대해 자세히 알아보겠습니다.웹사이트를 더 감각적으로 만들고 싶거나, 게임/이벤트 페이지 등에서 사용자 경험을 향상시키고 싶으신가요?그렇다면 커서를 커스터마이징하는 방법이 큰 도움이 될 수 있습니다.기본적인 커서 변경부터, 이미지 커서를 직접 따라다니는 고급 방식까지 예제를 중심으로 소개해드릴게요.2. CSS로 커서 바꾸기 (가장 간단한 방법)2.1. 기본 커서 스타일 적용CSS만으로도 커서를 쉽게 변경할 수 있습니다.* { cursor: pointer; /* 또는 crosshair, move 등 기본 커서 종류 */}2.2. 이미지 커서 적용하기커스텀 이미지를 사용할 수도 있어요.* { cursor: url.. 2025. 4. 11.
Chart.js 차트 사용법 완벽 가이드 - 반응형 설정과 Google Charts 비교 (Chart.js Tutorial) 웹사이트나 대시보드에서 데이터를 시각적으로 표현할 때, 차트 라이브러리는 매우 유용한 도구입니다.이번 글에서는 많은 분들이 사용하는 Chart.js의 기본 사용법과 반응형 대응 방법,그리고 Google Charts와의 차이점까지 자세히 알아보겠습니다.1. Chart.js란?Chart.js는 HTML5 요소를 기반으로 다양한 종류의 차트를 구현할 수 있는 오픈소스 JavaScript 라이브러리입니다.깔끔한 디자인, 간편한 설정, 가벼운 용량 덕분에 퍼블리셔와 프론트엔드 개발자 모두에게 인기 있는 라이브러리입니다.대표 특징:가볍고 빠름다양한 차트 유형 지원 (bar, line, pie 등)커스터마이징 쉬움반응형 기본 지원2. Chart.js CDN으로 불러오기설치 없이 바로 사용하려면 CDN을 사용하는 것.. 2025. 4. 11.
웹사이트에서 SVG 아이콘 활용하는 3가지 방법 (이미지보다 유연한 SVG 사용법)3 Ways to Use SVG Icons on Your Website (More Flexible Than Image Files) 이번 포스팅에서는 웹사이트에 아이콘을 넣을 때 일반적인 이미지 확장자 파일(JPG, GIF, PNG) 대신 SVG를 사용하는 방법 3가지를 소개해드리겠습니다.SVG는 크기 확대/축소 시 깨지지 않으며, CSS로 색상 조절 등 다양한 조작이 가능하다는 장점이 있어 아이콘 삽입에 특히 유용합니다.그럼 각 방법에 대해 장단점을 중심으로 하나씩 알아보겠습니다.1. .svg 확장자 이미지 파일로 넣기가장 기본적인 방법으로, 확장자가 .svg인 파일을 태그로 삽입하는 방식입니다.1.1. 장점마크업이 간단하고 다른 이미지 파일과 동일한 방식으로 다룰 수 있어 유지보수가 용이합니다.1.2. 단점CSS로 색상 변경 등의 조작이 제한적입니다. 색상 변경이 필요한 경우 적합하지 않을 수 있어요.2. 태그로 직접 삽입하기.. 2025. 4. 10.
Swiper 내부 영역 클릭 시, 의도하지 않은 슬라이드 이벤트가 발생하는 현상 해결하기 How to Resolve Unintended Slide Events When Clicking Inside a Swiper Slide  이번 포스팅에서는 Swiper 캐러셀 내부의 특정 영역을 클릭 했을 때, 사용자가 의도하지 않은 스와이퍼 슬라이드 이벤트가 발생되는 현상을 해결하는 방법을 다뤄보겠습니다.이 문제를 예를 들어 설명하자면 스와이퍼에 동영상 영역이 있고 그 동영상을 제어하는 재생/정지 버튼을 만들었는데, 그 버튼을 클릭했을 때 의도하지 않게 다음 슬라이드로 넘어가는 현상과 같은 문제입니다. 그럼 해결 방법을 알아보기 전, 해결에 사용되는 개념을 간단히 정리해보겠습니다.  1. event.stopPropagation()event.stopPropagation() 메서드는 이벤트가 캡처링/버블링 .. 2023. 10. 11.
모바일 터치 이벤트를 따라다니는 요소 만들기 mobile touchmove event의 offset 값을 따라다니는 element 만들기 이번 포스팅에서는 모바일에서 touchmove 이벤트가 일어날 때 그 터치하는 영역의 좌표값을 따라다니는 요소를 만들어보도록 하겠습니다. 이러한 기술은 복권을 긁는 UI, 그림을 그리는 기능 등을 만들 때 유용하게 사용할 수 있습니다. 1. Preview오늘 만들어볼 화면을 미리 살펴보겠습니다. 마리오가 그려진 박스 안에서 사용자가 터치 이벤트를 발생시킬 경우, 즉 모바일 환경에서 마리오를 스와이프 하거나 문지를 경우 코인이 나타나서 손가락이 터치하는대로 따라다닙니다. 그리고 사용자가 손을 떼면 동전이 사라집니다. 마리오 바깥 영역에서 터치를 시작하면 이벤트가 발생하지 않습니다. 오늘은 이런 결과물을 만들어 보겠습니다. 그럼 먼저 해결 방법을 알아보기에 앞서 해결 방법에 사용되는 개념을 간략히 정리해보겠.. 2023. 9. 12.
position: sticky 요소가 stuck일 경우에만 CSS를 적용하는 방법 이번 포스팅에서는 position: sticky 인 요소가 stuck 상태인 경우, 즉 브라우저 상에서 원하는 위치에 달라 붙었을 경우에만 해당 요소에 CSS를 적용하는 방법에 대해서 알아보겠습니다. 이러한 작업은 주로 웹사이트의 헤더가 스크롤을 내리면 상단에 달라붙어야 하는 경우, 해당 헤더의 스타일을 바꾸는 경우에 필요합니다. 물론 그 밖에 다른 영역들에도 적용이 필요한 경우도 있겠죠. 먼저 해결 방법을 알아보기에 앞서 해결 방법에 사용되는 개념을 간략히 정리해보겠습니다. 1. IntersectionObserver란?Intersection observer는 브라우저 뷰포트와 설정한 요소의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인지 아.. 2023. 9. 5.
Swiper 영역 너비가 동적으로 바뀔 경우, 내부의 콘텐츠 너비 업데이트하기 브라우저가 렌더링된 후 스와이퍼 영역의 너비를 동적으로 조정할 경우, 스와이퍼 내부의 콘텐츠 너비가 자동으로 갱신되지 않는 문제가 발생하는 경우가 있습니다. 이번 포스팅에서는 이 문제를 해결하는 방법에 대해 살펴보겠습니다. 1. 문제 확인 먼저 앞서 서론에서 이야기한 문제를 직접 확인해보겠습니다. 예시 화면은 좌, 우측의 각각의 영역이 있고 전체 너비 100%를 각각 60%, 40%로 나눠 가집니다. 좌측 영역에는 swiper 플러그인이 사용되었고, 우측 영역은 일반 콘텐츠이며 옆에 있는 QUICK 버튼을 클릭하면 열렸다 닫히는 형태의 UI 입니다. See the Pen Swiper 영역 너비가 동적으로 바뀔 경우, 내부의 콘텐츠 너비 업데이트하기 (구버전) by newstar (@newstar_) on.. 2023. 8. 30.
Chapter 12: Classes 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 12.0 클래스 MDN에서는 클래스를 다음과 같이 설명 클래스는 일차적으로 자바스크립트의 기존 프로토타입 기반 상속에 대한 문법적 설탕이다. 클래스 문법이 자바스크립트에 새로운 객체 지향 상속 모델을 도입하는 것은 아니다. 클래스는 이미 구축되어 있던 프로토타입을 기반으로 추가된 문법상으로 달달한, 즉 편리함을 제공하는 문법 클래스와 오브젝트 (Class vs. object) class class란 조금 더 연관있는 것들을 묶어 놓은 fields와 methods의 집합 template declare once no data in (data가 들어갈 fields만 들어있음) object object는 class에 직접 data를 넣어 만든 insta.. 2022. 1. 26.
Chapter 11: 자바스크립트 심볼 (Symbols) 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 11.1 심벌의 고유성 심벌은 ES6에 처음 추가된 원시 자료형으로 항상 고유성을 지님 const me = Symbol("Alberto"); console.log(me); // Symbol(Alberto) const clone = Symbol("Alberto"); console.log(clone); // Symbol(Alberto) console.log(me == clone); // false console.log(me === clone); // false 11.2 객체 속성에 대한 식별자 객체 속성의 식별자로 사용 가능 동일한 속성명이 각각 고유하게 존재해야 할 경우 사용 가능 const office = { [Symbol("Tom")]: "CE.. 2022. 1. 25.

티스토리툴바