[CSS] em, rem, %

1. 폰트 크기에서의 em, rem, %
1) px
2) em vs. rem
3) %
4) 정리
2. 폰트가 아닌 다른 요소에서의 em, rem, %

1. 폰트 크기에서의 em, rem, %

1) px

장점: Easy to understand & translateable
단점: Limited user focus & not scalable

2) em vs. rem

(1) em (element)

Size is relative to font-size
- 다른 요소의 폰트 크기와 연관된 크기 - 폰트 크기는 부모 요소의 크기에 달려있다.
단점
- %와 마찬가지로 부모 요소에서 상속받는 크기에 따라 사이즈가 달라지기 때문에 관리가 어렵다.

(2) rem (root em)

Size is relative to root element’s font size
- 현재 요소의 폰트 크기와 최상위 요소의 폰트 크기와 연결되어 있다.
- HTML에서 최상위 요소: <html>
최상위 요소에 폰트 크기를 따로 추가하지 않았다면 크기는 항상 사용자가 브라우저에 설정되어 있는대로 정해진다.
브라우저 설정 - Font size

3) %

Relative to parent element size
- 현재 작업하고 있는 요소의 부모 요소의 글꼴 크기를 참조하여 적용
단점
- 부모 요소의 크기에 따르는 종속적인 성질을 갖기 때문에 유닛이 많아지고 복잡한 구조를 가진 웹 페이지에서는 관리가 어려워질 수 밖에 없다. (Hard to manage due to cascading nature)

4) 정리

em과 %는 폰트 크기에서는 비슷한 결과를 도출한다.
rem 단위로는 폰트 크기를 항상 최상위 요소에 기반하여 계산할 수 있다.
- 최상위 요소에 따로 지정된 폰트 크기가 없다면 html 엘리멘트에 설정해줄 수 있지만 이 방법은 추천하지 않음
- html 요소에 적용된 설정이 없으면 rem 단위로 폰트 크기를 제어할 수 있음
하지만 rem이 정답인 것만은 아니다. 단위 설정은 개인 선호나 프로젝트의 요구사항에 따라 다르게 적용될 수 있다.

2. 폰트가 아닌 다른 요소에서의 em, rem, %

% 단위 사용 시 부모 요소의 너비를 참조
em과 rem을 사용하면 어떤 하위 요소에 적용되더라도 실제로 적용되는 폰트 크기 속성을 참조
- 예시 - padding
  - em 단위는 해당 요소 자체의 폰트 크기를 참조
  - rem 단위는 최상위 요소의 폰트 크기를 참조

em 예시

.food-item-content {
  font-size: 200%;
  /* padding: 16px; */
  /* padding: 10%; */
  padding: 0.1em;
  text-align: center;
}

예를 들어 브라우저 기본 폰트 크기가 22px라면,
food-item-content 클래스를 가진 div에서 폰트 크기는 font-size: 200%으로 인해 44px가 되므로,
<div class="food-item-content">의 padding값은 44px의 0.1배인 4.4px이 된다.

rem 예시

.food-item-content {
  font-size: 200%;
  /* padding: 16px; */
  /* padding: 10%; */
  padding: 0.1rem;
  text-align: center;
}

예를 들어 브라우저 기본 폰트 크기가 22px라면,
html 요소에 아무런 font-size 설정이 없는 경우 최상위 html 요소의 폰트 크기도 22px이므로
<div class="food-item-content">의 padding값은 22px의 0.1배인 2.2px이 된다.

저작자표시 (새창열림)

'💻 Programming > HTML, CSS' 카테고리의 다른 글

[CSS] 변환과 전환 (Transformations & Transitions) (0)	2024.01.10
[CSS] html, :root, * 선택자 (0)	2024.01.10
[HTML] 웹 문서의 기본 구조: header, main, footer (0)	2023.05.19
[CSS] BEM (Block-Element-Modifier) (0)	2023.02.25
[CSS] CSS, 그리고 스타일 시트 (0)	2023.02.20

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[CSS] em, rem, %

1. 폰트 크기에서의 em, rem, %

1) px

2) em vs. rem

(1) em (element)

(2) rem (root em)

3) %

4) 정리

2. 폰트가 아닌 다른 요소에서의 em, rem, %

'💻 Programming > HTML, CSS' 카테고리의 다른 글

1. 폰트 크기에서의 em, rem, %

1) px

2) em vs. rem

(1) em (element)

(2) rem (root em)

3) %

4) 정리

2. 폰트가 아닌 다른 요소에서의 em, rem, %

'💻 Programming > HTML, CSS' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역