🎨CSS | 길이 단위 em, rem

원영·2023년 3월 2일

상대길이 단위 em , rem 구분

em : 부모요소의 글자크기 기준, 배수단위

rem : 최상위 요소 <html> 의 글자크기 기준, 배수단위

예시

html {
  font-size: 10px;
}

.클래스명 {
  font-size: 2rem;
}

브라우저 기본 값은 16px로, 기준 폰트 사이즈 지정한 뒤 사용
기준 폰트 사이즈 일괄적으로 수정 가능해서 모든 글씨크기 한번에 수정 가능 + 유지보수에 용이

em, rem 사용팁

폰트 사이즈는 rem으로 설정하고,
폰트의 크기에 따라 조절이 돼야 하는 값 (ex. margin, padding, radius... )들은 em으로 설정한다

예시

html

<p class="rem">
  font-size : rem / em<br />
  <button class="btn1">button</button>
  <button class="btn2">button</button>
  <button class="btn3">button</button>
</p>

css
기준 폰트 사이즈는 10px로, 폰트사이즈는 rem으로 설정함

html {
  font-size: 10px;
}
.rem {
  font-size: 2rem;
}
.rem .btn1 {
  font-size: 2rem;
}
.rem .btn2 {
  font-size: 4rem;
}
.rem .btn3 {
  font-size: 8rem;
}


/* 1. padding, radius em으로 설정한 경우 */
.rem .btn1,
.rem .btn2,
.rem .btn3 {
  padding: 0.2em 1em;
  border-radius: 0.2em;
}

/* 2. padding, radius rem으로 설정한 경우 */

.rem .btn1,
.rem .btn2,
.rem .btn3 {
  padding: 0.4rem 2rem;
  border-radius: 0.4rem;
}

결과

1번 padding, radius를 em으로 설정한 경우, 각각의 크기에 맞는 비율로 값 할당됨

2번 padding, radius를 rem으로 설정한 경우, 두번째와 세번째 button도 첫번째 button과 같은 값 할당됨

rem으로 1번과 같은 결과를 내려면 각각 따로 값 할당해 줘야함

.rem .btn1 {
  padding: 0.4rem 2rem;
  border-radius: 0.4rem;
}

.rem .btn2 {
  padding: 0.8rem 4rem;
  border-radius: 0.8rem;
}

.rem .btn3 {
  padding: 1.6rem 8rem;
  border-radius: 1.6rem;
}

원영

화이팅~~^ㅁ^/

다음 포스트

🎨CSS | 길이 단위 em, rem

상대길이 단위 em , rem 구분

예시

em, rem 사용팁

예시

결과

🗒️HTML | <a>, <wbr />, <abbr>

0개의 댓글