웹사이트를 만들때 아이콘은 필수적인 요소입니다. 아이콘을 사용하면 방문자들에게 좀 더 직관적으로 기능에 대해 어필이 가능하죠. 웹사이트의 기능을 글로 설명하는것이아니라 아이콘 하나로 대체함으로써 좀 더 깔끔한 웹페이지 구축도 가능합니다. 웹사이트에 픽토그램(그림문자)을 쉽게 넣는 방법이 있습니다. 바로 웹 아이콘 폰트를 사용하는 것인데요. 웹 아이콘 폰트는 여러 종류가 있으나 그 중에서 Font Awesome가 제일 유명합니다. Font Awesome이란 이러한 웹 아이콘 폰트를 모아놓은 라이브러리입니다. 이번 포스팅에서는 Font Awesome의 사용법에 대해 다뤄보려 합니다.
Font-Awesome의 장점
1. Html Font 속성이 모두 사용 가능하다.
Font-Awesome은 이미지가 아닌 폰트이기 때문에 HTML의 Font-style을 적용할 수 있습니다. 이것은 굉장히 큰 장점인데요. 가령 Font-Awesome이 이미지였다고 생각해봅시다. 그럼 크기를 변경시킬때마다 이미지의 크기도 늘려야하고, 색을 변경시킬때마다 이미지의 색상도 변경해주어야 할 것입니다. 하지만 Font-Awesome은 그럴 필요가 없습니다. 간단하게 소스 몇줄만 추가해주면 크기도 늘릴 수 있고 색상도 변경할 수 있죠.
<i class="fa fa-lock" aria-hidden="true" style="color:#2353a5;font-size:100px;"></i>
2. CSS를 적용시킬 수 있다.
Font-Awesome에는 Css를 적용시켜 웹사이트만의 고유한 스타일로 응용할 수 있습니다. 일반적으로 크기나 색상 그림자효과와 같은것을 Css로 통일시켜 사용합니다.
<style type="text/css">
.pinkstyle{color:#f68181;font-size:50px;}
</style>
<i class="fa fa-lock pinkstyle" aria-hidden="true" ></i>
3. 브라우저 호환성 문제가 적다.
웹사이트를 제작할때 가장 신경쓰이는 부분이 Crome에서는 돌아가는데 Explorer에서는 안되고 이런 웹 브라우저 호환성 문제가 상당히 짜증납니다. 하지만 Font-Awesome은 자바스크립트가 사용되지 않기때문에 이런 호환성문제가 거의 없습니다.
4. 무료 아이콘이 많다.
Font-Awesome에는 상당히 많은 무료 아이콘이 있습니다. 유료인것도 있지만 워낙 무료 아이콘의 갯수가 많기때문에 유료결제 하시는분은 거의 없으실거에요. 아이콘 배포목적이 아니라면 상업적인 용도로도 활용하실 수 있으니 홈페이지를 제작하면서 무료아이콘 이미지를 찾아다니는 수고를 줄일 수 있습니다.
5. 원하는 아이콘을 찾기가 수월하다.
원하는 아이콘 찾는 과정이 간단합니다. 기존의 픽토그램 사이트에가서 자신이 원하는 아이콘을 찾을 필요가 없습니다. 아래의 링크에서 검색만 해주시면 됩니다.
Font-Awesome 사용법
1. CDN 선언
폰트 어썸을 사용하는 방법은 두가지가 있습니다. 첫번째 방법은 CDN을 삽입하고 아이콘을 특정 클래스 명으로 호출해 사용하는 방법입니다. 두번째 방법은 직접 원하는 아이콘을 다운받아 활용하는 방식이 있는데 대부분 CDN방식을 많이 사용합니다.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><head>부분에 위의 코드를 삽입시켜줍니다. 버전은 상이할 수 있습니다.
2. 아이콘 출력
<i class="fa fa-camera"></i>
3. 아이콘 색상 변경
<span style="color:blue"><i class="fa fa-camera fa-5x"></i></span>
4. 아이콘 크기 변경
<i class="fa fa-camera fa-lg"></i> <!-- 33% 크기 -->
<i class="fa fa-camera fa-2x"></i> <!-- 2배 크기 -->
<i class="fa fa-camera fa-3x"></i> <!-- 3배 크기 -->
<i class="fa fa-camera fa-4x"></i> <!-- 4배 크기 -->
<i class="fa fa-camera fa-5x"></i> <!-- 5배 크기 -->
5. 아이콘 테두리 적용
<i class="fa fa-quote-left fa-pull-left fa-border" aria-hidden="true"></i>
6. 아이콘 방향 회전
<i class="fa fa-shield"></i>
<!-- normal -->
<i class="fa fa-shield fa-rotate-90"></i>
<!-- fa-rotate-90 -->
<i class="fa fa-shield fa-rotate-180"></i>
<!-- fa-rotate-180 -->
<i class="fa fa-shield fa-rotate-270"></i>
<!-- fa-rotate-270 -->
<i class="fa fa-shield fa-flip-horizontal"></i>
<!-- fa-flip-horizontal -->
<i class="fa fa-shield fa-flip-vertical"></i>
<!-- fa-flip-vertical -->
7. 아이콘 회전 적용
<i class="fa fa-spinner fa-spin fa-fw"></i>
<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-fw"></i>
<i class="fa fa-cog fa-spin fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-fw"></i>
8. 아이콘 중첩
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
<!--fa-twitter on fa-square-o-->
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
<!--fa-flag on fa-circle-->
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<!--fa-terminal on fa-square-->
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
<!--fa-ban on fa-camera-->
# aria-hidden="true" 을 쓰는 이유는?
hidden 속성은 HTML5에서 새로 추가되었으며 브라우저 not에 요소를 표시합니다. aria-hidden 속성은 요소를 무시해야하는 경우 화면 판독기 를 알려줍니다. 자세한 내용은 w3 문서를 살펴보십시오.
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden
ARIA (Accessible Rich Internet Applications)는 장애가있는 사람들이 웹 컨텐츠 및 웹 애플리케이션을보다 쉽게 이용할 수 있도록하는 방법을 정의합니다.
이러한 표준을 사용하면 장애인이 웹을 더 쉽게 사용할 수 있습니다.
# aria-hidden 과 hidden 의 차이점
hidden 속성은 해당 요소에 대한 모든것이 안보입니다. 사용자가 html 페이지를 볼 때 hidden 속성이있는 요소는 보이지 않습니다.
<p hidden>You can't see this</p>
aria-hidden 속성은 요소와 그 자손 모두가 브라우저 화면 에서는 계속 표시되지만 화면 판독기 와 같은 접근성 도구에서는 보이지 않습니다.
<p aria-hidden="true">You can't see this</p>
출처 : https://coding-factory.tistory.com/192
'프론트엔드 개발 놀이터 > css, design' 카테고리의 다른 글
| 모바일 기기에서 수평 스크롤 없애기 (0) | 2020.08.27 |
|---|---|
| 비율이 일정하게 유지되는 DIV BOX (0) | 2020.08.24 |
| CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch (0) | 2020.08.19 |
| css 통통 튀는 공 (animation, Keyframe, bounce ball) (0) | 2020.07.31 |
| 나눔스퀘어 웹폰트 공유 (0) | 2020.07.31 |