이번 시간에는 웹싸이트에 아이콘을 첨부하는 방법에 대해서 알아보자!!
SVG같은 이미지를 다운받아서 사용할 수도 있지만, 오늘은 CDN 방식으로 진행해볼 예정이다.
CDN = Content Delivery Network
또한, 강사님께서 Icon을 위한 추천 싸이트 2곳에 대해서도 알아보자!!
CDN 방식
CDN(콘텐츠 전송 네트워크)은 서버와 사용자 사이의 물리적 거리를 줄여 웹 페이지 콘텐츠 로드 지연을 최소화하는, 촘촘히 분산된 서버로 이루어진 플랫폼입니다. 이를 통해 전 세계 사용자들이 로딩 시간을 늦추지 않고 동일한 고품질 콘텐츠를 볼 수 있습니다.
=> 이 말을 좀 더 풀어서 설명해보면, 이미지를 다운 받아서 업로드하는 방식은 트레픽 심한 서비스의 경우, 로딩 지연과 과도한 메모리 소비가 발생합니다. 이러한 문제를 극복하기 위해서, 링크를 받아가면, 해당 되는 아이콘이나 이미지, 글자 폰트 등을 받을 수 있는 방식이 등장했습니다. 바로 이걸 CDN 이라고 부릅니다.
CDN에 대해서 더 자세하게 알아보기
일단, Icon 도 font의 일종이다. 따라서, 이미지 형식으로 다운받지 않은 이상, font처럼 다뤄야한다. 다시 말해서, width나 height가 적용되지 않는다.
.cards i {
font-size: 100px; // => 아이콘도 폰트라서, 이렇게 크기를 지정해줘야 한다.
/* color: blue; */ => 폰트는 컬러라는 명령어로 지정한다.
}강사 분께서 추천해주신 2개의 아이콘 웹싸이트 링크를 남긴다.
Material.io가 사라지고, 구글 폰트로 통합됨.
font awesome은 부분 유료이지만, 무료로 사용할 수있는 아이콘들도 많다. 구글 폰트 같은 경우는 font awesome보다 아이콘의 종류가 적다. 그러나, 은행이나 국가 기관같은 기관들에서 많이 쓰는 아이콘을 찾는다면, 구글 폰트가 더 좋다. 또한, 구글 폰트는 무료이다.
