반응형
- 과거 HTML
<font color="" size="" face="">내용</font>
1. 글꼴(font-family)
- font-family 속성은 하나의 글꼴만을 설정할 수도 있고, 여러개의 글꼴을 같이 설정할 수도 있음
- font-family 속성값이 여러개의 글꼴로 설정되어 있다면, 첫번째 글꼴부터 찾은 후 없으면 그 다음 글꼴을 적용시킴
font-family: "폰트명","폰트명",...
2. 굵기(font-family)
- 텍스트의 굵기를 조절할 수 있으며, 숫자가 올라갈수록 굵어짐
100~900 / normal(400), bold(700)
font-weight:숫자값 혹은 bold/normal;
3. 크기(font-size)
- font의 기본 크기는 16px
- 절대적 크기
- 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용
- 절대적 크기로 설정된 텍스트는 모든 브라우저에서 같은 크기로 표현
px - 상대적 크기
- 기본크기 혹은 부모 요소의 크기를 기준으로 하고 상대 크기를 설정하고자 할 때 사용
%, em, rm
% : 기본크기(16px)를 100%로 놓고, 그에 대한 상대적 크기를 설정
em : 부모 요소에 중첩되어 1.0은 100%, 1.5는 150%로 상대적 크기를 결정
rem : html 태그의 폰트크기를 기준으로 상대적 크기를 설정
1.0은 100%, 1.5는 150%
부모요소가 아닌 html 요소의 크기에 상대적으로 설정
4. 예시
- %는 기본 크기인 16px를 기준으로 상대적 크기를 설정한 것이다.
- em은 부모 요소의 크기를 기준으로 설정한 것이다.
- rem은 <html> 폰트 크기를 기준으로 설정한 것이다.
5. 웹 글꼴 이용
- 구글 폰트 이용
https://fonts.google.com
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
- 눈누 폰트 이용
https://noonnu.cc
눈누
상업용 무료한글폰트 사이트
noonnu.cc
반응형
'웹개발 > CSS' 카테고리의 다른 글
| [CSS] CSS position, z-index (0) | 2022.05.11 |
|---|---|
| [CSS] CSS display, box-sizing, border(radius) (0) | 2022.05.11 |
| [CSS] background(배경) (0) | 2022.05.09 |
| [CSS] CSS 적용하는 방법, 우선순위 및 상속 (0) | 2022.05.04 |
| [CSS] CSS와 CSS 선택자 (0) | 2022.05.01 |