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">
반응형
'FrontEnd > css' 카테고리의 다른 글
| [CSS] 박스 모델 (0) | 2024.06.06 |
|---|---|
| [CSS] 가상 클래스 셀렉터 (0) | 2024.06.05 |
| [CSS] 셀렉터(Selector) (1) | 2024.06.04 |
