web_frontend(21)CSS 글꼴(font)

글꼴(font) 

 

 

font-style (글자의 기울기)

 

normal: 기울기 없음 (기본값)

italic: 이텔릭체

oblique: 기울어진 글자 -> oblique도 기울어진 글자 이지만 잘 쓰이지않고 보통 italic을 사용한다.

 

 

font-weight (글자의 두께(가중치))

 

normal, 400: 기본 두께 

bold, 700: 두껍게 

border: 상위(부모) 요소보다 더 두껍게

lighter: 상위(부모) 요소보다 더 얇게

100~900: 100단위의 숫자 9개, normal과 bold이외 두께

 

 

font-size (글자의 크기)

 

16px: 기본 크기

단위: px, em, rem 등 단위로 지정

%: 부모 요소의 폰트 크기에 대한 비율

smaller: 상위(부모) 요소보다 작은 크기

larger: 상위(부모) 요소보다 큰 크기

xx-small ~ xx-large: 가장 작은 크기 ~ 가장 큰 크기까지 7단계의 크기를 지정가능하다.

 

 

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

 

normal: 브라우저의 기본 정의를 사용  -> 스타일 초기화를 시키면 1로 바뀜

숫자: 요소의 글꼴 크기의 배수로 지정

단위: px, em, rem 등의 단위로 지정

%: 요소의 글꼴 크기의 비율로 지정

 

200% 는 2와 똑같다. 그래서 배수를 사용하는것을 권장한다.

그리고 line-height를 사용하면 글자가 요소의 높이 가운데에 위치한다.

 

 

 

font-family: 글꼴1, "글꼴2", ... 글꼴계열(필수값);

글꼴(서체) 지정할때 사용할 글꼴후보들을 다 적어준다.

글꼴을 적용할대 먼저 쓴 글꼴부터 사용하기위해 시도하지만 글꼴이 없다면 다음 글꼴을 적용시도를 한다.

시도를 하다가 모든 글꼴을 쓰는걸 실패했다면 마지막 글꼴 계열 중에서 랜덤으로 선택한다. 그래서 글꼴 계열이 필수값이다.

그리고 글꼴에 띄어쓰기나 특수문자가 포함되있을수도 있는데 이경우에는 글꼴을 큰따옴표로 묶어서 사용한다.

 

글꼴 계열 종류

serif : 바탕체 계열

sans-serif : 고딕체 계열

monospace : 고정너비(가로폭이 동등) 글꼴 계열

cursive : 필기체 계열

fantasy : 장식 글꼴 계열