📝TIL📝

230811_TIL

과부하가즈아 2023. 8. 11. 21:52

부제: addEventListener 등록 함수에 조건문 추가하기

<과제 조건>

웹 페이지의 너비 변화마다 color변화 주기
페이지의 너비가 1152를 넘어가는 경우 yellow,
너비가 1152보다는 작지만 768을 넘어가는 경우 purple,
너비가 768보다 작으면 blue로 웹 페이지의 색이 변하도록 하고 싶다. 

<참고>
classList : 요소에 적용된 클래스들의 이름을 리스트 형태로 반환해 줍니다. 
remove : classList의 메서드입니다. classList를 통해 반환된 리스트 중에서 원하는 클래스를 제거할 수 있습니다. 
add : classList의 메서드입니다. classList의 리스트에 원하는 클래스를 추가할 수 있습니다. 
innerWidth : 브라우저의 가로 길이를 나타내는 Window 객체의 프로퍼티입니다. 

 

📌문시해알

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Challenge</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="title">
      <h1>😀Hello😀</h1>
    </div>
    <script src="app.js"></script>
  </body>
</html>
// app.js
const title = document.querySelector(".title");

function sizeColorChange() {
  if (window.innerWidth > 1152) {
    title.style.color = "yellow";
  } else if (1152 > window.innerWidth && window.innerWidth > 768) {
    title.style.color = "purple";
  } else if (window.innerWidth < 768) {
    title.style.color = "blue";
  }
}

window.addEventListener("resize", sizeColorChange);
//console.log(window.innerWidth);1536

으로 우선 참고에 있는 innerWidth를 통해 window.innerWidth를 해서 현 웹의 innerWidth가 1536인 것을 확인해서 조건절에 다음과 같은 색이 나올 수 있도록 색에 맞는 조건을 작성했다. 

 

😣웹 페이지 전체의 색을 변화시켜야 했는데 title을 지정한 div태그 영역으로의 글자 색만 변했다. 

title.style.color = "blue";

 

그래서 웹 페이지 전체의 배경색 변화에 대해 구글링하다가 https://dasima.xyz/html-body-background-color-%EB%B3%80%EA%B2%BD/를 읽어봤고 다른 방도는 명확하지 않아서 그냥 div태그를 지워버리고 body에 class를 지정해서 해보기로 했다. 

HTML body background color 변경하는 방법

1. <body> 배경색 CSS 선택자 지정
body
{
  background-color: orange;
}​

 

2.<body> 태그에 인라인 스타일 삽입
인라인 스타일로 직접 배경색을 지정하는 것은 나중에 편집이 불편하므로 추천하는 방법은 아니다. 대신 우선순위가 높아서 적용이 CSS보다 먼저 된다.
<body style="background-color: orange;">
  <h1>제목</h1>
    <p>본문</p>
</body>​

2를 착안해서 그냥 class를 부여해버림!

→ body태그에 color이라는 class를 부여했고

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Challenge</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body class="title">
    <h1>😀Hello😀</h1>
    <script src="app.js"></script>
  </body>
</html>

 

→ 너비의 조건마다 className이 부여될 수 있도록 했다. 직접적인 색의 변화가 아닌 

// app.js
const title = document.querySelector(".title");

function sizeColorChange() {
  if (window.innerWidth > 1152) {
    title.className = "max";
  } else if (1152 > window.innerWidth && window.innerWidth > 768) {
    title.className = "middle";
  } else if (window.innerWidth < 768) {
    title.className = "mini";
  }
}

window.addEventListener("resize", sizeColorChange);

 

→ 각 너비의 마다 class를 다르게 지정하도록 해서 그 class에 맞게 background-color을 지정해주었다. 

/* style.css */
body {
  font-family: sans-serif;
}
h1{
  color: white;
}
.max{
  background-color: rgba(243, 247, 54, 0.938);
}
.middle{
  background-color: rgb(133, 9, 150);
}
.mini{
  background-color: rgb(0, 119, 255);
}

➕Hello를 처음에는 변화 없이 했다가 페이지 사이즈가 바뀌면 배경색이 바뀜과 동시에 흰색으로 하고 싶었다! 그래서 

 

→ h1에도 class를 지정해주고

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Challenge</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body class="color">
    <h1 class="hello">😀Hello😀</h1>
    <script src="app.js"></script>
  </body>
</html>

 

→ querySelector로 h1에 class 지정해준걸로 불러와서 h1으로 지정해두고, 함수 h1ColorChange가 작동되면 글자 색이 변하도록 하고, 함수의 작동은 window.addEventListener("resize", h1ColorChange);로 window에 이벤트를 주어서 사이즈가 변하면 해당 함수를 실행하도록 했다. 

// app.js
const color = document.querySelector(".color");
const h1 = document.querySelector(".hello");

function sizeColorChange() {
  if (window.innerWidth > 1152) {
    color.className = "max";
  } else if (1152 > window.innerWidth && window.innerWidth > 768) {
    color.className = "middle";
  } else if (window.innerWidth < 768) {
    color.className = "mini";
  }
};
function h1ColorChange() {
  h1.style.color = "white";
};


window.addEventListener("resize", sizeColorChange);
window.addEventListener("resize", h1ColorChange);

 

→ css파일에서 h1에 기본으로 부여했던거 삭제(삭제함으로써 기본인 검정이 되고 이벤트가 실행되야 흰색으로 바뀜)

/*style.css*/
body {
  font-family: sans-serif;
}
.max{
  background-color: rgba(243, 247, 54, 0.938);
}
.middle{
  background-color: rgb(133, 9, 150);
}
.mini{
  background-color: rgb(0, 119, 255);
}

 

 

😀 많이 어려운 과제는 아니지만 기억 안쪽에 있는,,, 걸 아주 많이 상기시켜줘서 다시 복기해보는 기회라 생각되어 너무 만족하는 챌린지이다!!! className와 querySelector, window객체에 대해 다시 찾아보는 시간이어서 유익했고 어제 과제를 응용도 해봐서 머리에 잘 남을 것 같다.