안녕하세요 스마트대 마리지 월터입니다. [html5&CSS] CSS 기초 글꼴 설정, font-family 웹 글꼴 설정, Google 웹 글꼴 가져오기 방법 import에 대해 살펴보겠습니다.#css기초 #웹폰트 #fontfamily #웹폰트설정1.웹폰트스타일로 적용하기A. 웹 폰트 스타일에 적용하다A. 웹 폰트 스타일에 적용하다스타일적용전 –> 스타일적용후웹페이지 기본 글꼴 설정은 웹페이지 홈페이지에서 기본 설정할 수 있습니다. 구글 크롬의 경우 기본적으로 Arial로 되어 있습니다. 변경은 설정 –> 모양 –> 폰트설정 00> 표준폰트등설정 ———————————————————————————————- <p> <p class=”font_ex1 Do hyeon입니다. </p>p택에 스타일을 먼저 주면기본 글꼴이 변경되었습니다.클래스 선택자 font_ex1에 스타일을 적용하면 글꼴이 변경되었음을 알 수 있습니다.<!DOCTYPEhtml><htmllang=”ko”><head><filenamecharset=”UTF-8″><>>꼴관련</title</<><style>@importurlhttps://fonts.googleapis.com/css2?family=Do+Hyeon&family=Nanum+Pen+Script&display=swap’);@importurl.https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap’);.module_ex1{do-family:’ドヒョン’,sans-serif;}p{num-family:’ナヌムペンスクリプト’,cursive;}</style><head><body><p> p그::본p꼴</</p><pclass=”p___ex1″>p그p_class:font_ex1Dohyeon니다</p.</p></body></html>2) 웹폰트 가져오기구글에서 구글 폰트 홈페이지를 클릭합니다.구글 글꼴이 나온 것을 알 수 있습니다. 원하는 글꼴을 선택합니다.나눔의 내일 아침을 선택했습니다.+select this style을 클릭합니다.Selected families 탭이 열리면@import 부분과 CSS rulesto specify families 부분이 있습니다. 이 부분을 스타일 영역에 복사한 후 복사해서 넣어주세요.복사한 부분을 넣어서 적용을 시켜보면위와 같이 글꼴이 변경되었음을 알 수 있습니다. 웹 폰트를 가져와야 가져오는 방법을 알면 나름 쉽게 사용할 수 있습니다. 처음에는 복잡해 보이지만 한두 번 하면 가져가는 정도이기 때문에 어렵지 않습니다. 스타일에 적용하기 위해 사용하는 방식으로 이해하면 바로 적용할 수 있습니다.검사를 통해 font-fmily가 적용되었음을 알 수 있습니다.검사를 통해 font-fmily가 적용되었음을 알 수 있습니다.