반응형
우리가 UI 를 볼때 폰트 하나만으로도 분위기가 확 달라지는 것을 다들 알고 있을 것이다. 만약 느끼지 못했다면 기본 폰트만으로 한번 페이지를 작성해보면 바로 느끼게 될 것이다...
우선 FontAwesome 은 간단하게 말해서 아이콘이다. 근데 스타일먹이기가 너무 편하다 (폰트로 먹여진다)
처음 쓸 때는 이게 편할까 라고 생각했었는데 한번 쓰고 난 뒤로는 필요하다고 생각되면 바로 적용시킬정도로 이 글을 보는 분들도 자주 찾게 될 것이다.
두가지 사용법이 있는데
1. CDN 링크 이용
2. 직접 다운로드
나는 CDN 을 이용해서 했기 때문에 https://cdn.fontawesome.com/링크에 들어가서 CDN 링크를 받아줄 이메일을 입력해서 코드를 받는다.
받은 CDN 링크를 복사해서
이런식으로 프로젝트에 걸어주면
사진에 표시된 부분을 클릭하면 코드가 복사가 되는데 그대로 복사해서 사용해주면 된다.
표시한 부분이 실제로 적용된 부분인데 이게 왜 편하냐면
font-size 스타일 등 폰트스타일을 다 먹일 수 있고 CSS를 자유자재로 먹일 수 있게 된다. 그리고 돈을 내는게 아닌 무료 아이콘도 많이 있으면 검색을 통해서 쉽게 원하는 디자인을 찾을 수 있디.
다음은 웹 폰트에 사용법에 대해 알아 보곘다.
우선 웹폰트란 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트다. 내가 가지고 있지 않은 폰트라도 사용 할 수 있게 되는 것이다~~
구글 폰트 사이트에 접속해서 사용법을 알아보자
여기서 맘에드는 폰트를 하나 고른다.
이런식으로 초록색 버튼을 누르면 쉽게 말해 장바구니 창이 뜬다 거기서 링크를 복사해주고 스타일 코드부분은 복사해서 본인 프로젝트에 붙여서 써주면 되겠다.
이런 식으로 기존의 밋밋했던 폰트들을 바꾸어줘서 훨신 분위기 있게 화면을 꾸며 줄 수 있곘다.
반응형