"Frontend"는 다양한 화면 크기에 배경을 맞추는 문제와 다양한 화면 크기로 인해 배경이 확대되거나 축소되는 문제를 해결합니다.

목차

1. 문제 설명:

1. 추가 스크롤 거리가 있습니다.

2. 큰 화면으로 전환 시 배경이 작아집니다.

 2. 지식을 이해해야 함

세 가지 해결 방법:

1. HTML:

2. CSS에서:

4. 효과:

---

1. 문제 설명:

       최근에 에디터가 프로그래밍을 하다가 문제가 생겨서 노트북(15.6인치)에 배경이미지를 깔아놓고 화면이 꽉차게 보였는데 24인치나 27인치 화면으로 바꿔서 효과를 보니, 두 이미지에서 다음과 같은 문제를 발견했습니다.

1. 추가 스크롤 거리가 있습니다.

2. 큰 화면으로 변경 시 배경이 작아집니다. 

 

 2. 지식을 이해해야 함

 그것은 "vh"와 "vw"입니다.

• vw 단위는 창 너비에 따라 자동으로 크기를 변경할 수 있습니다. 1vw는 창 너비의 1%입니다.

• vh 단위는 창 높이에 따라 자동으로 크기를 변경할 수 있습니다. 1vh는 창 높이의 1%입니다.

CSS와 HMTL만 배우면 대부분의 선배들만 아는 단위가 "%"와 "px"여야 합니다.

그러나 실제 개발에서는 이 두 가지를 아는 것만으로는 충분하지 않습니다. 오늘날의 문제와 같이 "vh"와 "vw"가 필요합니다.

세 가지 해결 방법:

1. HTML:

src는 자신의 그림을 참조할 수 있습니다.

<div id="Max_box">
        <img src="The Game Map.jpg" alt="" width="100%" height="100%">
    </div>

2. CSS에서:

#Max_box {
    width: 100%;
    height: 100vh;
}

이렇게 하면 화면 크기가 다른 경우 스크롤 막대나 축소가 발생하지 않습니다.

이번에는 편집기가 vh만 사용했는데, 현재 문제를 해결하기에 충분하기 때문에,

물론 앞으로는 vh와 vw를 동시에 사용할지 개별적으로 사용할지 유연하게 전환해야 합니다.

4. 효과:

 문제가 해결되었습니다. 화면이 몇 인치에 관계없이 배경 이미지가 전체 창을 덮습니다.

글에 미흡한 점이 있으면 비판도 환영하고 안내도 환영합니다