• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 다크모드

스마트폰이나 컴퓨터를 사용할 때 눈이 피로하지 않도록 다크모드를 사용해본 적 있으신가요? 다크모드는 기본적으로 밝은 색상을 어두운 색상으로 변경하여, 사용자가 눈의 피로를 덜 느끼도록 돕습니다. 다크모드는 텍스트 색상, 배경 색상, 입력 필드, 버튼 등의 스타일을 변경하여 구현할 수 있습니다.

위 사진처럼 다크모드라는 테마를 사용하여 밝은 화면에서 어두운 화면으로 전환할 수 있습니다.

/* 1. 불켜진방 */
.CSS_불켜진방 {
	color: black;
	background-color: white;
}

/* 2. 불꺼진방 */
.CSS_불꺼진방 {
	color: white;
	background-color: black;
}

const JS_전구기능 = (event) => {
	if(event.target.checked === true){
		document.body.className = "CSS_불꺼진방";
	} else {
		document.body.className = "CSS_불켜진방";
	}
}

먼저 CSS로 다크모드에 적용할 스타일을 지정해준 후, Javascript 함수로 다크모드로 전환하는 기능을 구현해줍니다.

아래 실습 코드를 참고하여 학습해주세요!

📝 실습 코드