so woon!

[속성] max-width, max-height, min-width, min-height 본문

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>

============실행결과==============

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

저작자표시 비영리 변경금지

'CSS > 개념정리' 카테고리의 다른 글

[속성] overflow 속성  (0) 2022.09.10
[속성] opacity 속성  (0) 2022.09.10
[속성] font 외 속성  (0) 2022.09.10
[속성] border 외 속성  (0) 2022.09.10
[속성] display 속성  (0) 2022.09.10
'CSS/개념정리' Related Articles more
Comments