07-1 글꼴 관련 스타일
텍스트 스타일은 사용하는 글자의 모양새를 지정하는 글꼴 스타일과 웹 문서에 표시되는 텍스트를 지정하는 문단 스타일이 있음. 스타일의 종류를 굳이 나눌 필요는 없지만 font로 시작하는 속성은 글꼴과 관련 있다고 생각하면 됨.
>>> 글꼴을 지정하는 font-family 속성
웹 문서에 사용할 글꼴은 font-family 속성으로 지정함. 이 속성은 <body> 태그를 비롯해 <p>태그나 <hn> 태그처럼
텍스트를 사용하는 요소에서 주로 사용함
[기본형] font-family:<글꼴 이름> | [ <글꼴 이름>, <글꼴 이름> ]
!!!알아두면 좋아요!!!
기본형 기호 이해하기
[기본형] 표기 방식은 W3C 표준 규약에서도 사용하므로 잘 알아 두면 나중에 표준 규약을 읽기도 쉬움
① |는 나열한 옵션 중 하나가 값이 되어야 한다는 의미임
font-size: 값1 | 값2 | 값3
②속성값을 나열할 때 키워드는 그대로 나열함
font-variant: normal | small-caps
③속성값을 나열할 때 값이 아니라 유형이라면 < >로 묶음. 이때 다른 속성을 유형처럼 사용가능
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
>>> 글자 크기를 지정하는 font-size 속성
[기본형] font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
>>> 이탤릭체로 글자를 표시하는 font-style 속성
[기본형] font-style: 1.normal | 2.italic | 3.oblique
1. 기본값으로 일반적인 형태로 표시
2. 이탤릭체로 표시
3. 이탤릭체로 표시
글자 굵기를 지정하는 font-weight 속성
[기본형] font-weight : normal | bold | bolder | lighter | 100 | 200 | ... | 800 | 900
1. 기본값, 보통 굵기
2. 굵게
3. 원래보다 더 굵게
4. 원래보다 더 가늘게
5. 100~900 사이의 굵기를 표현하며 100은 가장 가늘게, 900은 가장 굵게