Javascript의 div 컨테이너에 자동으로 적응
다양한 크기의 div가 있습니다. 다음과 같은 차원을 가질 수 있습니다. 높이: 780, 너비: 1390 또는 높이: 524, 너비: 930.
React 애플리케이션은 두 가지 유형의 화면에 표시됩니다. 풀 HD 1920x1080 및 4K 3840x2054.
Div의 크기와 화면이 달라서 항상 화면에서 동일한 비율을 유지하고 두 유형의 화면에서 동일한 크기를 갖기를 원합니다.
예를 들어 태블릿, 스마트폰 또는 1920x1200 화면과 같은 다른 유형의 화면에서는 div가 달라지기를 원합니다. 최대한 유연하게 만들고 싶습니다.
4K에서는 div가 화면의 나머지 부분보다 훨씬 작게 보이지만 Full HD에서는 div가 화면의 대부분을 차지합니다.
다음과 같이 vh와 vw를 사용해 보았습니다.
으아악이렇게 하면 각 화면 유형에 대해 동일한 vh와 vw를 얻을 수 있습니다. 하지만 4k 화면에서는 div가 Full HD에서 더 많은 공간을 차지하기 때문에 제대로 작동하지 않습니다.
이것이 제가 달성하고 싶은 결과입니다(분명히 다른 유형의 화면에서도 작동하길 원합니다). 저를 도와주시는 모든 분들께 미리 감사드립니다
