CSS 기본속성(3) 글꼴과 문자 속성

 

 

---

 

 

<글꼴 속성>

 

font-style

- 글자의 기울기 속성

- 기본값 normal

- italic : 이텔릭체 (기울어진 글자)

기본 스타일과 이텔릭체

 

 

font-weight

- 글자의 두께 속성

- 기본값 normal (400)

- bold (700)

- 100~900 : 100단위로 굵기 설정 가능

100~900

- 보통 normal(400)과 bold(700) 사용

 

 

font-size

- 글자의 크기 속성

- 기본값 16px

- 단위로 지정 : px em rem

 

 

line-height

- 한 줄의 높이 (행간과 유사)

- 기본값 normal

- 숫자 (요소의 글꼴 크기의 배수로 지정) 

- 단위 (px em rem으로 지정)

- 한 줄의 높이에서 글자는 수직 가운데 정렬됨.

 

span {
  line-height: 2;
}
/*기본 글꼴 크기인 16px의 2배로 32px의 줄 높이 생성*/

 

 

font-family

- 글꼴 지정

- font-family: 글꼴1, 글꼴2, "글꼴3",...글꼴계열;

 => 브라우저에 따라 지정한 글꼴을 사용할 수 없을 수 있기에 콤마( , )로 후보 구분하여 명시

 => 띄어쓰기 등 특수문자가 글꼴 이름에 있으면 큰 따옴표로 묶어 주어야 한다.

 => 마지막엔 글꼴 계열을 필수로 작성해 주어야 한다.

- 글꼴 계열 : serif (바탕체 계열) , sans-serif (고딕체 계열)

 

 

<문자 속성>

 

color

- 글자의 색상

- 기본값: rgb(0,0,0) 검은색

- Hex 색상 코드, rgb, rgba로 지정 가능

 

text-align

- 문자의 정렬 방식

- 기본값 left

- right, center

 

text-decoration

- 문자의 장식(선)

- 기본값 none

- underline : 밑줄

- line-trough : 중앙선

 

text-indent

- 문장의 첫 줄 들여 쓰기

- 기본값 0

- 단위 px em rem 사용

- 음수 사용 시 내어 쓰기 가능