04. 시작하기 - Google Material Icons(feat. 직접 테스트 해 봐야함.)

#. 모든 것들이 완벽한 디자인 시안은 나오지 않을 수 있다.

기본적인 디자인을 요청하는 것도 번거롭다.

 

#.Google Material Icons

구글에서 제공하는 머터리얼 아이콘을 무료로 사용할 수 있습니다.

google material icon

 

아래 링크태그를 통해서 구글 머터리얼 아이콘의 연결 주소가 있는데, html에 붙여넣기를 합니다.

Head태그에는 링크태그를,

Body태그에는 div 태그를 붙여넣기.

(아래 링크는 강사님의 깃허브에서 가져 올 수 있음.)

google material lcons를 적용하기 위해서는 html에 링크소스를 가져와야한다.

구글에서는 버전이 바뀌는데 코드도 계속 바뀌지만 활용할 수 있는 방법이 있어요. 저는 sapn태그가 아니라 div 태그로 body부분에 소스를 넣어 주겠습니다.

#.우리가 적용한 링크태그보다 Google Material Icons은 최신버전으로 올라오는데요. 그래도 아이콘의 이름은 그래도 활용 할 수 있거든요. 클래스 이름이 버전이 다르기 때문에 소스코드가 다른건데요, 그안에서 사용하는 아이콘의 이름은 같아요(예를들면 search라던가.) 우리가 아이콘을 사용할 때 이 이름만 활용하면 같은 아이콘을 사용할 수 있습니다. 

upload를 search라고 바꾸면 됩니다.

 

#화면에 출력이 되었는지 확인을 해야합니다. 

 

 

아이콘이 바뀌는 것을 확인 할 수 있습니다.