1. 폰트 설정 : font-family
: 서체를 변경할 수 있다.
.font {
font-family: Arial;
}- 글씨체를
Arial로 바꾸라는 의미이다.
2. 폰트 굵기 : font-Weight
: 텍스트 두께를 정할 수 있다.
.font {
font-weight: 400
}- 수치를 표시해도 되고 아래와 같이 영어로 굵기를 표시해도 된다.(px이라고 붙이지 말자... 픽셀 단위 아니다)
- 400이 대부분 기본 두께이다. 볼드는 700, 라이트는 300 정도의 두께를 가지고 있다.
- bold : 두껍게
- nomal : 보통
- light를 붙여서 100정도 가늘게 만들 수 있다.(EX : lightbold)
3. 폰트 모양 : font-style
: 폰트의 모양을 바꿀 수 있다.
.font {
font-style: italic;
}- italic : 비스듬한 텍스트로 바꾸어준다.
4. 대체 글꼴 설정
h1 {
font-family: "Garamond", "Times", serif;
}- 기본설정 : Garamond
- 기본 설정 글꼴이 없는 경우 : Times
- 둘다 사용할 수 없는 경우 기본 글씨체 : serif
5. 단어 간격 : word-spacing
- 단어 사이의 간격을 설정한다.
- 기본 간격은 0.35em 이다.
6. 글자 간격 : letter-spacing
- 글자 간의 간격을 설정한다.
7. 대소문자 변경 : text-transfom
: 대소문자를 변경할 수 있다.
- uppercase : 대문자로 변경
- lowercase : 소문자로 변경
8. 텍스트 정렬 : text-align
: 텍스트 정렬
- right, left, center
9. 줄간격 : line-height
: 줄간격을 설정한다.
10. 글꼴 불러오기
: 폰트를 제공해주는 사이트를 이용해서 폰트를 불러올 수도 있다.
구글 폰트를 이용해보자.
<head>
<link href="https://fonts.googleapis.com/css?family=Space%20Mono:400,700" type="text/css" rel="stylesheet">
</head>- 구글 폰트를 링크시켜서 해당 폰트를 사용할 수 있게 만든다.
.jpg)
"꾸준한 삽질과 우연한 성공"