CSS - [ Google fonts / Google Material Icons ]

1. Google fonts

구글에 google fonts 라고 검색해서 들어가면 여러 폰트들을 확인할 수 있다. 여기서 nanum 을 검색해서 나눔 고딕체를 선택한다. (폰트는 생각보다 용량이 크므로 하나의 페이지에서 폰트를 너무 남발하지 않는게 중요하다. 사용할 폰트만 명시해서 사용하도록 하자!)

nanum 검색

여기서 400과 700 두께를 select하고 link 태그를 복사해서 index 파일에 붙여넣기 해준다.

오른쪽 창에서 link 전체 복사

index.html 파일에 넣을 때 main.css 삽입 링크보다 위에 넣어주도록 하자.

 

여기서 끝!이 아니라! 링크 태그 아래쪽에 있던 font-family 를 복사해서 css파일의 body 태그 선택자 안에 넣어줘야 완성이다. 폰트는 상속되므로 body태그에 적용해주면 안의 태그들에 모두 적용될 것이다!

그리고 폰트의 경우 저작권과 관련 있으므로 오픈 라이센스를 잘 확인하도록 하자!!!

 

---

2. Google material Icons

몇 가지 자주 사용하는 아이콘의 경우 구글에서 제공하는 Material Icons를 이용해 손쉽게 코드를 통해 삽입해줄 수 있다.

 

 

---

구글에서 google material icons 검색 후 material.io 링크의 사이트에 접속한다.

 

우선 Devlop -> Web 클릭

Devlop 클릭

CDN 아래쪽에 link 태그 하나만 보이는 부분을 main.css 링크 위에 붙여넣기 해준다. (main.css 파일이 가장 아래쪽에 오도록 해주자)

link 태그만 복사

 

 

....

구글링해보니 아이콘 종류에서 Filled를 제외하고는 CDN부분에 추가적으로 코드 작성이 필요했다.

 

즉 모든 타입의 아이콘을 사용하려면 아래와 같이 코드를 작성해주어야 한다.

<!--Filled 타입 아이콘만 사용 가능-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<!--모든 타입의 아이콘 사용 가능-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|
Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

 

---

그러면 아이콘을 사용해보자.

오른쪽 탭에서 Resources 클릭 후

Resources 클릭

왼쪽 위의 Material Icons를 클릭하면 된다.

Material Icons 클릭

여기서 좌측 상단의 Material Symbols를 Material Icons로 변경해주면

사용 가능한 여러 아이콘 확인 가능!!

 

여기서 arrow 라고 검색해보면 화살표와 관련된 아이콘들이 검색된다. 필요한 아이콘을 선택 후 아래쪽에 뜨는 태그를 body 태그 안에 넣어주면 아이콘이 출력되는 것을 확인할 수 있다.

해당 태그를 body태그 안에 넣어주면

웹 페이지에 출력됨

 

body 태그에 입력했던 색상이 적용되어있다. 기본 크기는 24px로 되어있으며, 크기를 키울 때는 가로 세로 사이즈가 아니라 font-size 속성을 이용해 변경해주어야 한다. 즉 아이콘도 하나의 글씨처럼 취급된다!!

 

---

참조

https://blog.naver.com/subinlee821/222697931957