웹/css
[css] 단위 (절대길이, 상대길이 단위들) em,rem,vw,vh
JY2
2021. 6. 28. 17:56
#절대 길이 단위
- px: 픽셀(화소)
- mm : 밀리미터
- cm : 센치미터
- in : 인치
선언방법
size1{
font-size:1px;
font-size:5mm;
font-size:1cm;
font-size:0.5in;
}
#상대 길이 단위
- em: 현재 요소의 font-size에 비례한 크기 조절
> 2.0em 일 때 현재 요소에 설정된 font-size의 2배가 된다. - rem: 현재 페이지 html태그에 설정된 font-size에 비례한 크기 조절
> 2.0rem일 때 현재 html태그에 설정된 font-size의 2배가 된다. - vw (viewport width): 현재 웹 페이지를 보고있는 프로그램의 너비에 기반
> 1vw일 때 현재 viewport width의 1%를 의미한다 - vh (viewport height): viewport의 높이에 기반한 크기 조절
> 1vh일 때 현재 viewport height의 1%를 의미한다.
선언방법
size2{
width:10.0em;
width:10.0rem;
width:30vw;
width:30vh;
}
vw와 vh는 브라우저 크기를 늘였다 줄였다하면 따라서 너비가 달라진다.