-
상대(relative) 단위
고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 단위.
%, vw, vh, em, rem 등.절대(absolute) 단위
어떤 상황에서든 항상 고정된 길이를 나타내는 단위.
많이 사용되는 px, pt, cm, in 등.font-size: 10px; 일 경우 em값일 경우, 상대 단위도 다음과 같이 비례해서 증가되게 된다.다.
0.5em = 10 px x 0.5 = 5px
1em = 10 px x 1 = 10px
2em = 10 px x 2 = 20px
3em = 10 px x 3 = 30pxfont-size: 20px; 일 경우 em값일 경우, 상대 단위도 다음과 같이 비례해서 증가되게 된다.
0.5em = 20 px x 0.5 = 10px
1em = 20 px x 1 = 20px
2em = 20 px x 2 = 40px
3em = 20 px x 3 = 60pxrem
rem에서 r은 root.
최상위 요소를font-size 속성 값 의미. HTML에서 최상위 요소는 <html>이므로 rem은 html 요소의 font-size 속성 값이 기준이 된다.html { font-size: 10px; }.c1 { font-size: 20px; width: 10em; /* 100px */ }.ca2 { font-size: 20px; width: 10rem; /* 100px */ }c1의 width는 100px, ca2의 width는 200px가 된다.
'Html Css JavaScript' 카테고리의 다른 글
Css GridTemplate 'auto-fit' 'auto-fit' (0) 2022.11.22 Css 글자 꾸밈(텍스트) 관련 스타일 (0) 2022.11.21 Css 글꼴(font, 폰트) 관련 스타일 (0) 2022.11.21 Css 적용 방식 - inline, 내부, 외부 (0) 2022.11.21 Node.cloneNode() (0) 2022.11.21 Css GridTemplate Ex1 (0) 2022.11.21 Css GridTemplate Areas (0) 2022.11.21 Css GridTemplate Gap 간격 (0) 2022.11.21