CSS_Font Awesome

오늘은 CSS의 마지막이 될것 같아요!

CSS에서 Font Awosome이라는 것에 대해서 알아볼텐데요.

Font Aweome 이란?

http://fontawesome.io/ 

여기 페이지에서 확인하시면 됩니다.

원리는 음.... 뭐랄까... 다른 홈페이지에서 정해놓은(?) 만들어놓은 아이콘을 가져다가 쓰는것을 의미하는데요

사용법이랑 코딩하는 방법을 알아보도록 하겠습니다!ㅎㅎ

먼저 홈페이지에 들어가보면

이렇게 나오게 되구요 

제가 저기 위에 빨간색으로 네모칸 쳐 놓은 곳에 Icons 라고 되어있는것을 클릭하면 사용하고자 하는 아이콘들이 많이 나오게 됩니다.

Icons를 클릭하게되면 여러개의 아이콘이 나오게 되는데요...

사용하고자 하는 아이콘에 마우스를 올리면(hover 하게되면^^) 저렇게 초록색으로 표시가 됩니다.

클릭해볼까요?

클릭하게되면 다음과 같은 페이지가 나오면서 어떻게 사용하는지 친절하게 설명해 주고 있습니다.

저렇게만 쓸 수는 없겠죠...?

처음 페이지에 나왔던 다운로드를 하면 저런 아이콘들이 있는 패키지가 다운받아 지는데요...

그렇게 써도 되지만 궂이 다운받지 않아도 사용할수 있답니다!!

바로 link태그를 이용해서 사용할 수 있는데요...

HTML페이지 만들때 head부분에 써주면 된답니다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

이렇게 써주면 된다고해요. (2017.03.28일 기준입니다.)

그럼 이제 직접 코딩을 해볼까요?

간단하게 이렇게 코딩을 할 수 있는데요..

결과화면 보도록 하겠습니다.

너무 작게 나왔죠....?

이런식으로 하면 된답니다~

이것으로 CSS의 모든 기능은 완료된것 같습니다.

찾아보면 더 많겠죠...?ㅎㅎ