createElement(), appendChild(), innerWidth 등(과제2)

function createElement() {
  const h1 = document.createElement("h1");
  document.body.appendChild(h1);
  h1.innerText = "Hello@@";
  h1.style.color = "white";
}

function changingColor() {
  const width = window.innerWidth; // 함수 내부에서 변수 생성. 밖에서 생성하면 함수가 적용되지 않는다. 
  if (width < 600) {
    document.body.style.backgroundColor = "blue";
  } else if ((width >= 600) & (width < 800)) {
    document.body.style.backgroundColor = "yellow";
  } else if (width >= 800) {
    document.body.style.backgroundColor = "green";
  }
}

createElement();
window.addEventListener("resize", changingColor);

• 윈도우 창 크기가 변할 때마다 document의 배경색 변경하기

  	document.body.style.backgroundColor = "red";

• Document.createElement()
  이 메서드는 지정한 태그네임의 HTML 요소를 생성한다. 태그를 생성하고 innerText를 했는데 document에 텍스트가 나타나지 않았다. 태그만 만들고 어느 위치에 둘지 정하지 않았기 때문이다. appendChild() 적용 후에 텍스트가 나타났다.

    const h1 = document.createElement("h1");

• Node.appendChild()
  이 메서드는 한 노드(h1)를 특정 부모 노드(body)의 자식 노드 리스트 중 마지막 자식으로 붙인다.

  document.body.appendChild(h1);

• document.body.style.backgroundColor가 반복되어 변수에 할당하려 했으나 적용되지 않았다.
  그 이유가 뭔지 알고싶다.