css 폰트 나눔고딕 폰트
■ 이 글을 검색하신 분들이라면 저처럼 html과 css를 공부하고 계시거나 관심이 있으신 분들이겠죠?ㅎ 저도 공부하면서 정리하고 있는 거라서 많이 부족하지만, 이번 글에서는 html 문서에 나눔고딕 폰트를 적용하는 과정을 정리해볼까 합니다. 지금 이 블로그의 폰트도 여기서 알아볼 방법으로 나눔고딕으로 설정해 놓은 상태거든요. 이 글을 모바일로 보고 계시든, PC로 보고 계시든 무조건 나눔고딕으로 보이고 있을 겁니다.
■ html 문서에 폰트를 적용하는 방법은 많이 있지만 여기서는 구글의 웹폰트 중에서 나눔고딕을 css 폰트 속성을 이용해서 적용하는 과정을 정리해볼게요. 메모장에 예제를 만들어서 진행할 건데요. 간단한 내용이니까 눈으로만 보지 마시고, 직접 해보셔요.
▲ 웹 문서의 본문에 나눔고딕 폰트를 적용할 문장을 입력해봤습니다. 스타일을 적용하지 않은 상태에서 이 문서를 출력해서 적용하기 전의 글꼴을 확인하고 넘어갈게요.
▲ 이제 스타일을 적용하겠습니다. 스타일 시트를 따로 만들지 않고 head 태그 안에 넣겠습니다.
■ 가장 먼저 style 태그 안쪽에 나눔고딕 웹폰트를 'import' 해줘야 하는데요. 구글의 웹폰트 페이지로 이동하겠습니다.
http://www.google.com/fonts/earlyaccess
■ 폰트 목록 중에서 [Nanum Gothic (Korean)] 을 찾아보세요. 알파벳 순서로 찾으면 되니까 쉽게 찾을 거에요. 그림에 보이는 import url 주소를 스타일 시트에 그대로 입력해주고, font-family 속성값을 'Nanum Gothic'으로 지정해주면 되는데요. 직접 해볼게요.
■ 예제와 같이 스타일 태그 안에 import 문장을 그대로 넣어주시구요. 스타일을 적용할 선택자 안에 font-family 속성을 적용했습니다. 문서 전체에 나눔고딕 폰트를 적용하시려면 body 선택자의 font-family의 속성값을 이렇게 적용해주면 되겠죠? 웹 문서를 출력해서 확인하고 마무리할게요.
■ 이렇게 해서 css 폰트에 나눔고딕 폰트 적용하는 과정을 알아봤는데요. 몇 분 안 걸리는 작업이니까 메모장 열어서 직접 입력해서 확인해보세요. 수고하셨습니다.
