(기초) CSS - 스타일의 단위 속성 ( px, em, rem )

일반적으로  16px = 1em = 1rem  로 본다.

---

1. px : 가장 기본적인 단위 . 모니터 해상도의 가장작은 네모 칸을 px (픽셀)이라고 한다.

2. em : 부모 태그에 font-size 속성이 있을 때, 그 속성을 1em으로 계산한다.

3. rem : 기본적인 html의 font size = 1rem 으로 본다 (ex, h1의 크기는 자동으로 32px 이다. 이 때 2rem 은 = 64px 이다)

 

ex)예제

/* 예를들어 html 의 사이즉 16px라고 가정해보자 */

html {

  font-size: 16px;

}

div {

  font-size: 20px;

  width: 10em;

  /* 일때  width 값은 200px */

}

div {

  font-size: 20px;

  width: 10rem;

  /* 일때 width 값은 160xp */

}

/* 즉 rem을 사용하면 해당 태그의 font 값은 무시 된다. */