YTCW
4. CSS (글꼴 관련 스타일, font, family, size, style, weight) 본문
1. font-family
/*기본형*/
font-family: <글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]
body { font-family: "맑은 고딕", 돋움, 굴림 }
- 웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용해 웹 브라우저 화면에 표시
- 웹 문서에서 지정한 글꼴이 사용자 시스템에 설치❌ → 의도한 글꼴이 아닌 글꼴로 표시
- 2개 이상 지정 가능
- 두 단어 이상으로 된 글꼴 이름은 큰 따옴표로 표시
- <body>태그 스타일에서 한번 정의하면 문서 전체에 적용
→ 문서 안의 모든 자식 요소에 같은 글꼴 사용
기본형 기호 [기본형] 표기 방식
: W3C 표준 규약에서도 사용
1. | 나열한 옵션 중 하나가 값이 되어야 한다 font-size: 값1 | 값2 | 값3
2. 속성값을 나열할 때 키워드(약속한 값)는 그대로 나열 font-variant: normal | small-caps
3. 속성값을 나열할 때 값이 아니라 유형이라면 <>로 묶음.
→ 이때 다른 속성을 유형처럼 사용 가능
font-size: <절대 크기> | < 상대크기> | <크기> | <백분율>
4. font: <font-style><font-variant><font-weight>
2. font-size
/*기본형*/
font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>
1. 브라우저에서 지정한 글자 크기
2. 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정
3. 브라우저와 상관없이 글자 크기를 직접 지정
4. 부모 요소의 글자 크기를 기준으로 백분율(%)로 표시
- 단위’를 사용하여 글자 크기를 지정
→ 단위를 사용해서 글자 크기를 직접 지정 (주로 사용)
- ‘백분율’을 사용하여 글자 크기 지정
→ 부모 요소의 글꼴 크기가 font-size: 16px처럼 단위로 표현되어 있어야 한다
→ 부모 요소의 글자 크기를 기준으로 계산하여 지정하는 방법
| em | 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정 |
| rem | 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정 |
| ex | 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정 |
| px | 모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정 |
| pt | 포인트라고 하며, 일반 문서에서 많이 사용 |
3. font-style
/*기본형*/
font-style: normal | italic | oblique
1. 기본값 - 일반적인 형태로 표시
2. 이탤릭체로 표시 ( 기울어진 글꼴이 처음부터 디자인되어 있다. )
3. 이탤릭체로 표시 ( 원래 글꼴을 단지 기울어지게 표시 )
4. font-weight
글자 굵기를 지정
- 100 ~ 900 사이에서 400은 normal, 700은 bold에 해당
-예약어 대신 숫잣값을 사용하면 글꼴 굵기를 세밀하게 조절 가능
font-weight : bold || 300
'css' 카테고리의 다른 글
| 6. CSS (목록, 표, 스타일, list, table, style, caption, border, spacing, collapse) (0) | 2024.08.06 |
|---|---|
| 3. CSS (가상 클래스, 가상 요소) (0) | 2024.07.31 |
| 2. CSS (연결 선택자, 속성 선택자) (0) | 2024.07.31 |
| 1. CSS 이론 ( 선택자, 전체, 타입, 클래스, id, 그룹 ) (0) | 2024.07.30 |
