CSS/개념정리
[속성] max-width, max-height, min-width, min-height
xowoony
2022. 9. 10. 20:10
학습일 : 2022. 09. 07
max-width 속성
해당 요소의 최대 가로길이를 지정하기 위해 사용한다.
max-height 속성
해당 요소의 최대 세로길이를 지정하기 위해 사용한다.
min-width 속성
해당 요소의 최소 가로길이를 지정하기 위해 사용한다.
min-height 속성
해당 요소의 최소 세로길이를 지정하기 위해 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>max-width, max-height, min-width, min-height 속성</title>
<style>
.box {
width: 50vw;
min-width: 20rem;❤
max-width: 40rem;❤
height: 10rem;
background-color: rgb(200, 100, 100);
}
</style>
</head>
<body>
<div class="box"></div>❤
<span id="value" style="font-size: 2rem;">?</span>
<script>
const box = window.document.body.querySelector('.box');
value.innerText = box.getBoundingClientRect().width / 16 + 'rem';
window.addEventListener('resize', () => {
value.innerText = box.getBoundingClientRect().width / 16 + 'rem';
});
</script>
</body>
</html>============실행결과==============