Math 객체 기능
Math.random() 0부터 1미만 무작위의 값을 반환해준다.
Math.floor() 내림 : 소수점 버리기
Math.ceil() 올림
Math.round() 반올림
const bgImage = document.createElement("img");
JS에서 html 요소를 생성
createElement(" ")
예를 들어,
document.createElement("img")일 경우 html 내에 img 태그를 생성
bgImage.src =
img/${chosenImages};
= bgImage.src = "img/" + chosenImages
이미지 소스 = 이미지폴더/${chosenImage};
새로 생긴 img의 사진을 적용시켜준다.
document.body.appendChild(bgImage);
appendChild()
// 함수 안의 경로에 정의한 값을 가장 뒤에서 기입한다.
prepend()
// 함수 안의 경로에 정의한 값을 가장 앞에서 기입한다.
appendChild() 메소드는 주어진 요소를 특정 부모 요소의 자식 요소 목록의 맨 끝에 추가하는 역할을 한다. 따라서 document.body.appendChild(bgImage) 코드는 bgImage 요소를 body 요소의 자식 요소 목록의 맨 끝에 추가한다.
반면에 .append() 메소드는 한 번에 여러 요소를 추가할 수 있으며, 요소를 추가할 위치를 지정하지 않아도 된다. 이 메소드는 Element 인터페이스에 새롭게 추가된 메소드로서, Node.appendChild()와 같은 역할을 수행하지만, 조금 더 직관적이고 유연하다.
따라서 .append()와 .appendChild()는 기능적으로 비슷하지만, .append()는 한 번에 여러 요소를 추가하거나, 추가할 위치를 지정하지 않고도 요소를 추가할 수 있는 편리한 방법을 제공한다.
또한, .append() 메소드는 최신 브라우저에서만 지원되므로, 호환성을 고려해야 한다. 반면, .appendChild()는 오래된 브라우저에서도 지원되기 때문에 호환성에 대한 걱정이 덜 필요하다.
