어제는 코드 틀이 있었는데 오늘은 완전 빈칸이였다.
근데 내용은 거의 비슷해서 별로 안어려웠다.
기본 배경색은 보라색인데, 창크기를 바꿀 때마다 창크기가 클 때 배경색이 노란색, 창크기가 작을 때 파란색이 되는 코드를 작성하는게 문제였다.
여기는 내 코드
const title = document.querySelector("body");
title.innerText = "Hello!";
title.style.color = "white";
title.style.backgroundColor = "purple";
function resize() {
const width = window.innerWidth;
if (width < 800) {
title.style.backgroundColor = "blue";
} else if (width >= 800 && width <= 1000) {
title.style.backgroundColor = "purple";
} else {
title.style.backgroundColor = "yellow";
}
}
window.addEventListener("resize", resize);처음에는 창 크기에 따라서 배경색이 바뀌는거에만 신경을 썼는데 막상 니콜라스씨가 보여준 영상이랑 비교해보니까 니콜라스씨는 글씨를 h2로 한 것처럼 두꺼워가지고 js파일말고 html파일이랑 같이 해서 살짝 수정했댜
여기는 수정한 코드
<!DOCTYPE html>
<html>
<head>
<title>Vanilla Challenge</title>
<meta charset="UTF-8" />
</head>
<body>
<script src="src/index.js"></script>
<h2>Hello!</h2>
</body>
</html>위에서는 그냥 html 따로 수정 안하고 body자체에 innertext로 해서 글씨를 넣었는데 수정할 때에는 이렇게 html에다가 h2태그를 만들어주고 그걸 이용해서 js파일에다가
const title = document.querySelector("h2");
title.style.color = "white";
document.body.style.backgroundColor = "purple";
function resize() {
const width = window.innerWidth;
if (width < 800) {
document.body.style.backgroundColor = "blue";
} else if (width >= 800 && width <= 1000) {
document.body.style.backgroundColor = "purple";
} else {
document.body.style.backgroundColor = "yellow";
}
}
window.addEventListener("resize", resize);이렇게 넣었다. 근데 처음에는 if문 안에 있는 내용을 전코드처럼 title.style.backgroundColor로 하니까 전체 배경이 바뀌는게 아니라 그 div만큼 한줄에만 색이 들어가고 나머지 배경은 흰색으로 되어서 document.body로 수정했다.
근데 이 배경색이 resize했을 때에만 적용이 되는거라 처음에 resize하기 전에 새로고침만 한 상태에서는 배경이 그냥 흰색으로 되더라구욤.... 그래서 if문 앞에서 첫 시작 배경색을 보라색으로 지정해주었다. 그건 뭐 문제 아니니까 그냥 두긴 했는데 원래 그 크기에 맞는 색으로 시작되게 하는 건 어떻게 하는걸까..?
아무튼간에
여기는 결과물
https://711lt8.csb.app/
