가변단위
💁 오늘은 가변단위인 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단위를 적용했을 때 모습이다.
