font-family
웹 문서에서 사용할 글꼴은 font-family 속성으로 지정한다.
body { font-family : "맑은 고딕"; }font-size
웹 문서에서 글자 크기는 font-size 속성을 사용하여 조정한다.
글자 크기의 단위는 px이나 pt로 지정할 수 있고 백분율을 사용할 수도 있다.
font-size에서 사용하는 단위
- em : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값으로 지정한다.
- rem : 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정한다.
- ex : 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정한다.
- px : 모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정한다.
- pt : 포인트라고 하며, 일반 문서에서 많이 사용한다.
p { font-size : 16px; }
font-style
글자를 이탤릭체로 표시할 때 font-style 속성을 사용한다.
body { font-style : italic; }font-weight
글자 굵기를 지정하는 속성은 font-weight 속성을 사용한다.
미리 만들어진 예약어(normal, bold, bolder)나 숫잣값을 사용해 굵기를 지정한다.
body { font-weight : 600; }웹에서 폰트를 사용하기 위해서
웹 문서의 텍스트는 사용자의 시스템에 설치된 글꼴을 사용해 화면에 표시된다.
그런데 만약 개발자가 넣은 'Maple story'폰트 가 사용자의 시스템에 없다면 개발자가 원하는 의도가 아닌 대체된 폰트로 사용자의 화면에 나오게 된다.
이러한 오류를 막기 위해서 이전에는 포토샵 같은 프로그램에서 원하는 글꼴을 이용해 텍스트를 이미지로 저장한 뒤 웹 문서에 넣어 사용해야했다.
하지만 CSS3가 웹 폰트 를 표준으로 채택한 덕분에 이제는 간편해졌다.
웹 문서를 작성할 때 글꼴 정보를 함께 저장해야한다.
즉, 기존에 가지고 있던 웹 폰트를 사용했다면 웹 문서를 서버에 올릴 때 웹 폰트 파일도 함께 업로드 해야한다.
그러면 사용자가 웹 사이트에 접속하면 웹 문서를 내려받으며 웹 폰트도 다운로드해 개발자가 의도한대로 웹 페이지가 나오게된다.
참고 페이지 : 구글 폰트 적용하기
- 개발자의 공부가 끝이 없다는 이유를 알 것 같다. 나오는 여러가지 툴, 업데이트들이 개발을 편하게 하지만, 그 변화에 적응해야한다. HTML6, CSS4도 나오는거 아닌가? 그렇게 나오는걸 배우는 것도 재밌을거같다.
