Tech/CSS6 웹사이트 마우스 커서 바꾸기 커스터마이징 - CSS와 JavaScript 방법 총정리 (Custom Cursor Tips) 1. 서론오늘은 웹사이트에서 마우스 커서를 JavaScript와 CSS를 이용해 바꾸는 방법에 대해 자세히 알아보겠습니다.웹사이트를 더 감각적으로 만들고 싶거나, 게임/이벤트 페이지 등에서 사용자 경험을 향상시키고 싶으신가요?그렇다면 커서를 커스터마이징하는 방법이 큰 도움이 될 수 있습니다.기본적인 커서 변경부터, 이미지 커서를 직접 따라다니는 고급 방식까지 예제를 중심으로 소개해드릴게요.2. CSS로 커서 바꾸기 (가장 간단한 방법)2.1. 기본 커서 스타일 적용CSS만으로도 커서를 쉽게 변경할 수 있습니다.* { cursor: pointer; /* 또는 crosshair, move 등 기본 커서 종류 */}2.2. 이미지 커서 적용하기커스텀 이미지를 사용할 수도 있어요.* { cursor: url.. 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. Flexbox 늘 염두에 두고 있었지만 제대로 공부해본 적 없던 Flexbox를 이번 기회에 확실히 정리해보고자 한다. 그동안 주로 대학교와 관공서 프로젝트를 진행했기에 IE 구 버전 대응 이슈 때문에 사내 프로젝트에서 Flexbox의 사용을 지양해왔었는데, 타 회사들의 작업물을 살펴보면서 여러 비효율적이고 구시대적인 CSS 정렬 방법을 Flexbox로 간편하게 해결할 수 있다는 걸 느꼈다. 또, 이 기술이 나온 지 시간이 꽤 흘러서인지 예전보다 크로스 브라우징의 어려움이 많이 없어졌고 꽤 많은 국내 사이트들에서도 Flexbox를 사용하고 있다. 먼저 Flexbox의 기본 기능을 공부해보고, 간단한 페이지를 만들어 Flexbox로 레이아웃을 구축해보기로 한다. 나아가 사내 프로젝트에서도 팀원들과 이야기하여 작은 컴포넌.. 2021. 2. 16. nth-child, nth-of-type selector 12345678910111213141516171819202122232425262728293031/* 7, 14, 21, 28 번째 box 배경색 변경 (7의배수) */.box:nth-child(7n){ font-size:14px;}/* 22번 부터 이후 모든 box 폰트색 변경 */.box:nth-child(n+22) { font-size:14px;}/* 1번째 부터 4번째 까지 box 배경색 변경 */.box:nth-child(-n+5) { font-size:14px;}.box:nth-of-type(-n+6){ font-size:14px;}/* 16번째 부터 19번째 까지 box 배경색 변경 */.box:nth-child(n+16):nth-child(-n+19) { font-size:14px;}/* 맨.. 2018. 10. 18. 부모의 높이가 0일 때, 높이를 잡는 방법 이번 포스팅에서는 CSS 시 특정 요소의 부모 높이가 0이 될 때, 그 부모의 높이를 잡는 방법에 대해 알아보겠습니다. 부모의 높이가 0이 될 경우, 별문제가 되지 않는 경우도 있지만 대부분의 경우, 뒤 영역이 앞 영역을 타고 올라오는 등 UI 레이아웃이 깨지는 현상이 있어 문제가 됩니다. 이를 해결하기 위한 방법을 함께 알아보겠습니다. 1. 부모의 높이가 0이 되는 원인 1.1. float 속성 사용 자식 요소에게 float 속성을 부여한 것이 가장 대표적인 원인입니다. 최근에는 display: flexbox, grid 등의 레이아웃 관련 CSS 속성이 추가되어 float 속성을 이용해 레이아웃을 잡는 일이 적어졌는데요. 그렇지만 기존 사이트를 유지보수 하거나, 새로운 사이트를 구축할 때도 float .. 2018. 9. 5. Reset CSS Eric Meyer’s “Reset CSS” 2.0 http://meyerweb.com/eric/tools/css/reset/HTML5 Doctor CSS Reset http://html5doctor.com/html-5-reset-stylesheet/Yahoo! (YUI 3) Reset CSS http://yuilibrary.com/yui/docs/cssreset/Normalize.css 1.0 https://github.com/necolas/normalize.css 2018. 7. 9. 이전 1 다음
