[CSS] 다크모드 구현하기: 사이트 편의성 높이기

소요 시간: 2분 조회수: 147

웹사이트에 다크 모드를 추가하는 것은 사용자 경험을 개선하고, 특히 저조도 환경에서 눈의 피로를 줄이는 데 매우 유용합니다. 다크 모드는 이제 많은 웹사이트와 애플리케이션에서 기본 기능으로 자리 잡았습니다. 이 글에서는 다크 모드의 원리와 구현 방법을 전문가처럼 쉽게 설명하겠습니다.


다크 모드란 무엇인가?

다크 모드는 웹페이지의 기본 색상 테마를 밝은 배경에 어두운 글자에서 어두운 배경에 밝은 글자로 변경하는 것을 의미합니다. 이는 눈의 피로를 줄이고, 특히 밤에 화면을 볼 때 편안함을 제공합니다.


다크 모드 구현하기

다크 모드를 구현하는 방법은 간단합니다. 사용자가 버튼을 클릭하면 <body> 태그에 dark-mode라는 클래스를 추가하거나 제거하여 스타일을 변경할 수 있습니다. 이를 위해 HTML, CSS, JavaScript를 활용합니다.

스타일 설정

먼저, 라이트 모드와 다크 모드의 스타일을 설정합니다. 기본적으로 라이트 모드 스타일을 지정하고, dark-mode 클래스가 추가되었을 때의 스타일을 별도로 정의합니다.

body {
    background-color: white;
    color: black;
    transition: 0.5s; /* 트랜지션 효과를 추가하여 부드러운 전환 */
}
.dark-mode {
    background-color: black;
    color: white;
}

위의 CSS 코드에서 transition: 0.5s를 추가하여 다크 모드로 전환할 때 부드러운 애니메이션 효과를 줄 수 있습니다.

자바스크립트 구현

다음으로, 다크 모드 전환을 위한 JavaScript 코드를 작성합니다. 이 코드는 body 태그에 dark-mode 클래스를 추가하거나 제거하여 테마를 전환합니다.

    function switchTheme() {
        let bodyElement = document.body;
        bodyElement.classList.toggle('dark-mode');
    }

toggle 메소드를 활용하면 현재 상태에 관계없이 클래스 추가 및 제거를 손쉽게 처리할 수 있습니다.

전환 버튼 만들기

마지막으로, HTML에 버튼을 추가하여 사용자가 클릭하면 다크 모드가 전환되도록 합니다.

<body>
    <button onclick="switchTheme()">테마 전환</button>
</body>

이제 모든 설정이 완료되었습니다. 웹 브라우저에서 HTML 파일을 열고 버튼을 클릭하면 다크 모드와 라이트 모드가 전환되는 것을 확인할 수 있습니다.


결론

다크 모드는 사용자 경험을 향상시키는 중요한 기능입니다. 위에서 설명한 방법을 따르면, 간단한 코드 수정만으로도 다크 모드를 쉽게 구현할 수 있습니다. 트랜지션 효과를 추가하면 전환이 더 부드럽고 보기 좋아집니다. 이 글을 참고하여 여러분의 웹사이트에 다크 모드를 적용해보세요.

이제 여러분도 다크 모드를 통해 사용자에게 더 나은 경험을 제공할 수 있습니다!

인기글

CSS 리스트