1.크기 단위
1-1.px
픽셀 단위(화소)이다. 대부분의 브라우저는 1px을 1/96 인치로 잡는다.
<style>
.cat{
content: url("https://media1.tenor.com/m/5BYK-WS0__gAAAAd/cool-fun.gif");
}
</style>
<img class="cat" height="50px" width="50px">
![]()
1-2.%
요소에 지정된 사이즈에 상대적인 사이즈
<!DOCTYPE html>
<style>
.cat{
content: url("https://media1.tenor.com/m/5BYK-WS0__gAAAAd/cool-fun.gif");
}
</style>
<img class="cat" height="30%" width="30%">
<style>
.cat{
content: url("https://media1.tenor.com/m/5BYK-WS0__gAAAAd/cool-fun.gif");
}
</style>
<img class="cat" height="30%" width="30%">
1-3. em
요소에 지정된 사이즈에 대한 상대적인 사이즈
1em = 100%
2em= 200%
<style>
.cat{
content: url("https://media1.tenor.com/m/5BYK-WS0__gAAAAd/cool-fun.gif");
}
</style>
<img class="cat" height="30em" width="30em">
![]()
1-4.rem
html의 사이즈를 기준으로한 em
<style>
.cat{
content: url("https://media1.tenor.com/m/5BYK-WS0__gAAAAd/cool-fun.gif");
}
</style>
<img class="cat" height="30rem" width="30rem">
![]()
1-5.Viewport 단위
viewport를 기준으로 한 상대적 사이즈
vw는 뷰포트 너비의 1/100
vh는 뷰포트 높이의 1/100
vmin은 뷰포트의 너비와 높이 중 더 작은 쪽의 1/100
vmax는 뷰포트의 너비와 높이 중 더 큰 쪽의 1/100
<style>
.cat{
content: url("https://media1.tenor.com/m/5BYK-WS0__gAAAAd/cool-fun.gif");
}
</style>
<img class="cat" height="50vh" width="50vw">
![]()
