안녕하세요! 요즘 웹사이트에 다크 모드 기능 많이들 넣으시죠? 저도 얼마 전에 직접 구현해봤는데 생각보다 간단하더라고요. 그래서 오늘은 여러분들께 자바스크립트와 CSS를 이용해서 다크 모드를 웹사이트에 적용하는 방법을 알려드리려고 해요! 어렵게 생각하지 마세요. CSS 변수 활용부터 자바스크립트를 이용한 다크 모드 상태 저장까지, 차근차근 따라 하면 누구든 쉽게 구현할 수 있어요. 특히 토글 버튼으로 다크 모드를 켜고 끄는 것도 직접 만들어 볼 거예요. 사용자 설정에 따라 다크 모드가 적용되도록 하는 방법까지, 제가 직접 경험하면서 쌓은 노하우를 아낌없이 공유할게요. 준비되셨나요? 그럼 지금 바로 시작해 봐요!
자, 이제 본격적으로 다크 모드를 켜고 끄는 마법의 버튼! 토글 버튼을 만들어 볼까요? 웹사이트에 다크 모드 기능을 추가할 때 가장 먼저 떠오르는 건 뭘까요? 바로 눈에 딱! 보이는 토글 버튼이죠! 마치 전등 스위치처럼 말이에요. 사용자들이 쉽게 다크 모드를 켜고 끌 수 있도록 직관적인 버튼을 만들어야 해요. 버튼 디자인은 웹사이트 전체 디자인과 조화를 이루는 것이 중요하답니다. 너무 튀거나, 아니면 너무 눈에 띄지 않아도 안 되겠죠? 그 균형을 잘 맞춰야 한답니다!
자, 그럼 HTML부터 시작해 볼게요. <button> 요소를 사용해서 버튼을 만들 거예요. 간단하죠? 여기에 id 속성을 추가해서 나중에 자바스크립트로 이 버튼을 제어할 수 있도록 해줄 거예요. 예를 들어, id="darkModeToggle"과 같이 말이죠. 이렇게 하면 자바스크립트에서 document.getElementById("darkModeToggle")를 사용해서 이 버튼 요소에 접근할 수 있답니다. 참 쉽죠?
다음은 CSS! 버튼 스타일을 지정해 줄 차례예요. 버튼의 크기, 색상, 폰트 등을 원하는 대로 설정할 수 있어요. 예를 들어, 둥근 모양의 버튼을 원한다면 border-radius 속성을 사용할 수 있고요, 배경색은 background-color 속성으로, 텍스트 색상은 color 속성으로 변경할 수 있답니다. 버튼에 호버 효과를 추가해서 사용자 경험을 향상시키는 것도 잊지 마세요! 마우스를 올렸을 때 버튼 색상이 살짝 변하거나, 그림자가 생기면 훨씬 더 인터랙티브한 느낌을 줄 수 있겠죠?
여기서 중요한 팁 하나! 웹 접근성을 고려해서 버튼에 aria-label 속성을 추가하는 것을 추천해요. 시각 장애가 있는 사용자들이 스크린 리더를 사용할 때 버튼의 기능을 정확하게 이해할 수 있도록 도와주는 역할을 한답니다. aria-label="다크 모드 토글"과 같이 추가하면 스크린 리더가 “다크 모드 토글”이라고 읽어주겠죠? 작은 배려지만 큰 차이를 만들 수 있어요!
자, 이제 버튼을 클릭했을 때 실제로 다크 모드가 적용되도록 자바스크립트 코드를 작성해 볼게요. addEventListener 메서드를 사용해서 버튼 클릭 이벤트를 감지하고, 다크 모드를 켜고 끄는 함수를 실행하도록 연결해 줄 거예요. 이 부분은 다음 섹션에서 자세히 다룰 테니 걱정 마세요! 일단 버튼을 만들고 스타일을 지정하는 것까지 완료했으니, 다음 단계로 넘어가 볼까요? 벌써부터 멋진 다크 모드 기능이 눈앞에 그려지는 것 같지 않나요? ^^ 다음 섹션에서는 CSS 변수를 이용해서 다크 모드와 라이트 모드를 전환하는 방법을 알아볼 거예요. 기대되시죠?! 자, 그럼 다음 섹션에서 만나요~!
자, 이제 본격적으로 CSS 변수를 이용해서 다크 모드와 라이트 모드 사이를 멋지게 춤추듯 넘나들게 해볼까요? 마치 마법처럼요! ✨ CSS 변수(CSS Custom Properties, 또는 CSS Variables)는 테마 전환을 쉽고 효율적으로 관리하는 데 정말 강력한 도구예요. 한번 써보면 그 매력에 푹 빠지실 거예요! 😄
CSS 변수는 이름에서 알 수 있듯이, 값을 저장하는 변수입니다. `–`로 시작하는 이름을 가지고 있어요. 예를 들어 --bg-color: #ffffff;처럼요! 이렇게 정의된 변수는 var() 함수를 사용해서 참조할 수 있답니다. background-color: var(--bg-color); 처럼요. 참 쉽죠? 😊
자, 그럼 이 CSS 변수를 어떻게 테마 전환에 활용할 수 있을까요? 🤔 바로 :root 선택자와 body.dark-mode 선택자를 이용하는 거예요!
:root 선택자는 문서의 최상위 요소를 선택하는데, 여기에 선언된 CSS 변수는 모든 요소에 상속됩니다. 기본 테마(라이트 모드)의 색상 값을 여기에 저장해 둘 거예요. 예를 들면 이렇게요:
:root {
--bg-color: #ffffff;
--text-color: #000000;
--primary-color: #007bff;
--secondary-color: #6c757d;
}
이렇게 하면 배경색, 텍스트 색상, 그리고 주요 색상과 보조 색상까지 깔끔하게 정의할 수 있답니다. 여기서 #007bff는 파란색, #6c757d는 회색이에요. 색상 코드를 직접 쓰는 것보다 변수를 사용하면 나중에 색상을 변경해야 할 때 훨씬 편리하겠죠? 😉
다음으로, body.dark-mode 선택자를 사용해서 다크 모드의 색상 값을 정의해 볼게요. body 태그에 dark-mode 클래스가 추가되면 이 선택자가 적용되면서 다크 모드 스타일이 활성화되는 거죠! 짜잔! ✨
body.dark-mode {
--bg-color: #121212; /* 진한 회색 배경 */ --text-color: #ffffff; /* 흰색 텍스트 */ --primary-color: #5555ff; /* 어두운 파란색 */ --secondary-color: #cccccc; /* 밝은 회색 */}
여기서는 배경색을 진한 회색, 텍스트 색상을 흰색으로 바꿨어요. 주요 색상과 보조 색상도 다크 모드에 맞게 조정했고요. 이렇게 하면 body 태그에 dark-mode 클래스가 추가될 때마다 웹사이트의 색상이 짠! 하고 바뀌게 됩니다. 마치 변신 마법 같죠?! 🎩✨
HTML 요소에서는 var() 함수를 사용해서 이 변수들을 참조하면 돼요. 예를 들어, 다음과 같이요:
<body>
<div style="background-color: var(--bg-color); color: var(--text-color);">
안녕하세요! 저는 다크 모드를 지원하는 텍스트입니다.
</div>
</body>
이렇게 하면 div 요소의 배경색과 텍스트 색상이 CSS 변수 값에 따라 동적으로 변경될 거예요. 라이트 모드에서는 흰색 배경에 검은색 텍스트, 다크 모드에서는 진한 회색 배경에 흰색 텍스트로 말이죠! 참 신기하죠? 🤩
CSS 변수를 사용하면 테마 전환뿐만 아니라, 웹사이트 전체의 디자인을 일관성 있게 유지하는 데에도 큰 도움이 됩니다. 색상 팔레트를 정의하고, 이를 CSS 변수로 관리하면 나중에 색상을 변경해야 할 때 코드의 여러 부분을 수정할 필요 없이 변수 값만 변경하면 되니까요! 정말 편리하죠? 👍
만약, 더 복잡한 테마 전환 효과를 원한다면, CSS Transition이나 Animation과 함께 사용해 보세요. 훨씬 부드럽고 자연스러운 테마 전환 효과를 만들 수 있을 거예요! 마치 영화의 한 장면처럼요! 🎬
자, 이제 여러분도 CSS 변수의 마법 같은 힘을 경험해 보세요! 다크 모드는 이제 시작일 뿐입니다! 더욱 창의적이고 멋진 웹사이트를 만들어 보세요! 🚀 다음 단계에서는 자바스크립트를 이용해서 다크 모드 상태를 저장하는 방법을 알아볼 거예요! 기대해 주세요! 😉
후~ 드디어 다크 모드 토글 버튼도 만들었겠다, 이제 본격적으로 자바스크립트를 활용해서 다크 모드 상태를 저장해 볼까요? 버튼 클릭할 때마다 다크 모드가 켜졌다 꺼졌다 하는 건 좋지만, 페이지를 새로고침하면 도로아미타불~?! 이런 불상사를 막기 위해 우리는 사용자의 선택을 기억해야 해요!
자, 그럼 어떻게 사용자의 다크 모드 설정을 기억할 수 있을까요? 브라우저에는 localStorage 또는 sessionStorage라는 아주 강력한 도구가 있어요! 이 녀석들을 이용하면 사용자의 브라우저에 직접 데이터를 저장할 수 있답니다. localStorage는 브라우저를 닫았다 다시 열어도 데이터가 유지되는 반면, sessionStorage는 세션이 종료되면 (탭이나 브라우저 창을 닫으면) 데이터가 사라져요. 다크 모드 설정처럼 사용자가 브라우저를 닫았다가 다시 열어도 유지되어야 하는 정보는 localStorage에 저장하는 것이 좋겠죠?
localStorage는 key-value 쌍으로 데이터를 저장해요. 예를 들어, localStorage.setItem('darkMode', 'enabled')와 같이 사용하면 darkMode라는 key에 enabled라는 값이 저장되는 거죠. 반대로 localStorage.getItem('darkMode')를 사용하면 enabled라는 값을 가져올 수 있어요.
자, 이제 실제 코드를 볼까요? 토글 버튼의 클릭 이벤트 리스너 안에 다음과 같은 코드를 추가해 보세요.
const toggleButton = document.getElementById('dark-mode-toggle'); // 토글 버튼 요소 가져오기
const htmlElement = document.documentElement; // html 요소 가져오기 (CSS 변수 적용을 위해)
toggleButton.addEventListener('click', () => {
if (htmlElement.classList.contains('dark-mode')) { // 이미 다크 모드가 활성화된 경우
htmlElement.classList.remove('dark-mode'); // 다크 모드 비활성화
localStorage.setItem('darkMode', 'disabled'); // localStorage에 'disabled' 저장
} else { // 다크 모드가 비활성화된 경우
htmlElement.classList.add('dark-mode'); // 다크 모드 활성화
localStorage.setItem('darkMode', 'enabled'); // localStorage에 'enabled' 저장
}
});
// 페이지 로드 시 localStorage 확인 및 다크 모드 적용
window.addEventListener('load', () => {
const savedDarkMode = localStorage.getItem('darkMode');
if (savedDarkMode === 'enabled') {
htmlElement.classList.add('dark-mode');
}
});
이 코드에서는 localStorage.setItem('darkMode', 'enabled')와 localStorage.setItem('darkMode', 'disabled')를 사용해서 다크 모드 상태를 저장하고 있어요. 그리고 페이지가 로드될 때 localStorage.getItem('darkMode')를 사용해서 저장된 값을 확인하고 다크 모드를 적용하는 거죠! 이렇게 하면 사용자가 페이지를 새로고침하거나 브라우저를 닫았다 다시 열어도 다크 모드 설정이 유지된답니다!
여기서 잠깐! 왜 html 요소에 dark-mode 클래스를 추가하고 제거하는 걸까요? 그건 바로 CSS 변수를 사용해서 다크 모드를 구현하기 때문이에요! html 요소에 dark-mode 클래스가 있으면 CSS에서 :root.dark-mode 선택자를 사용해서 다크 모드 스타일을 적용할 수 있죠.
localStorage는 웹 개발에서 정말 유용한 도구에요! 다크 모드 상태 저장뿐만 아니라 사용자 설정, 캐싱 등 다양한 용도로 활용할 수 있답니다.
후~ 드디어 다크 모드 토글 버튼도 만들고, CSS 변수를 이용해서 테마 전환도 깔끔하게 구현했고, 자바스크립트로 다크 모드 상태까지 저장했어요! 이제 마지막 관문만 남았네요?! 바로 사용자 설정에 맞춰 다크 모드를 적용하는 거예요! 생각보다 간단하니까 너무 걱정하지 마세요~^^
자, 사용자 설정이라고 하면 뭐가 떠오르시나요? 🤔 맞아요! 사용자가 직접 다크 모드를 켜고 끌 수 있도록 하는 거죠! 그런데 단순히 켜고 끄는 것만 생각하면 재미없잖아요~? 그래서 저는 세 가지 옵션을 준비했어요. “항상 밝게”, “항상 어둡게”, 그리고 “시스템 설정에 따르기” 이렇게요! 이 세 가지 옵션을 통해 사용자에게 더욱 풍부하고 만족스러운 경험을 제공할 수 있답니다.
“항상 밝게”는 말 그대로 웹사이트가 항상 밝은 테마를 유지하는 거예요. 다크 모드를 좋아하지 않는 사용자나, 특정 환경에서 밝은 테마가 더 적합한 사용자를 위한 옵션이죠. 반대로 “항상 어둡게”는 웹사이트가 항상 다크 테마를 유지하도록 하는 옵션이에요. 다크 모드를 사랑하는 사용자, 밤에 웹사이트를 자주 이용하는 사용자에게 딱! 맞는 옵션이겠죠?
“시스템 설정에 따르기”는 조금 더 스마트한 옵션이에요. 사용자의 운영체제(OS) 또는 브라우저의 다크 모드 설정을 감지해서 웹사이트 테마를 자동으로 전환해주는 기능이죠! 윈도우 10이나 macOS Mojave 이상, 그리고 최신 브라우저들은 대부분 다크 모드 설정을 지원하고 있으니, 이 옵션을 통해 사용자에게 최적화된 경험을 제공할 수 있어요. 정말 편리하지 않나요? 👍👍
자, 그럼 이 옵션들을 어떻게 구현할 수 있을까요? 바로 matchMedia API를 사용하면 돼요! matchMedia는 CSS 미디어 쿼리를 자바스크립트에서 사용할 수 있도록 해주는 강력한 도구랍니다. window.matchMedia('(prefers-color-scheme: dark)')를 사용하면 사용자의 시스템 설정이 다크 모드인지 아닌지 확인할 수 있어요. 참 쉽죠?
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
prefersDark.addEventListener('change', () => {
// 시스템 설정 변경 시 테마 전환 로직 실행
updateTheme();
});
function updateTheme() {
const userSetting = localStorage.getItem('theme'); // 사용자 설정 가져오기
if (userSetting === 'light') {
document.body.classList.remove('dark');
} else if (userSetting === 'dark') {
document.body.classList.add('dark');
} else if (prefersDark.matches) {
document.body.classList.add('dark');
} else {
document.body.classList.remove('dark');
}
}
위 코드를 보면 localStorage를 사용해서 사용자 설정을 저장하고 불러오는 것을 볼 수 있어요. localStorage는 브라우저에 데이터를 저장하는 간단하고 효율적인 방법이에요. 사용자가 웹사이트를 다시 방문했을 때, 저장된 설정을 불러와서 다크 모드를 적용할 수 있도록 해주죠!
updateTheme 함수는 사용자 설정과 시스템 설정을 확인하고, 그에 따라 웹사이트 테마를 전환하는 역할을 해요. userSetting 변수에 저장된 값이 ‘light’이면 밝은 테마를, ‘dark’이면 어두운 테마를 적용하고, ‘system’이면 시스템 설정에 따라 테마를 전환해요. prefersDark.matches는 시스템 설정이 다크 모드인지 아닌지 확인하는 데 사용돼요. 만약 true라면 다크 모드를 적용하고, false라면 밝은 테마를 적용하는 거죠.
이렇게 사용자 설정에 따른 다크 모드 적용까지 완료했어요! 🎉 이제 사용자들은 자신에게 가장 편안한 환경에서 웹사이트를 이용할 수 있게 되었답니다! 개발자 입장에서도 사용자에게 더 나은 경험을 제공할 수 있게 되어 정말 뿌듯하네요! 😄 다크 모드 기능은 웹 접근성을 높이는 데에도 큰 도움이 되니, 꼭 한번 구현해 보시길 추천드려요! 😉
자, 이렇게 해서 자바스크립트와 CSS를 활용한 다크 모드 구현, 어렵지 않게 해냈죠? 토글 버튼을 만들고, CSS 변수로 멋지게 테마도 바꿔보고, 심지어 사용자 설정까지 저장하는 방법까지 알아봤어요. 이제 여러분의 웹사이트에도 방문자를 위한 작지만 세심한 배려, 다크 모드를 직접 추가해 볼 차례예요. 처음엔 조금 낯설 수도 있지만, 막상 해보면 생각보다 간단하다는 걸 느낄 거예요. 다크 모드로 웹사이트의 분위기를 바꿔보고, 사용자들에게 더 나은 경험을 선물해 보는 건 어떨까요? 직접 구현하면서 뿌듯함도 느끼고, 실력도 쑥쑥 키워보세요! 혹시 궁금한 점이 있다면 언제든 질문해주세요. 함께 더 멋진 웹을 만들어가요!
안녕하세요! 데이터 분석에 관심 있는 분들, R을 배우고 싶은 분들 모두 환영해요! R에서 데이터를 다루는…
안녕하세요! 데이터 분석의 세계에 뛰어들고 싶은데, 뭔가 막막한 기분 느껴본 적 있으세요? R 언어를 배우다…
안녕하세요! R 언어로 데이터 분석하는 재미에 푹 빠져계신가요? 오늘은 R에서 정말 유용하게 쓰이는 리스트(List)에 대해…
R 언어로 데이터 분석을 시작하셨나요? 그렇다면 제일 먼저 친해져야 할 친구가 있어요. 바로 벡터(Vector)랍니다! R은…
안녕하세요! R을 배우는 여정, 어떻게 느끼고 계세요? 혹시 숫자, 문자, 참/거짓처럼 기본적인 데이터 타입 때문에…
안녕하세요! R을 이용한 데이터 분석, 어디서부터 시작해야 할지 막막하셨죠? R 초보자분들이 가장 먼저 마주하는 어려움…