DAY 7. 글꼴 관련 스타일(2): font-size

font size: <절대 크기> | <상대 크기> | <크기> | <백분율>

 

• 절대 크기: 브라우저에서 지정한 글자 크기
• 상대 크기: 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정
• 크기: 브라우저와 상관없이 글자 크기를 직접 지정
• 백분율: 부모 요소의 글자 크기를 기준으로 백분율(%)로 표시

 

 

 

 

 

오래 전 공부했던 것 복습!

|

↪ 이 녀석 전후로 나열한 옵션들 중 하나가 그 속성의 속성값이 되어야 한다는 뜻!

 

 

 

속성값을 쓰는 곳에 <  >가 들어간다면?

     → 이것은 어떤 특정한 속성값이 아니라 이러이러한 종류의 속성값, 즉 유형을 표시하는 것이다.

 

 

• '키워드'를 사용해서 글자 크기 지정

         xx-small < x-small < small < medium < large < x-large < xx-large

 

                    ex, 

                          font-size: xx-small;

 

 

 

• '단위'를 사용해서 글자 크기 지정(절대 크기)

px	모니터의 1픽셀(1px)을 기준으로 비율값을 지정.
pt	'포인트'라 부름. 일반 문서에서 많이 씀.

 

                    ex, 

                          font-size: 8pt;

 

 

 

• '단위'를 사용해서 글자 크기 지정(상대 크기)

em	부모 요소에서 쓰인 글꼴로 작성된 대문자 M의 너비(1em)를 기준으로 비율값 지정.
rem	문서 시작 부분(root)에서 지정한 크기(1rem)을 기준으로 비율값 지정.
ex	해당 글꼴로 작성된 소문자 x의 높이(1ex)를 기준으로 비율값 지정.

 

                    ex, 

                          font-size: 1rem;

 

 

 

• '백분율'을 사용해서 글자 크기 지정

     부모 요소의 글자 크기를 기준으로 계산해 지정하는 방법.

     단, 부모 요소의 글꼴 크기가 '단위'로 적혀있어야 함.

                    ex, 

                          font-size: 16px;