em

1. em 이란?

현재 요소의 컨텍스트 내에서 상위 요소의 폰트 크기를 기반으로 계산한다.

이는 웹 디자인에서 유연한 크기 설정을 가능하게 하며, 폰트 크기 뿐만 아니라 마진, 패딩, 너비 등의 다른 속성도 적용할 수 있다.

 

2. em 의 특징

1. 상대적인 크기
   • em은 절대적인 픽셀 값이 아닌 부모 요소의 글꼴 크기를 기준으로 계산된다.
   • 예를 들어, 부모 요소의 폰트 크기가 16px이라면, 1em은 16px 이다.
2. 계층적 적용
   • em 단위는 계층적으로 상속하기 때문에, 상위 요소의 폰트 크기 변경이 하위 요소에 영향을 미친다.
   • 이를 통해 전체적인 디자인의 일관성을 유지할 수 있다.
3. 유연한 디자인
   • em 단위는 반응형 웹 디자인에서 유용하게 사용한다.
   • 화면 크기나 사용자의 기본 설정에 따라 자동으로 크기를 조절 할 수 있어, 다양한 디바이스에서 호환성이 뛰어나다.
4. 모든 속성 적용 가능
   • em 단위는 폰트 크기뿐만 아니라 마진, 패딩, 너비, 높이 등의 CSS속성에도 사용할 수 있다.
   • 이를 통해 요소 간의 비율을 일관성 있게 유지 가능
5. 재귀적인 특성
   • em 의 가장 큰 특징 중 하나는 중첩된 요소에서의 재귀적인 특성이다.
   • 각 요소는 자기의 부모 요소의 폰트 크기를 기준으로 em 단위를 계산하므로, 복잡한 CSS 계층 구조에서 크게 조절이 일어나게 된다.
6. CSS 상속과 함께 사용
   • em 단위는 상속을 통해 쉽게 디자인을 변경할 수 있고, 사이트 전반에 걸쳐 일관된 스타일을 유지하는데 좋다.
   • 부모 요소의 폰트 크기를 조정하면, 자식 요소의 크기도 자동으로 조정된다.

// 기본 폰트 크기 설정
body {
  font-size: 16px; /* 기본 폰트 크기 */
}

.container {
  font-size: 1.5em; /* 24px, body의 1.5배 */
}

.container .child {
  font-size: 1.2em; /* 28.8px, .container의 1.2배 */
}

 

 

3. 장 단점

1. 장점

반응형 디자인 : 다양한 화면 크기와 해상도에 맞는 유연한 디자인을 할 수 있다.

접근성 향상 : 사용자 설정에 따라 폰트 크기가 자동으로 조절되어 접근성을 높일수 있다.

일관성 유지 : 부모 요소의 크기에 비례하여 자식 요소 크기가 결정되므로, 전체적인 디자인을 일관성으로 유지하기에 쉽다.

 

2. 단점

복잡한 계산 : 계층 구조가 복잡할수록 크기 계산이 어려워질수 있으며, 예상치 못한 크기 변경이 발생된다.

부모 요소의 의존성 : 부모 요소의 폰트 크기가 변경되면 자식 요소의 크기도 함께 변경되므로, 세심한 관리가 필요하다.