구글 폰트 적용하기
font-family 속성에서 웹 브라우저에 표시되는 텍스트에 글꼴을 지정하는 방법
-> 시스템에 없는 글꼴이면 웹 폰트 방식으로 추가해서 사용
웹 폰트란 인증된 기관 또는 회사에서 웹 서버에 올려 놓은 폰트
-> 시스템에 글꼴이 없어도 모든 사용자가 같은 글꼴을 사용할 수 있음
-> 구글 폰트 : https://fonts.google.com
원하는 폰트 검색 후 @Import 문 복사후 < style > 태그 최상단에 넣어주면 됨
-> 여러개 선택 가능
-> 외부 스타일 시트 사용 시 css 파일 최상단에 넣으면 됨
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&family=Varela+Round&display=swap');
.poppins{
font-family:"Poppins", sans-serif;
}
.varela{
font-family:"Varela Round", sans-serif;
}
</style>
<body>
<p class = "poppins"> Lorem ipsum dolor, sit amet consectetur adipisicing eli.</p>
<p class = "varela"> Lorem ipsum dolor, sit amet consectetur adipisicing eli.</p>
</body>
아이콘 폰트 적용하기
다양한 아이콘을 이미지 파일(jpeg, png)이 아니라 CSS를 적용하는 방식으로 간단하게 사용 가능
대표적인 아이콘 폰트
1. Font Awesome
2. Material Icon
Font Awesome 사이트에서 아이콘 폰트 라이브러리를 내려받아 추가하는 방법과, CDN(Content Delivery Network)를 사용해 서버에 올려진 파일을 참조한는 방법
CDN 방식 진행
-> https://cdnjs.com/libraries/font-awesome
해당 주소에서 CDN 주소 복사
<head>
<title> Font Awesome</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer">
</head>font awesome은 유/무료 버전으로 나뉨
https://fontawesome.com/icons 에서 원하는 아이콘 선택
여기서 복사된 태그를 HTML 문서에 붙여 넣음
<body>
<i class="fa-brands fa-facebook"></i>
</body>
<style>
i{
font-size:30px;
color:#4267B2;
}
</style>
Journey for Backend Developer