그림 문자2 티스토리나 웹사이트에 Font Awesome 글리프 아이콘 CSS 활용하기 지난 포스트에서 Font Awesome 4.3.0 설치와 사용법을 간단하게 소개했다. Font Awesome 설치 및 사용법 포스트 바로가기 위에서 설명한 방법은 HTML 등에서 마크업하는, 그러니까 일일이 입력해 주는 방법이다. 실제로 Font Awesome 홈페이지에 있는 'Examples'에서는 거의 이 방법들만을 위주로 소개하고 있다. 그런데 글리피콘의 진가는 개별 마크업에서 오는 게 아니라, CSS에서 온다. 일정한 class 네임을 가진 요소들의 앞이나 뒤에 이 글리프 아이콘들을 넣도록 설정함으로서 웹사이트와 블로그의 디자인을 더욱 깔끔하고 예쁘게 꾸밀 수 있는 것. 그 기본적인 원리와 방법을 소개한다. Font Awesome을 CSS에 활용해 보자 리스트 앞에 사용하기 Font Awesome.. 열린노트/IT·SW·디자인 티스토리에서 Font Awesome 사용하기(글리프 아이콘) 블로그뿐만 아니라 웹사이트를 보기 좋게, 또는 편리하게 꾸미는 데 가장 중요한 것 중 하나가 아이콘이다. 예전에는 웹상에서 아이콘을 쓰려면 적당한 이미지 파일을 만들어 사용해야 했다. 일일이 그림을 만들고, 그 이미지를 웹상에 업로드해 일정한 경로를 만들고, 웹페이지에 그것을 사용하려면 img 태그를 써서 일일이 불러와야 했다. 한두 개면 괜찮겠지만 하나의 웹사이트에 사용되는 아이콘이 어디 한두 개인가. 그래서 사람들은 '★, ♬' 같은 특수 문자를 쓰기도 했다. 보다 간편하게 아이콘을 표현하고 싶었기 때문이다. 요즘에는 글리프 아이콘(Glyph Icon)을 사용한 다양한 표현이 가능해졌다. 글리프 아이콘(Glyph Icon)이란? 글리프 아이콘은 일종의 아이콘 서체로, 누군가가 미리 만들어 놓은 아이콘.. 열린노트/IT·SW·디자인 이전 1 다음
