23.04.14 밝음/어두움 모드 변경

by

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="http://hyerin1201.script_0.js"></script>
  <link rel="stylesheet" href="http://hyerin1201.style_0.css">
  <title>Dom Tree</title>
</head>
<body>
  <h1 id="title">My Profile</h1>
  <div id="profile">
    <img src="/iu.jpg" alt="아이유">
    <div id="desc">
      <p class="user clicked">이름 :  <b>아이유</b></p>
      <p class="user">주소 : 서울시</p>
      <p class="user">연락처 : 010-1234-5678</p>
    </div>
  </div>
  <button>Night Mode</button>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h1 {
  font-size: 2rem;
  margin-bottom: 20px;
}
#profile {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5%;
  margin-bottom: 20px;
}
img {
  width: 200px;
  border-radius: 5%;
}
#desc {
  margin: 10px 20px;
}
p {
  font-size: 0.8rem;
  line-height: 1.8;
}
.night {
  background-color: rgb(43, 43, 43);
  color: #fff;
}
button {
  padding: 10px 15px;
  border-radius: 20px;
  border: 1px solid #fff;
  background-color: rgb(198, 255, 255);
  font-size: 16px;
  font-weight: bold;
  color: rgb(11, 132, 148);
  cursor: pointer;
}
button:hover {
  background-color: rgb(5, 156, 156);
  color: #fff;
}

자바스크립트

const bg = document.querySelector("body")
const btn = document.querySelector("button");

btn.onclick = () => {
  bg.classList.toggle("night");

  if(!bg.classList.contains("night")) {
    btn.innerText = "Night Mode"
  } else {
    btn.innerText = "Day Mode"
  }
}

'추천 관련글,