Font Awesome을 사용해야 하는 이유
이 블로그에서는 Font Awesome 폰트를 사용하고 있습니다. 모바일 환경에서 표시되는 좌측 하단의 사이드바 아이콘과 본문 하단에 출력되는 같은 카테고리 글 목록 아이콘에 Font Awesome이 사용되었습니다. Font Awesome을 사용하면 운영체제에서 기본적으로 표현할 수 없는 특수문자를 간단하게 만들 수 있다는 장점이 있습니다. 예를 들어, 의 말풍선 아이콘은 운영체제 기본 폰트 파일에서는 지원하지 않는 아이콘이기 때문에 이와 같은 아이콘을 만들기 위해서는 직접 포토샵과 같은 그래픽 편집 프로그램에서 새로운 아이콘을 만들어야 합니다. 하지만 Font Awesome에서는 공식적으로 지원하고 있는 아이콘이기 때문에 다음과 같은 방법을 사용하면 말풍선 아이콘을 HTML 문서에 추가할 수 있습니다.
1 | <i class="fa fa-comments"></i> |
Font Awesome 폰트 아이콘은 모두 벡터 방식으로 만들어지기 때문에 확대를 해도 아이콘의 모서리 부분이 깨지는 현상이 발생하지 않습니다. 하지만 포토샵에서 만들어진 아이콘은 최대 픽셀을 넘어갈 정도로 확대를 하는 경우에는 모서리 부분이 깨지는 현상이 발생합니다. 일반 레이아웃에서는 고정된 아이콘만 사용되기 때문에 Font Awesome이 그렇게 필요하지 않을 수도 있겠지만, 반응형 레이아웃에서는 데스크탑 컴퓨터나 모바일 환경에서 모두 동일한 아이콘 모양이 출력되어야 하므로, 반응형 레이아웃에서 특수한 아이콘 사용하기 위해서는 반드시 Font Awesome을 이용해야만 합니다.
Font Awesome 사용 방법
http://fontawesome.io/
블로그나 사이트에서 Font Awesome 아이콘을 사용하는 방법은 매우 간단합니다. 가장 먼저 Font Awesome을 사용할 때 필요한 폰트 파일과 CSS 파일을 공식 홈페이지에서 다운로드 해야 합니다. 아래 화면에서 볼 수 있는 것과 같이 Font Awesome 공식 홈페이지에서 다운로드 버튼을 누르면 ZIP 압축 파일 하나를 다운로드 할 수 있습니다. 이 압축 파일을 풀면 여러 디렉토리가 나타나는데 이 중에서 실제로 사용되는 디렉토리는 CSS 디렉토리와 Fonts 디렉토리입니다. CSS 디렉토리에 있는 파일은 Font Awesome 폰트 파일을 사용할 수 있게끔 해주는 CSS(스타일시트) 파일이고, Fonts 디렉토리에 있는 파일들은 Font Awesome의 특수한 아이콘들을 포함하고 있는 아이콘 폰트 파일들입니다.
Font Awesome 홈페이지에서 스크립트 파일과 폰트 파일을 다운로드합니다.
하지만 Font Awesome을 사용하기 위하여 위에서처럼 공식 홈페이지에서 스크립트 파일을 꼭 직접 다운로드해야 하는 것은 아닙니다. 왜냐하면 Font Awesome 스트립트 파일은 CDN 서버를 통해서도 사용할 수 있기 때문입니다. 바로 스크립트 파일을 직접 다운로드 하지 않고 이미 인터넷 상에 등록되어 있는 스크립트 파일을 사용하는 것입니다. 초보자의 경우에는 직접 스크립트 파일을 다운로드 했을 때 어떤 파일을 사용해야 하는지 잘 모를 수도 있기 때문에, 초보자가 Font Awesome을 사용하고자 할 때에는 스크립트 파일을 직접 다운로드를 하는 것보다는 CDN 서버를 이용하는 편이 좋습니다.
또한 CDN 서버를 이용하면 서버의 트래픽 부하를 줄일 수도 있기 때문에 초보자 뿐만 아니라 일반적인 경우에도 직접 스크립트를 다운로드 하는 것보다는 CDN 서버를 이용하여 Font Awesome을 사용하는 편이 훨씬 더 좋습니다. 블로그나 사이트에서 Font Awesome의 CDN 서버 파일을 이용하는 방법은 다음과 같습니다. 아래의 태그 구문을 HTML 파일의 <HEAD> 와 </HEAD> 사이에 넣으면 Font Awesome 사용 준비가 모두 끝납니다.
1 | <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" /> |
티스토리에서 스킨 HTML을 수정하는 방법은 티스토리 블로거라면 누구나 알고 있을 것이라 생각되기 때문에 이 글에서는 따로 HTML 수정 방법에 대해서는 설명하지 않도록 하겠습니다.
Font Awesome을 이용하여 아이콘 만들기
Font Awesome을 이용하여 아이콘을 만들기 위해서는 가장 먼저 HTML 태그의 클래스 속성부터 잘 알고 있어야 합니다. 왜냐하면 Font Awesome의 모든 아이콘들은 클래스를 통해서 만들어지기 때문입니다. HTML 태그에 원하는 아이콘의 클래스 속성을 적용시키면 그 HTML 태그 앞에 Font Awesome 아이콘이 표시됩니다. 클래스는 HTML에서 스타일을 지정할 때 사용되는 태그 속성 값이라는 사실은 다들 잘 알고 있으시겠죠? 그러니 다시 말하면, Font Awesome CSS 파일에는 모든 아이콘들의 정보가 클래스로 저장되어 있다는 것을 의미합니다.
Font Awesome에서 자동차 아이콘은 fa-car 라는 클래스를 사용하고 있는데, 위에서 설명했던 것을 적용해보면, 사용자는 다음과 같은 방법으로 HTML 화면에 자동차 아이콘을 표시할 수 있습니다. 운영체제에서는 자동차 아이콘을 지원하지 않기 때문에 일반적인 방법으로는 HTML 화면에 자동차 아이콘을 표시하는 것은 불가능합니다. 하지만 Font Awesome을 사용한다면 매우 쉽게 자동차 아이콘을 화면에 표시할 수 있습니다. Font Awesome의 폰트 파일에는 매우 다양한 아이콘들이 저장되어 있습니다. 사용자는 클래스를 통해서 이 아이콘들을 꺼내 쓰는 것입니다. 매우 편리합니다. 바로 이것이 Font Awesome을 사용해야만 하는 이유입니다.
1 | <i class="fa fa-car"></i> |
위의 소스코드를 보면 fa-car 클래스 앞에 fa 클래스가 하나 더 있다는 것을 알 수 있습니다. fa 클래스는 Font Awesome을 사용하기 위한 가장 기본적인 클래스입니다. fa 클래스는 Font Awesome 폰트 종류, 여백, 정렬 등의 스타일들을 포함하고 있습니다. 이 스타일들은 모든 Font Awesome 클래스에 적용되어야 하는 속성이기 때문에, 편의를 위하여 fa 클래스가 따로 만들어져 있는 것입니다.. 그러니 Font Awesome을 사용할 때에는 fa-car 클래스 뿐만 아니라 fa 클래스도 함께 적용되어야 합니다.
위와 같이 HTML을 작성하면 그 결과는 다음과 같습니다. 이렇게 자동차 아이콘이 화면에 표시됩니다. 정말 놀랍지 않습니까? 이렇게 만들어진 아이콘은 색깔도 바꿀 수 있습니다. Font Awesome 아이콘은 텍스트 형식으로 만들어진 아이콘이기 때문에 그냥 그 아이콘의 폰트 색깔을 바꿔주면 됩니다.
http://fontawesome.io/icons/
그런데 Font Awesome에서 제공하고 있는 아이콘의 목록를 알아야 위의 방법에서처럼 아이콘 클래스를 사용할 수 있겠죠? Font Awesome에서 제공하는 아이콘의 목록은 위의 링크에서 확인할 수 있습니다. Font Awesome에서 사용 가능한 모든 아이콘들은 위의 페이지에서 확인할 수 있으며, 사용하고 싶은 아이콘이 있는 경우에는 해당 아이콘 오른쪽에 있는 아이콘 클래스 이름을 그대로 사용하면 됩니다. 아이콘을 클릭하면 아이콘의 예시 페이지도 확인해볼 수 있습니다.
Font Awesome에서는 수 백 가지의 아이콘을 사용할 수 있습니다.
Font Awesome에서는 기본적으로 400개 이상의 아이콘을 제공하고 있습니다. 단 한 개의 폰트 파일에서 400개의 아이콘을 지원하고 있습니다. 그리고 자바스크립트도 사용하지 않기 때문에 Font Awesome은 초보자도 쉽게 사용할 수 있습니다.
Font Awesome 응용 사용 방법
Font Awesome을 사용할 때 꼭 위와 같은 방법으로만 사용해야 하는 것은 아닙니다. 위의 방법이 블로그나 사이트 본문에 아이콘을 입력할 때에는 아무런 문제가 발생하지 않겠지만, 블로그 스킨이나 사이트 레이아웃을 개발할 때에는 조금 다른 방법을 사용해야 합니다. 예를 들어, 다음과 같은 레이아웃을 구성하고 싶다고 가정합시다. 아래 스크린샷은 제 블로그의 홈 화면이며, 가장 최근 글이 보여지고 있습니다. 글 목록마다 해당 글의 태그 목록이 출력되고 있는 것을 확인할 수 있는데, 이 태그 목록 앞에는 태그 아이콘이 출력되고 있습니다. 바로 이 아이콘이 Font Awesome을 이용하여 만들어진 아이콘입니다.
태그 목록 앞에 아이콘이 표시되는 레이아웃을 구성하고자 할 때에는 Font Awesome 응용 방법을 사용하는 것이 좋습니다.
위와 같이 반복되는 영역에 Font Awesome 아이콘을 표시하고자 할 때에는 앞서 설명했던 방법보다는 조금 응용된 방법을 사용하는 것이 좋습니다. 왜냐하면 반복되는 부분에 일일이 앞서 설명했던 <i> 태그를 사용하는 경우에는 HTML의 용량이 늘어날 뿐만 아니라 아이콘 스타일을 지정하는 방법이 조금 복잡해질 수 있기 때문입니다. 따라서 저는 다음과 같은 방법을 사용하였습니다. 태그가 출력되는 부분이 tags-area 클래스라고 할 때, 다음과 같은 스타일 정의를 하면 태그 출력 영역 앞 쪽에 태그 아이콘이 자동으로 생성됩니다. CSS에서 :before는 해당 객체의 앞 쪽을 가리키는 가상 선택자입니다. 즉, 실제로는 없는 것을 선택해주는 선택자입니다. 이 선택자와 반대되는 것으로는 :after가 있습니다.
1 2 3 4 5 6 7 8 9 10 11 | .tags-area:before { content: "\f02c"; padding-right: 10px; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} |
위의 CSS 스크립트는 Font Awesome에서 기본적으로 제공하고 있는 fa 클래스와 fa-tags 클래스의 스타일 속성을 하나의 클래스로 합친 것에 불과합니다. 즉, 위에서 설명했던 <i class="fa fa-tags"></i> 이렇게 사용되었던 것을 <div class="tags-area">태그 내용</div> 이렇게 사용될 수 있도록 한 것입니다. 중요한 것은 모든 속성이 :before에 속한다는 것이며, 태그 내용의 스타일에는 아무런 영향을 미치지 않습니다. 일반적으로 CSS는 스타일만 지정할 수 있을 것이라 생각하는 경우가 많겠지만, CSS3로 버전이 업그레이드 되면서 이제는 CSS에서도 어느정도의 콘텐츠를 입력할 수 있게 되었습니다. :before와 :after의 가상 선택자와 content 속성을 사용하면 CSS를 통해서도 HTML에 내용을 입력할 수 있습니다.
마무리
Font Awesome은 특히 반응형 웹에서 아이콘을 출력할 때 매우 유용하게 사용될 수 있습니다. 벡터 방식이기 때문에 크기의 변화에 따라 모양이 변하지 않는다는 가장 큰 장점이 있기 때문입니다. 또한 Font Awesome 아이콘은 이미지 형식이 아니라 텍스트 형식이기 때문에 CSS를 통하여 그 디자인을 마음대로 바꿀 수도 있습니다. 위에서 설명했듯이 아이콘의 색깔은 color 스타일 속성을 통해서 바꿀 수 있으며, 아이콘의 크기, 그림자 속성 등 CSS의 모든 스타일 속성들이 적용될 수 있습니다.
Font Awesome은 홈페이지의 개발을 좀 더 쉽게 해줍니다. CSS3가 개발되면서 레이아웃에서의 이미지의 사용이 점차 줄어들고 있고, 간단한 아이콘들은 Font Awesome이 그 역할을 대신하고 있습니다. Font Awesome을 사용하여 자신의 블로그에 예쁜 아이콘들을 넣어보십시오.
'WEB > CSS' 카테고리의 다른 글
| nth-child (0) | 2017.03.10 |
|---|---|
| text-indent + padding (0) | 2017.03.07 |
| 모를 수도 있는 CSS의 7가지 단위 (0) | 2017.02.07 |
| screen_out (0) | 2017.01.09 |
| [TIP]지정한 넓이보다 텍스트 내용이 넘칠때 ...으로 보이기 (0) | 2017.01.04 |
