font-family 속성
- <body> 태그, <p>태그, <hn>태그처럼 텍스트를 사용하는 요소에 주로 사용됨
font=family : <글꼴 이름> | [<글꼴 이름>, <글꼴이름>]- 글꼴 이름을 2개 이상 지정할 때는 두 글꼴 이름 사이에 쉼표(,)를 넣어 구분.
- 글꼴이 없을 경우를 대비해서 두 번째, 세 번째 글꼴까지 생각해야 한다.
body { font=family : "맑은 고딕", 돋움, 굴림 }[기본형] 표기 방식은 W3C 표쥰 규약에서도 사용한다. 표기 방식은 아래와 같다.
- '|' 는 나열한 옵션 중 하나가 값이 되어야 한다는 의미이다.
font-size: 값1 | 값2 | 값3
// 값1 이나 값2, 값3 중 하나가 font-size 속성값이 된다.- 속성값을 나열할 때 키워드(약속한 값)는 그대로 나열합니다.
font-variant : normal | small=caps
//font-variant 속성은 normal이나 small-caps라는 값을 사용한다.- 속성값을 나열할 때 값이 아니라 유형이라면 <>로 묶는다. 이때 다른 속성을 유형처럼 사용이 가능함.
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
글자 크기를 지정하는 font-size 속성
- 글자 크기의 단위는 px(픽셀)이나 pt(포인트) 등으로 지정할 수 있고 백분율을 사용할 수 있다.
font-size : <절대 크기> | <상대 크기> | <크기> | <백분율>
// 절대크기 : 브라우저에서 지정한 글자 크기
// 상대크기 : 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정
// 크기 : 브라우저와 상관없이 글자 크기를 직접 지정
// 백분율 : 부모 요소의 글자 크기를 기준으로 백분율(%)로 표시- 키워드를 사용하여 글자 크기 지정
xx-small < x-small < small < medium < large < x-large < xx-large- 단위를 사용하여 글자 크기 지정
- CSS에서는 키워드보다 단위를 사용해서 글자 크기를 직접 지정함.
- 백분율을 사용하여 글자 크기 지정
- 부모 요소의 글자 크기를 기준으로 계산하여 지정함
- 부모 요소의 글꼴 크기가 font-size : 16px 처럼 되어 있어야 한다.
이탤릭체로 글자를 표시하는 font-style 속성
- 글자를 이탤릭체로 표시할 때는 font-style 속성을 사용하여야 한다.
font-style : normal | italic | oblique글자 굵기를 지정하는 font-weight 속성
- 400은 normal, 700은 bold에 해당한다.
- 예약어 대신 숫잣잢을 사용하면 글꼴 굵기를 좀 더 세밀하게 조절할 수 있다.
font-weight : normal | bold | bolder | lighter | 100 | 200 | ... | 800 | 900
'Frontend > CSS' 카테고리의 다른 글
| CSS (0) | 2022.12.17 |
|---|---|
| 캐스케이딩 스타일 시트(cascading style sheet) (0) | 2022.11.25 |
| 기본 선택자 (0) | 2022.11.25 |
| 스타일과 스타일 시트 (0) | 2022.11.25 |