Chap 8. Css 뛰어넘기

* Preprocesser

Css 자체가 커다란 표준이기에 다양한 기능이 추가되기까지 많은 과정과 시간이 걸림. 그래서 추가적인 기능을 미리 맛보일 수 있도록 하는 것임. 즉, css의 변형 모듈을 사용가능

http://lesscss.org/  (온라인 변환기)

http://sass-lang.com/

http://stylus-lang.com/ (온라인 변환기)

Preprocesser 문법이 있고 이러한 문법을 컴파일을 통해 css 문법으로 변형해주는 것으로 구성되어 있음

에디터에서 확장기능을 통해 컴파일러 설치!

* Fontello 

(참조: Fontello.com)

(참조: thenounproject.com)

아이콘 같은 것들을 이미지가 아닌 폰트로 삽입하기(Vector 방식)

Fontello.com 사이트에서 얼마든지 사용 가능

1)

code를 읽어서 html에 넣고 (&#xe811) 

css를 link로 fontello를 가져오고 font-family를 fontello로 설정!

2) i class로 icon 이름을 주면 됨!

2 방법이 훨씬 좋음!

추가로 animation.css 를 활용해서 icon class 뒤에 animate-spin과 같이 덧붙여주면 animation도 활용이 가능하다!

Fontello에 svg 파일을 업로드해서 아이콘 폰트를 만들 수 있음!!