2월 19, 2023

구글 아이콘 | 문단과 구글 지도에 활용하기

문서의 가독성에 있어서 그래픽만큼 효과적인 것이 없다. 따라서 GUI(graphical user interface) 환경의 구현은 아무리 강조해도 지나침이 없다. 편의성과 기능이 타의 추종을 불허하는 구글의 ‘머티리얼 아이콘’의 활용법을 알아본다.

선행 사항

<head>와 </head> 사이에 아래 링크를 넣는다.
 <link href='https://fonts.googleapis.com/
icon?family=Material+Icons' rel='stylesheet'/>

아이콘 사이트

https://fonts.google.com/icons

아이콘 선택

아이콘 수정

1, 2, 3의 화살표를 이용하면 밀도, 크기, 색상 등을 변경할 수 있다.

코드 복사

아이콘 사용

사용 예제

cloud 
<i class="material-icons" 
style="color: lightblue; font-size: 60px;">cloud</i>

사용 예제

포스트 타이틀

얼굴 아이콘

사이클론 아이콘

<h1 id='gtitle' >포스터 타이틀</h1>
<h1 id='gface'>얼굴 아이콘</h1>
<h1 id='gcyclone'>사이클론 아이콘</h1>
<style>
.post-body h1:before{
   content: 'language';
   font-family: 'Material Icons';
   color:gray;
   vertical-align: top;
}
#gface:before{
   content: 'face';
   font-family: 'Material Icons';
   color:blue;
   vertical-align: top;
}
#ghive:before{
   content: 'cyclone';
   font-family: 'Material Icons';
   color:blue;
   vertical-align: top;
} 
</style>

구글지도 마커 활용

function Gicon(location, color, content, title) {
   var marker = new google.maps.Marker({
    position: location,
    map,
    title:content,
    label: {
        fontFamily: "Material Icons",
       text: "face",
       color: "magenta",
       className: "white",
       fontSize: "70px",
       },
      icon: {
      url: '',
       scaledSize: new google.maps.Size(25,25),
      labelOrigin: new google.maps.Point(5, 12),
    },
  });}