이번 포스팅은 폰트 어썸 (Font Awesome)에 대하여 알아보겠습니다.
다소 생소할지도 모르지만 특히나 대학교 전공수업때 웹 프로그래밍을 배우셨던 분들도 모르시는 분들이 꽤나 많은데요
우선 폰트 어썸이란 폰트를 아이콘처럼 사용하는 방법을 말합니다.
쉽게 이야기해서 우리가 많이 본 아이콘들은 사진으로 많이 사용을 하는데 이 폰트 어썸을 이용하면 사진이 아닌 폰트 그자체로
아무리 확대를 해도 깨지지가 않습니다. 폰트어썸을 사용한 실제 웹사이트를 한번 볼까요 ?
다음 사진을 보면 제가 font awesome을 사용하기 위해 찾는 사이트인데요
사이트의 주소는 https://fontawesome.com/ 입니다.
지금은 현재 사이트를 캡쳐해와서 사진으로 나오기 때문에 확대를 하면 이미지가 깨질겁니다. 하지만 직접 쓰게된다면
이런식으로 나옵니다.
최대로 확대해서 보여드리겠습니다.
보이시나요? 마치 이미지 같지만 font입니다. 다만 색상만 입혔을 뿐이죠 이런식으로 폰트어썸을 활용할 수 있습니다.
그럼 코드와 함께 주석으로 마저 설명을 드리겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>폰트어썸</title>
<!--
사용방법
1) 링크요소를 복사
2) 마크업
-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- css는 style요소안에 기술(작성) -->
<style>
/* css 주석 */
#bitcoin{
color : #5C7CFA;
}
#gg-circle{
color : #82C91E;
}
#amazon{
color : #E8590C;
}
#facebook{
color: #45619D;
font-size: 80px;
}
</style>
</head>
<body>
<h1 id="bitcoin"><i class="fab fa-bitcoin"></i> 비트코인</h1>
<h1 id="gg-circle"><i class="fab fa-gg-circle"></i> gg-circle</h1>
<h1 id="amazon"><i class="fab fa-amazon"></i> amazon</h1>
<h1 id="facebook"><i class="fab fa-facebook-square"></i> facebook</h1>
</body>
<!--
font-awesome은 폰트를 아이콘으로 사용하는 방법입니다.
- 벡터방식의 폰트이기 때문에 아무리 확대를 해도 깨지지 않습니다.
(모바일웹 / 레티나 디스플레이 등 편리함)
- 일관된 디자인이며, 양질의 아이콘을 이용할 수 있습니다.
사이트 https://fontawesome.com
-->
</html>
이런식으로 font-awesome 사이트에 가시면
이런식으로 메뉴가 있는데요~ 그 부분에서 How to Use를 선택하게되면
글자 색상만 바꾸려고 약간의 css와 id를 첨가해서 css 속성을 변경하였습니다. 글자 색상만 변경한걸로 아시면 됩니다.
아직 포스팅하지 않은 항목이기에 무시하셔도 되요~
이런식으로 아래 link 요소에 뜨게됩니다. 이 구문을 그대로 복사하셔서 head 요소안에 넣어주시면 웹서버에 있는 font awesome을 사용할 준비가 된 것입니다.
그런 다음에는 How to Use 옆부분에 icon을 선택하셔서 자신이 원하는 아이콘을 클릭하시면
이런식으로 아래 i와 함께 class~~ 이런식으로 뜹니다. 자신이 원하는 요소안에 기재를 하게되면 사용이 가능합니다.
한가지 주의할 점은 이 font-awesome 안에는 기본적으로 해당 폰트어썸에 대한 폰트가 지정이 되어있으므로 아이콘같은 폰트를 사용하고 타 폰트를 적용하고 싶으시다면 i 요소 바깥에 글자를 쓰시면 됩니다.
요약하자면 폰트어썸은 비트맵 방식으로 구성된 이미지가 아니라 아무리 확대를해도 깨지지가 않는 벡터방식의 폰트이며 여러 곳에서 사용중이다.
이번 포스팅에 대해 많은 도움이 되셨길 바랍니다.
다음 포스팅은 테이블에 관한 포스팅입니다.
'Front-end > HTML' 카테고리의 다른 글
| 8. 테이블(table) 예제 (0) | 2018.07.31 |
|---|---|
| 8. 테이블(Table) 요소 (0) | 2018.07.26 |
| 6. 파비콘과 내부링크 (0) | 2018.07.24 |
| 5. 다음 UI (솔루션 코드) (1) | 2018.07.23 |
| 5. 다음 UI 만들어보기 (0) | 2018.07.23 |