무딘붓의 코딩기록

다크모드가 대중화 되면서 여러 모양의 다크모드 버튼을 만나볼 수 있습니다.이미 여러 디자인이 공개되어 있지만, 저는 조금 더 독특한 버튼을 만들어보고 싶었습니다. 이번 게시글에서는 위 이미지처럼 해와 달이 떠오르고 지는 애니메이션이 포함된 다크모드 버튼을 만드는 방법을 소개하겠습니다. 1. 다크모드 토글 버튼 만들기 🌜document.addEventListener("DOMContentLoaded", function () { const savedTheme = localStorage.getItem("color-theme") || "light"; document.documentElement.setAttribute("color-theme", savedTheme);});const toggleButton = ..

링크를 나타내기 위한 방법으로는 이렇게 파란색에 밑줄을 그어 표현하는 것이 가장 일반적이지만, 때로는 디자인을 위해 다른 방법으로 링크를 표현해야하는 경우가 있습니다. 그중에서 링크 뒤에 특정한 기호나 아이콘을 달아서 링크를 표현해 보겠습니다. 한번만 사용할거면 그냥 태그 안에 기호까지 포함해서 링크로 만들어 주면 되지만, 여러번 사용하는 경우 매우 번거로우므로 CSS로 특정 class의 링크 뒤에 기호가 들어가도록 구현하는 방법을 알아보겠습니다. :after 셀렉터(선택자) :after는 가상 클래스(pseudo-class) 셀렉터중 하나로, 지정된 요소 뒷부분에 내용을 넣을 때 사용하는 셀렉터입니다. 사용방법은 다음과 같습니다. a:after { content: '↗️'; } 위와 같이 CSS를 완성..