웹폰트 & 아이콘 폰트! CSS 필수 속성으로 매력적인 웹페이지 만들기 (6-9강)

게시일: 2022년 04월 21일 작성자: 자청의 유튜브 추출기

웹폰트와 아이콘 폰트 사용법

웹사이트 만들 때 글꼴 때문에 고민한 적 있지? 내가 원하는 글꼴을 썼는데, 다른 사람 컴퓨터에는 그 글꼴이 없어서 내가 의도한 대로 안 보일 때가 있잖아.
이런 문제를 해결해주는 게 바로 웹폰트야.
웹폰트는 사용자의 컴퓨터에 글꼴이 없어도 웹사이트에서 자동으로 다운로드해서 보여주는 기술이야. 그래서 내가 만든 웹사이트가 어떤 컴퓨터에서든 내가 원하는 글꼴로 똑같이 보이게 할 수 있지.
가장 유명한 웹폰트는 구글 웹폰트인데, fonts.google.com으로 들어가면 엄청 많은 글꼴을 무료로 사용할 수 있어.

원하는 폰트 찾기: fonts.google.com에 들어가서 원하는 폰트를 검색해봐. (예: 'Poppins')
폰트 선택: 검색 결과에서 원하는 폰트를 클릭하면, 다양한 굵기의 폰트들이 나올 거야.
장바구니에 담기: 사용하고 싶은 폰트 굵기를 선택하고 오른쪽에 있는 '+' 버튼을 눌러서 장바구니에 담아.
코드 복사 및 적용:
- 링크 태그 사용: 장바구니에 담긴 폰트들을 웹사이트 <head> 부분에 있는 <link> 태그 코드를 복사해서 붙여넣으면 돼. 그리고 CSS에서는 font-family 속성에 해당 폰트 이름을 적어주면 끝!
- @import 구문 사용: CSS 파일 맨 위에 @import 구문으로 코드를 복사해서 붙여넣어도 돼. 이것도 마찬가지로 font-family 속성에 폰트 이름을 적어주면 적용돼.

웹사이트에 아이콘을 넣고 싶을 때, 보통 이미지 파일로 넣잖아. 근데 아이콘 폰트를 쓰면 이미지 파일처럼 따로 관리할 필요 없이 폰트처럼 쉽게 넣고 꾸밀 수 있어.
가장 많이 쓰는 아이콘 폰트는 폰트 어썸(Font Awesome)이야.

폰트 어썸 사이트 접속: fontawesome.com으로 들어가서 'Start for free'를 눌러.
이메일 인증 (또는 CDN 사용):
- 이메일 주소를 입력하고 'Send kit code'를 누르면 이메일로 코드가 날아와. 이걸로 사용할 수 있어.
- 더 쉬운 방법: cdnjs.com 같은 CDN 서비스에서 'Font Awesome'을 검색해서 최신 버전의 링크 코드를 복사해서 웹사이트 <head> 부분에 <link> 태그로 붙여넣으면 돼.
아이콘 사용:
- 폰트 어썸 사이트에서 'Icons' 메뉴로 들어가서 원하는 아이콘을 검색해봐.
- 무료 아이콘( 'Free' 라고 표시된 것)을 찾아서 클릭하면 코드가 나와.
- 이 코드를 HTML에 복사해서 붙여넣으면 아이콘이 짠! 하고 나타나.
아이콘 꾸미기: 아이콘 폰트는 폰트처럼 취급되기 때문에 CSS로 font-size나 color 같은 속성을 이용해서 크기나 색깔을 마음대로 바꿀 수 있어.

결론적으로, 웹폰트와 아이콘 폰트를 잘 활용하면 웹사이트를 더 예쁘고 편리하게 만들 수 있다는 거야! 구글 웹폰트랑 폰트 어썸 사이트를 직접 들어가서 이것저것 해보면 금방 익숙해질 거야.