on
자바스크립트 입문 [JavaScript] - 자바스크립트로 랜덤배경화면 만들기...
자바스크립트 입문 [JavaScript] - 자바스크립트로 랜덤배경화면 만들기...
2021-07-28
자바스크립트 학습일지입니다.
해당 내용은 생활코딩님, 노마드코더님, 드림코딩by엘리님 강의를 들으며 학습한 뒤 정리한 내용입니다.
이번 포스팅에선 웹 브라우저에서 랜덤으로 배겨화면이 변화하도록 해봅시다.
먼저, background.js 라는 자바스크립트 파일을 생성한 뒤 HTML에 import 해줍시다.
img라는 폴더를 만든 후, 배경화면으로 지정하고 싶은 이미지를 저장해줍시다.
그리고 랜덤한 이미지를 선택하는 방법은 저번 포스팅에서 했던, 방식과 동일합니다.
const image = ["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]; const chosnImage = image[Math.floor(Math.random() * image.length)]; console.log(chosnImage);
위와 같이 코드를 구현한 후, F5를 누를때마다, 콘솔창에서 choseImage가 랜덤으로 선택되는 것을 확인할 수 있습니다.
이제 해야할 것은 이 선택된 이미지를 HTML에 추가하는 것입니다.
지금까지는 해온건 JS를 통해 HTML의 뭔가를 가져오는 것이였지만
이번 포스팅에선 JS에서 이미지를 만들어 html에 추가해봅시다.
[Document.createElement()]
HTML 문서에서 Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만듭니다.
.createElement( 'h1' )
위는 다음과 같은 코드를 생성합니다.
우리는 이미지를 생성하는 것이기 때문에, document.createElement("img")를 통해 img 폴더 안에 있는
img를 생성할 수 있습니다.
const images = ["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]; const chosnImage = images[Math.floor(Math.random() * images.length)]; const bgImage = document.createElement("img"); bgImage.src=`img/${chosnImage}`; console.log(bgImage);
위와같은 코드로, 콘솔창에는 무작위로 이미지가 선택되고, 경로설정까지 할 수 있습니다.
마지막으로, 이 bgImage를 body 내부에 추가하면, 새로고침을 할 때마다 무작위로 배경화면이 설정될 것입니다.
이제 이 bgImage를 html에 추가해봅시다.
<추가>
.createElement( ) 말고도 자바스크립트를 이용해 문서에 HTML 요소를 추가할 수 있습니다.
.createTextNode()
.appendChild()
.createTextNode()는 선택한 요소에 텍스트를 추가합니다. 예를 들어
.createTextNode( 'My Text' )
는 My Text라는 문자열을 만듭니다.
.appendChild()는 선택한 요소 안에 자식 요소를 추가합니다.
[document.body.appendchild()]
.appendChild( ) 메소드는 한 요소를 특정 부모 노드의 자식 요소 리스트 중 마지막 자식으로 붙입니다. (Document.body.appenchild() 같은 경우, body의 마지막 자식으로 붙입니다.)
// 새로운 단락 요소를 생성하고 문서에 있는 바디 요소의 끝에 붙입니다. var p = document.createElement("p"); document.body.appendChild(p);
이와 반대로, .prependChild는 가장 첫번째 자식으로 붙입니다.
우리는, 우리가 산출한 무작위 배경사진인 bgImage를 body의 마지막 자식으로 붙이면 되기때문에
아래와 같은 코드를 작성합니다.
const images = ["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]; const chosnImage = images[Math.floor(Math.random() * images.length)]; const bgImage = document.createElement("img"); bgImage.src=`img/${chosnImage}`; document.body.appendChild(bgImage);
오른쪽과 같이
출처
from http://seungwoolee99.tistory.com/16 by ccl(A) rewrite - 2021-07-28 21:26:44