반응형 웹페이지를 만들 때 div의 높이와 너비를 비례적으로 확대하거나 축소하려면 어떻게 해야 하나요?
1. 옵션 1: 반응형으로 수행합니다. 특정 설정은 반응형으로 표시하려는 방식에 따라 다릅니다.
@media 전용 화면 및 (최소 너비: 100px) 및 (최대 너비: 640px) {
div{
너비: 100px;
높이: 100px;
}
}
@media 전용 화면 및 (최소 너비: 641px) 및 (최대 너비: 789px) {< / p>
div{
너비: 200px;
높이: 200px;
}
}
2. 옵션 2: 백분율로 수행합니다. 여기서는 약간의 트릭을 사용해야 합니다. 패딩이 백분율로 측정되면 컨테이너 너비를 기준으로 계산되므로 높이를 0으로 설정할 수 있습니다. 콘텐츠가 자연스럽게 오버플로됩니다. -bottom
height:0;
width:50%;
padding-bottom:30% p>
그러면 이 div의 높이는 너비 비율이 30%:50%입니다