배경화면 웹페이지 전체크기 조정

---

수정 전

---

과정

변경해야할 부분

1. 배경화면 크기 웹페이지에 맞추기
2. 배경화면이 화면 전체를 덮게하기

초반 코드

HTML

<script class="bg" src="js/background.js"></script>

JavaScript

const images = ["0.jpg", "1.jpg", "2.jpg"];

const chosenImage = images[Math.floor(Math.random() * images.length)];

const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;

document.body.appendChild(bgImage)

CSS

.bg {
    height: 100%;

    background-position: center;
    background-size:cover; 
}

문제점

1. height, background-* 태그 등 배경화면 조정하는 태그들이 적용이 안됨
   → 해결 : 배경화면 이미지에 class 값 추가, background 태그는 backgroundImage 지정해야 사용 가능
2. CSS에서 이미지 크기 조절이나 패딩, 마진 조절은 가능하지만 웹페이지의 요소들이 이미지 위에 올라가지 않음
   → 해결 : 아래 해결방법에 서술
3. CSS에서 z-index, position을 사용하면 배경화면이 요소들을 덮음
   → 해결 :
   z-index : 배경화면에 더 낮은 숫자 지정
   position : 배경화면은 absolute, 다른 요소들은 relative 지정

여러 방법을 시도하다가 두가지 방법 발견
1. 배경화면으로 사용하려는 이미지의 CSS 속성에서 top:0; 지정
2. appendChild 를 사용하지 않고 바로 배경 이미지로 지정

해결방법 1. top:0; 지정

CSS

html, body, h1, p, #clock, #login-form, #greeting, #todo-form, #todo-list, #quote, #weather {
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 2;
}

.bg {
    position:absolute;
    left:0;
    top:0;
    width: 100vw;
    height: 100vh;
    z-index:1;
}

장점

• 강의에서 작성한 코드 사용 가능

단점

• z-index 사용해서 요소들이 배경화면 위로 올라오게 지정 해야함
• 코드가 더 많다.

해결방법 2. backgroundImage 지정

javaScript

const images = ["0.jpg", "1.jpg", "2.jpg"]; // 사진과 이름 같아야 함

const chosenImage = images[Math.floor(Math.random() * images.length)];

document.body.style.backgroundImage = `url(img/${chosenImage}`;

CSS

html, body {
    margin: 0 auto;
    padding: 0;
    position: absolute;
    z-index: 1;
    width: 100vw;
    height: 100vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

장점

• CSS에서 배경화면 크기 등 속성만 수정하면 된다
• 첫번째 방법보다 간단하고 코드가 더 깔끔한 느낌

단점

• 현재는 없음

---

수정 후

---

마치며

처음에 생각났던 해결 방법은 이미지를 바로 배경화면으로 지정하는 것이었다.

그렇게 배경화면으로 지정하고 CSS를 손보고 글을 쓰던 중 갑자기 생각나서 기존 코드를 유지하고 top 과 z-index를 다시 설정해 보니 해결됐다.

해결 방법을 찾을 때에는 top을 설정할 생각을 못 했고 z-index를 반대로 지정해서 해결이 되지 않았다.

개인적으로 두번째 방법이 더 좋은 것 같지만 일단 강의시간에 만든 코드를 사용할 예정이고 다른 부분들도 수정하다가 더 깔끔한 방법으로 바꿀 예정이다.

배경화면을 조정하면서 코드들과 더 친해졌다.