728x90
1. rem(=root em)
- rem의 r은 최상위를 뜻하는 root
- 최상위 태그 기준으로 폰트 사이즈를 결정
- 보통 최상위 태그는 <html></html>
html{
font-size: 12px;
}
div{
font-size: 1.5rem; /* 12px x 1.5rem = 18px*/
}
2. em
- 상위태그 기준으로 폰트 사이즈를 결정
html{
font-size: 12px;
}
body{
font-size: 20px;
}
div{
font-size: 1.5rem; /* 20px x 1.5rem = 30px*/
}
3. vh & vw (vertical height & vertical width)
- 브라우져 화면 크기를 기준으로 한 높이의 1/100, 즉 뷰포트의 1%
- 브라우져 화면의 width = 100px; height = 200px; 일 때 1vh = 1px / 1vw = 2px
- 실행중인 브라우져 화면의 크기에 맞춰 상대적 크기를 반환
- %와 다른점은 스크롤바 크기를 포함한 전체 크기 기준
4. vmin, vmax
- 브라우져 화면의 witdh와 height크기 min, max기준
- 브라우져 화면의 width = 100px; height = 200px; 일 때 1vmin = 1px / 1vmax = 2px
/* 정사각형 요소 */
.box {
height: 100vmin;
width: 100vmin;
}
.box {
height: 100vmax;
width: 100vmax;
}
5. ex
- 현재 폰트의 소문자 "x"높이 값 / x-높이값 / em의 절반 값
- 폰트의 중간 지점을 알아내기 위해 사용
6. ch
- 제로 문자인 "0"의 너비값을 기준함
- 20ch는 00000000000000000000의 크기를 말함
728x90
'IT > CSS' 카테고리의 다른 글
| [폰트] @font-face{} 적용하기 (0) | 2020.09.29 |
|---|---|
| [체크박스] checkbox & label 높이 조절하기 (0) | 2020.09.27 |
| [가상 클래스] first-child, first-of-type - 요소 선택하기 (0) | 2020.09.26 |
| [정렬] css로 요소 화면 가운데 위치시키기 (2) | 2020.09.26 |
