WIL-CSS[가변단위]

가변단위

💁 오늘은 가변단위인 em과 %의 개념에 대해서 알게되었다.
그전에는 가변단위를 활용할 줄 몰라서 고정단위인 px단위만 사용했었는데
가변단위를 알면 웹사이트를 제작할 때 화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들 수 있도록 만들어줘서 반응협 웹 만들기에 좋다는 사실에 어쩌면 px보다도 더 자주 써야 될 단위라고 생각이 들었다. 그러기 위해선 가변단위 사용에 익숙해지도록 해야겠다.

vw : 브라우저 창의 width가 기준이다.
ex) 화면 넓이가 1920이면 100vw는 1920px이다.

vh : 브라우저 창의 height가 기준이다.

vmin: 높이와 너비중 짧은쪽을 100을 기준으로 하여 크기를 결정함.
☝️ vmin은 vw와 vw중 더 작은 것을 찾아 적용

vmax: 높이와 너비중 긴쪽을 100을 기준으로 하여 크기를 결정함.
☝️ vman는 vw와 vw중 더 큰 것을 찾아 적용

em: 부모의 font-size를 상속받음.
☝️ 가변크기 단위로 배수를 나타내는 단위다

rem: 부모의 font-size를 상속받지 않고, 최상위(html) 의 font-size를 기준으로 한다.

%: 부모 요소를 기준으로 비율을 표현한다.
ex) 부모가 200px고 100%라고 하면 200px이다.

em단위

 <style>
        html,
        body {
            font-size: 10px;
        }

        p {
            font-size: 2em;
            font-weight: 700;
        }

        div {
            font-size: 2em;
        }

        .one {
            font-size: 2rem;
        }
    </style>

<body>
    <h1>hello world</h1>
    <p>hello world</p>
    <div>
        <!-- 10px *2 = 20px -->
        <div>
            <!-- 20px *2 = 40px -->
            <div>
                <!-- 40px * 2 = 80px -->
                hello world
            </div>
        </div>
    </div>
    <div>
        <!-- 10px *2 = 20px -->
        <div>
            <!-- 20px *2 = 40px -->
            <div class="one">
                <!-- 40px * 2 = 80px -->
                hello world
            </div>
        </div>
    </div>
</body>

💡 (부모의 크기값 * 자식의 em 값) = 자식이 가지게 되는 크기 값

%,vw단위

코드를<style>
        .one {
            height: 200px;
            width: 50%;
            background-color: darkblue;
        }

        .two {
            height: 100px;
            width: 50%;
            background-color: red;
        }

        .three {
            height: 100px;
            width: 50vw;
            background-color: red;
        }
    </style> 입력하세요

<body>
    <!-- em, %, rem, vw, vh -->
    <div class="one">
        <div class="two"></div>
    </div>
    <br>
    <!-- vw, vh -->
    <!-- 부모가 가진 넓이를 뚫어버림 -->
    <div class="one">
        <div class="three"></div>
    </div>
</body>

차례대로 %단위와 vw단위를 적용했을 때 모습이다.

Author And Source

이 문제에 관하여(WIL-CSS[가변단위]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@codns1223/WIL-CSS가변단위

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

WIL-CSS[가변단위]

가변단위

Author And Source

좋은 웹페이지 즐겨찾기