[CSS] Font Size

안녕하세요 동기 여러분! 오늘은 폰트 사이즈를 바꾸는 방법에 대해 알아봅시다.

 

Font Size

p {
  font-size: 14px;
}

잉? 이게 다입니다ㅋㅋㅋㅋ

 

하지만 이밖에도 더 많은 단위가 있으니...

 

---

 

Pixel(px)

가장 보편적으로 사용하는 폰트 사이즈의 크기를 나타내는 단위

p {
  font-size: 16px;
}

 

---

 

em(The root element's font-size) 뿌리(최상위) 요소의 폰트 사이즈!!!

현재 HTML 문서에 지정된 폰트 사이즈의 크기에 비례하여 폰트 사이즈의 크기를 나타내는 단위

(예를 들어 현재 HTML 문서의 폰트 사이즈가 14px라고 치면 1rem은 14px, 2rem은 28px입니다.)

<p>안녕하세요!</p>

* {
  font-size: 14px;
}

p {
  font-size: 2rem;    /* 최상위 폰트 사이즈가 14px이므로 2rem은 28px */
}

 

---

em

현재 부모 요소에 지정된 폰트 사이즈 크기에 비례하여 폰트 사이즈의 크기를 나타내는 단위

(예를 들어 현재 div 태그에 있는 폰트사이즈가 16px이고 그의 자식 태그인 p가 있다면 CSS에서 p의 폰트 사이즈를 1em 이라 할 때 그 크기는 16px, 2em이라면 32px입니다.)

<div>
  <p>안녕하시유!</p>
</div>

* {
  font-size: 1000px;
}

div {
  font-size: 16px;
}

p {
  font-size: 2em;  /* em으로 설정하였기 때문에 부모 요소의 폰트 사이즈의 영향을 받아 2em = 32px가 된다. */
}

---

 

※ rem? em?

쉽게 말해 rem은 최상 위에 있는 폰트 사이즈의 기준으로 크기가 변하고 em은 바로 위에 있는 폰트 사이즈의 기준으로 크기가 변합니다. (rem -> 1대 조상님 폰트 사이즈, em -> 부모님 폰트 사이즈)

 

 

---

그밖에 폰트 사이즈

사이즈	설명
medium	중간 크기 - 기본 크기 - 16px (브라우저 마다 다를 수 있음)
xx-small	더더 작은 크기 - 9px
x-small	더 작은 크기 - 10px
large	큰 크기 - 18px
x-large	더 큰 크기 - 24px
xx-large	더더 큰 크기 - 32px
smaller	부모 요소보다 작은 크기
larger	부모 요소보다 큰 크기
length	길이로 정하는 크기 length를 눌러보자.
%	부모 요소의 폰트사이즈를 퍼센트의 비율로 바뀌는 크기
initial	기본 값으로 돌리기
inherit	부모 요소의 값을 그대로 가져옴

 

 

---

 

오늘의 느낌

할말이 없음... ㅋㅋ