웹프로그래밍 css (19) font -size

🔥오늘의 목표🔥

font-size를 배워보자! 속성값이 굉장히 다양하게 많아서 잘 정리해둬야겠다.

📕 font-size

• 폰트의 크기(대문자 "M"의 크기)를 지정한다.

font-size: keyword | length | initial | inherit ;

📒 속성값

• medium
  웹브라우저에서 정한 기본 글자크기입니다.

• midium에 대한 키워드
  사용자의 기본 폰트 medium에 대한 상대적인 크기이다.
  브라우저마다 다르게 정의되어 있어 잘 사용하지 않는다. (브라우저마다 값이 다르다.)
  - xx-small, x-small, small, large, x-large, xx-large

• 부모 요소에 대한 키워드
  부모 요소의 글자 크기에 대한 상대적인 글자 크기입니다.
  - smaller:0.8배, larger:1.2배

• length
  단위(px, %, em, rem)를 사용해 크기를 정합니다.
  단위에 따라 특징이 결정된다.

• %
  부모요소의 font size를 기준으로 백분율계산 된 값을 지정한다.

• viewport unit
vw, vh단위를 사용하며 뷰포트에 따라 유동적인 font-size를 지정할 수 있다.
  vw는 뷰포트 width의 1%, vh는 뷰포트 height의 1% 값을 가진다.

📒px를 사용한 font-size (절대값)

• 정적이며, 사용자가 폰트크기를 바꿀 수 없다. (접근성문제에서 성능이 떨어진다.)

📒em값 (상대값)

• 부모 요소의 폰트 크기에 따라 배율을 적용한다.

🔹계산방법

• 브라우저 기본 값은 보통 16px이다.
  em = 구하고자 하는 엘리먼트의 pixel 값 / 부모 엘리먼트의 font-size pixel 값
• 계산을 용이하기 위해 body태그의 폰트 크기 값을 10px(62.5% 나 0.625em)로 정의하고 하위 요소의 값을 지정한다.
  이때 6px = 0.6em 로, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em로 계산 할 수 있다.

🔸문제점

body {  font-size: 62.5%; }
span {  font-size: 1.6em; }
<div>
<span>Outer <span>inner</span> outer</span>
</div>

👉 Outer inner outer이 동일하게 적용되지 않고 inner의 값은 한번더 계산이 되어 outer과 값이 달라진다.
더 알아보기

📒rem값 (상대값)

• 최상위 html의 요소에 크기에 따라 배율을 적용한다.

📒 % (상대값)

• 부모 요소의 폰트 크기에 따라 배율을 적용해 em과 동일하게 동작한다.

😎오늘의 배운 점😎

열심히 했다. 휴~