jonbeo 님의 블로그

다크모드는 이제 선택이 아니라 기본 옵션이 되었습니다.스마트폰, OS, 웹브라우저까지 모두 다크모드를 지원하죠. ✅ 이번 포스팅에서는CSS 변수(:root)미디어 쿼리(prefers-color-scheme)JS 토글 버튼을 조합해 실무형 다크모드 시스템을 완성해보겠습니다 ⚙️🧱 1. CSS 변수 기반 색상 시스템 만들기 :root { --bg-color: #ffffff; --text-color: #222222; --accent-color: #007bff;}body { background-color: var(--bg-color); color: var(--text-color);}a { color: var(--accent-color);} 📌 장점색상 교체가 단 1줄로 가능다크모드뿐 아니라 다른 ..

안녕하세요 😊CSS에서 색상이나 폰트 크기 같은 값을 여러 군데서 반복해서 쓰다 보면,한 번 변경하려고 해도 모든 곳을 찾아 수정해야 해서 번거롭습니다.이럴 때 **CSS 변수(Custom Properties)**를 사용하면 유지보수가 훨씬 쉬워집니다.📍 1. CSS 변수란?CSS에서 값을 변수처럼 저장하고 재사용할 수 있는 기능--변수명 형식으로 선언, var(--변수명)으로 사용변수의 스코프(범위) 설정 가능📍 2. 기본 문법:root { --main-color: #4CAF50; --font-size-lg: 20px;}h1 { color: var(--main-color); font-size: var(--font-size-lg);}:root는 문서 전체에 변수를 적용하는 전역 범위변수명은 ..