티스토리 뷰
홈페이지에는 글만 들어가는 것이 아니라 이미지도 들어가며 여러 아이콘들이 들어갑니다. 이번 포스팅은 폰트어썸(font aw)을 간단하게 사용할 수 있는 방법과 예제를 통해서 연습을 조금 해보겠습니다.
폰트어썸이란?
홈페이지를 만드는데 아이콘은 필수적인 요소입니다. 하지만 저작권이 문제가 될 수 있으니 쉽게 가져다 쓸 수도 없는 노릇이죠. 이런 고민들을 해결해주는 많은 도구들이 있지만 오늘은 폰트어썸에 대해서 설명드리겠습니다. 폰트 어썸(font awesome)은 무료로 다양한 아이콘들을 제공해줍니다.
해당 사이트에 접속하시면 다양한 아이콘들을 검색할 수 있습니다.
네비게이션 바에 라이센스를 확인하시면 폰트어썸은 상업적으로도 무료로 사용가능하다고 적혀있습니다. 정확히는 위의 링크로 접속하는 폰트어썸3가 해당됩니다. 파란색 배경의 폰트 어썸5의 경우 유료사용자만 사용가능한 아이콘들이 있습니다.
사용하는 방법을 알아봅시다.
사용하기 위해서 다운로드를 받아야겠죠? 다운로드를 받아서 직접 서버에 올려두고 제공할 수도 있지만 CDN을 이용하면 간단하게 사용할 수 있습니다.
CDN은 Content Delivery Network의 줄임말입니다. 번역하면 콘텐츠 전송 시스템이라고 합니다. 서버와 사용자와의 거리는 가까울 수록 좋습니다. 파일을 큰 여러개의 서버에 준비해두고 사용자가 가까운 곳에서 전송받을 수 있게 해줍니다. 폰트어썸을 이용하면서 더 배워보겠습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font-awesome</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> </head> <body> </body> </html>
위의 소스코드를 실행해주세요. <title>태그 밑에 <link>태그가 보이시나요? 저 코드가 실행되면서 cdn을 활용해서 폰트어썸을 다운로드 받는 것입니다. 보통 cdn이 존재한다면 구글 검색창에서 다운로드 받아야할 것의 이름 + cdn을 치시면 사용할 수 있는 소스코드를 찾을 수 있습니다. 아니면 공식 홈페이지에 접속하셔서 찾으셔도 됩니다. 직접 아이콘을 넣어보기 전에 cdn에 관한 것을 하나 더 설명드리면 지금은 <link>태그를 사용하고 있지만 <script>태그를 사용하기도 한다는 것입니다. 자바스크립트로 구성된 파일을 다운받아야 한다면 <script>를 써야합니다. 하지만 그 이외의 css와 관련된 것들은 <link>태그를 사용하시면 됩니다.
CDN 활용 시 jQuery 등 자바스크립트로 구성된 파일의 경우 <script>를 이용하시고 그 이외엔 <link> 태그를 사용하시면 됩니다.
이제 아이콘들을 삽입해볼까요? 일단 홈페이지에서 필요한 아이콘들을 검색해보겠습니다. 네비게이션 바에서 아이콘을 찾아서 클릭해주세요. 그럼 검색창과 사용할 수 있는 아이콘들이 나타납니다. 저는 hamburger와 users와 ban이라는 글자를 검색했습니다.
그림 밑에 <i>태그가 보이시나요? <i>태그를 사용하면 해당 부분에 아이콘이 생겨납니다. <i>는 폰트어썸에서 만든 자기들 만의 고유 태그라고 생각하시면 됩니다. <i>태그 부분을 다 복사해서 <body>태그 사이에 넣어주세요.
<i class="fa fa-bars" aria-hidden="true"></i> <i class="fa fa-users" aria-hidden="true"></i> <i class="fa fa-ban" aria-hidden="true"></i>
파일을 실행하면 이모티콘 세 개가 나타나나요? 이제는 아이콘에 간단한 수정을 해보겠습니다. class에 값을 추가하는 것으로 폰트어썸은 아이콘을 수정할 수 있습니다.
<i class="fa fa-bars fa-lg" aria-hidden="true"></i> <i class="fa fa-bars fa-3x" aria-hidden="true"></i> <i class="fa fa-bars fa-5x" aria-hidden="true"></i>
햄버거 아이콘을 복사해서 2개 더 만들고 맨 위에는 fa-lg라는 클래스를 추가하고 2번째엔 fa-3x, 3번째엔 fa-5x라는 클래스를 추가했습니다. 실행하시면 알겠지만 크기를 조정하는 클래스를 추가했습니다. fa-lg는 기본 크기에서 33%가 크고, 3x는 기본 크기에서 3배, 5x는 5배입니다. 이제는 아이콘의 방향을 돌려볼까요? fa-rotate-90, fa-rotate-180, fa-rotate-270 등의 클래스를 추가하면 아이콘의 방향을 조정할 수 있습니다.
마지막으로 한 개 더 공부하자면 속성 값중에 aria-hidden은 웹 접근성과 관련된 부분입니다. 필수적으로 적어야할 것은 아니지만 더 많은 분들이 웹 페이지에 접근할 수 있도록 도와줍니다. 가령 스크린 리더기를 이용한다면 아이콘 요소는 사용자를 헷갈리게 만들수도 있습니다. 그래서 저 속성을 통해 읽지 않아도 된다고 표시해 주는 것입니다.
aria-hidden="true/false"는 스크린 리더기에서 해당 엘리먼트를 읽지 않아도 되는지를 표시해주는 웹 접근성 관련 속성입니다.
플렉스를 이용해서 반응형 웹을 만들어 보기 전에 미리 설명드릴 것들이 있어서 "유용한 도구"라는 카테고리를 만들었습니다. 다음 포스팅에는 본격적으로 반응형 웹을 만들어보도록 하겠습니다.
공감은 제작자에게 큰 힘이 됩니다.
'Useful-tools' 카테고리의 다른 글
| git으로 버전 관리하기 3 (0) | 2018.03.16 |
|---|---|
| git으로 버전 관리하기 2 (0) | 2018.03.16 |
| git으로 버전 관리하기 (0) | 2018.03.15 |
| 저작권 없는 이미지 사용과 간단한 이미지 api 예시 (0) | 2018.01.26 |
| 구글 폰트 이용하기 (0) | 2018.01.22 |