자바스크립트을 활용하여 CSS 속성을 수정할 수 있습니다.
이를 활용하여, 버튼을 클릭했을 때
웹페이지화면을 다크모드/라이트모드로 전환할 수 있는 예제를 만들어보겠습니다.
먼저, 스틱코드에 올라온 '버튼 클릭으로 웹페이지 다크모드, 라이트모드 설정하기' 코드를 즐겨찾기 추가해주세요.
<main.html>
먼저 html 코드를 작성해봅시다.
html 파일에서 스틱코드 호출태그인 setWebDisplayAppearance-HTML을 입력하면
예제 구현에 필요한 html 코드가 자동완성됩니다.
일단 HTML 코드에서는 수정없이, JS 파일과 CSS 파일을 작성해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
</head>
<script src=main.js></script>
<input id="btnDisplayMode" class="btn" type="button" value="다크모드로 전환" onclick="setDisplayAppreance(this);">
<h1>라이트/다크모드 전환 예제</h1>
<h2>[사용법]</h2>
<p>상단 우측에 있는 버튼을 누르면 다크모드 혹은 라이트모드로 전환할 수 있습니다.</p>
<img src=sample.png class="image">
</html>
<main.js>
다음으로, 버튼을 누르면 웹페이지가 라이트모드 혹은 다크모드로 변경될 수 있도록
자바 스크립트 코드를 추가로 작성해줍니다.
이전과 마찬가지로 js 파일에서 스틱코드 호출태그인 setWebDisplayAppearance-JS를 입력하면
자바스크립트 배경색 바꾸기버튼 클릭으로 웹페이지 다크모드, 라이트모드 설정하기 - js 코드가 자동완성됩니다.
setDisplayAppreance은 CSS 속성을 수정해주어 웹페이지 화면 모드를 바꿔주는 함수입니다.
이 함수는 버튼의 value에 따라 다크모드, 라이트모드에 맞게 배경색이나 텍스트 색상을 변경시켜주는 함수입니다.
함수 작동 방식을 알아봅시다.
먼저, 변경 대상이 되는 요소의 ID로 지정하여 변수에 저장해줍니다.
이번 예제에서는 body와 버튼을 각각 'body', 'btn' 변수로 선언해주었습니다.
자바스크립트로 CSS 속성값을 변경에 주려면 속성을 변경할 요소에 대해
요소.style.변경할속성 = "변경 값"; 이라고 선언해주어야 합니다.
이번 예제에서는 body의 배경색, 텍스트 색상, 버튼의 배경색, 버튼의 배경색상을 변경해보았습니다.
JS 코드 내에 있는 색상값은 원하는 대로 변경해주면 됩니다.
JS 코드도 수정 없이 넘어가도록 하겠습니다.
function setDisplayAppreance(self){
var body = document.querySelector('body');
var btn = document.getElementById('btnDisplayMode');
if(self.value === '다크모드로 전환'){ //다크모드로 전환 버튼을 누른 경우
body.style.backgroundColor = 'black'; //배경색 변경
body.style.color = 'white'; //css가 적용되지 않은 기본 텍스트 색상 변경
btn.style.backgroundColor = "yellow"; //버튼의 배경색 변경
btn.style.color = "black"; //버튼의 텍스트 색상 변경
self.value = '라이트모드로 전환';
} else { //라이트모드로 전환 버튼을 누른 경우
body.style.backgroundColor = 'white';
body.style.color = 'black';
btn.style.backgroundColor = "black";
btn.style.color = "white";
self.value = '다크모드로 전환';
}
}
<main.css>
마지막으로 css 코드를 작성해줍니다.
이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 setWebDisplayAppearance-CSS를 입력하면
자바스크립트 배경색 바꾸기버튼 클릭으로 웹페이지 다크모드, 라이트모드 설정하기 - css 코드가 자동완성됩니다.
이번 예제 시연을 위해 CSS는 수정이 필요하지 않습니다.
만약 필요하다면 원하는 부분을 원하는대로 수정해주시면 됩니다.
저는 이미지를 가운데 정렬하는 코드를 추가해보았습니다.
.btn {
float: right;
width: 200px;
height: 50px;
border-radius: 50px;
font-size: 15px;
text-align: center;
background-color: black;
color: white;
margin-top: 20px;
border: 1px solid gray;
}
p{
color: red;
}
.image{
display: block; margin: 0px auto;
}
<완성된 화면>
참고한 스틱코드
버튼 클릭으로 웹페이지 다크모드, 라이트모드 설정하기 > stickode.com/detail.html?no=2179
스틱코드
stickode.com
'JavaScript' 카테고리의 다른 글
| [JavaScript] 구글맵 API 클러스터링 만들기 (0) | 2021.07.10 |
|---|---|
| [JavaScript] 빠르게 To Do 리스트 만들기 (0) | 2021.07.08 |
| [JavaScript] summernote 빨리 구현하기 (0) | 2021.06.25 |
| [JavaScript] 검색어 자동완성 만들기 (0) | 2021.06.23 |
| [JavaScript] 입력 값 복사해서 다른 입력창에 값 넣어주기 (0) | 2021.06.14 |
