웹 퍼블리싱: 구글 머티리얼 아이콘 (Google Material Design Icons)
웹사이트를 만들다보면 필수적으로 또는 부수적으로 '아이콘'이 필요하다. 예를 들어 티스토리에도 있는 '메뉴'나 '검색' 아이콘 같은 경우다. 이런 아이콘들은 사용자들에게 익숙한 기본 형태가 있고 크게 변경할 수 있는 여지가 많지 않기 때문에 구글 머티리얼 아이콘 같이 이미 만들어진 아이콘들을 적용하는 것도 간편한 방법이다.
구글 머티리얼 아이콘의 가장 큰 장점 중에 하나는 '폰트'처럼 사용할 수 있기 때문에, 폰트의 컬러, 사이즈를 바꾸는 것처럼 아이콘의 컬러, 사이즈를 아주 쉽게 바꿀 수 있다. 또한 디스플레이 해상도 상관없이 깨끗한 이미지를 보여주기 때문에 매번 이미지를 만들어서 사용할 필요가 없다.
티스토리 블로그에 나도 가장 아래에 구글 머티리얼 아이콘을 사용해서 탑버튼을 추가해보도록 하겠다! (구글에서 제공하는 머티리얼 가이드에 따라서 적용했다: https://google.github.io/material-design-icons/)
구글 머티리얼 아이콘 적용하기
아이콘 적용하기 전 먼저 셋팅할 것이 있다.
01. html - 구글 아이콘 폰트 불러오기
html 편집에서 <head></head> 태그 사이에 아래 <link> 코드를 넣어준다. 구글 아이콘이라는 '폰트' 형식을 가져오겠다는 뜻이다.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
02. CSS - 구글 아이콘 폰트 불러오기
CSS 편집에서도 아래 태그를 복사해서 추가해준다.
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
03. 기본값 세팅
CSS에 '.material-icons'라는 클래스명으로 폰트 형식의 구글 아이콘의 기본 스타일을 설정하는 방식으로 CSS에 아래 코드를 복사해서 그대로 붙여준다.
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
이 셋팅들이 끝나면 이제 본격적으로 아이콘을 선택해서 웹사이트에 추가할 수가 있다.
아이콘 사용하기
'구글 아이콘' 사이트에 들어가면 카테고리 별, 스타일 별 약 900개의 아이콘이 있다.
▶ 구글 머티리얼 아이콘: https://material.io/resources/icons
아이콘이 많으니까 왼쪽 상단에 있는 검색창을 이용해서 원하는 아이콘을 찾는다.
나는 탑버튼이 될 아이콘이 필요해서 '화살표(arrow)'를 검색했다. 그러면 이렇게 다양한 화살표 아이콘들이 검색결과로 나타난다.
마음에 드는 아이콘을 선택한 후 왼쪽 아래에 나타나는 'Selected Icon' 버튼을 클릭한다.
Selected Icon 화면에서 Usage에 있는 <span> 코드를 그대로 복사해서 html 화면에 추가한다.
같은 방법으로 다른 아이콘도 불러올 수 있으며 <span> 태그 사이에 각 아이콘 이름만 그대로 복사해서 사용하면 된다.<span> 대신 <i> 태그를 사용해도 무방하다. (아래 참고)
<span class="material-icons">arrow_upward</span><i class="material-icons">arrow_upward</i>
아마 위와 같이 코드를 추가하면 원하는 컬러나 사이즈가 아닐 수도 있다. 스타일을 바꿀 수 있는 클래스를 각자 만들어서 개별적으로 설정하여 마무리 한다. 아이콘은 '폰트' 형식이기 때문에, 컬러를 바꿀 때는 color, 사이즈 변경할 때도 font-size로 스타일을 바꿀 수 있다.
이전에 탑버튼 화살표를 '이미지'로 넣어서 디스플레이에 따라 해상도가 깨지는 부분이 있었다. 위와 같은 폰트 형식의 구글 아이콘으로 변경한 후에는 해상도 별 크기에서 자유로워질 수 있었다^^
by.liis (life is like this)
'web tutorial > web publishing' 카테고리의 다른 글
| 서당개 웹 튜토리얼 02. 웹 레이아웃 구조 만들기 (html) (0) | 2021.10.20 |
|---|---|
| 서당개 웹 튜토리얼 01. 웹 퍼블리싱 전 기초 작업 (와이어프레임과 초기 세팅) (0) | 2021.08.19 |
| 서당개 웹 튜토리얼 00. 무료 소스 코드 편집기: vscode (0) | 2021.07.12 |
| 서당개 웹 튜토리얼 시작! Let's Start! (2) | 2021.06.21 |
| Web Publishing: '가운데 정렬'하는 방법 3가지 (0) | 2020.08.13 |