프밍/CSS
DAY 7. 글꼴 관련 스타일(2): font-size
태영(泰伶)
2022. 10. 31. 23:39
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;