반응형
rem
"html 태그의 기본 font-size : 14px 에 비례하여 증가하는 단위"
rem 은 HTML 태그 중에서 <html></html> 태그 자체에 적용된 font-size를 기준으로 결정된다.
현재 2023년을 기준으로 font-size는 기본 14px 가 암묵적으로 적용되어 있는데,
이 때 rem을 2rem 으로 설정한다면,
실질적으로 적용되는 px은 14px 에서 2를 곱한 28px 가 된다.
예를 들어,
width : 5rem 으로 설정한다면,14px 에서 5를 곱한 70px 가 적용된다.
즉, width : 70px 가 되는 것이다.
html {
font-size : 14px
}
div {
width: 5rem; -> 실질적으로 5 * 14px = 70px 적용
}em
"em 단위를 적용한 해당 태그에 설정된 기본 font-size : 14px 에 비례하여 증가하는 단위"
em 은 em 단위를 적용한 태그에 암묵적으로 설정된 font-size 인 14 px 에 비례하여 증가하는 단위다.
예를 들어,
width : 2em 으로 설정한다면,
14px 에서 2를 곱한 28px 가 적용된다.즉, width : 28px 가 되는 것이다.
div {
font-size : 14px;
width: 2em; -> 실질적으로 2 * 14px = 28px 적용
}
반응형
'HTML & CSS' 카테고리의 다른 글
| [SCSS/SASS] 기초 사용법 정리 (0) | 2023.07.01 |
|---|---|
| [html/css] js 코드 없는 아코디언 "클릭하면 스르륵 답변창이 나오는 게시판?" (0) | 2023.02.25 |
| [HTML] <details> 및 <summary> 태그 "드롭다운이 가능한 HTML 태그" (0) | 2023.02.20 |
| [css]3d 카드 뒤집기 (0) | 2023.01.18 |
| [css] 태그 가운데 정렬 하는 법 (0) | 2022.12.27 |