13. 라이브러리 (Library)
Fontello
특정 문자에 해당하는 이미지로 이루어진 폰트를 제공하는 사이트.
- 원하는 아이콘을 선택한 뒤 (여러개 선택 가능)
Download webfont를 누르면 다운로드 - 선택 내역은
config.json파일에 저장되고 선택 내역이 초기화 됐을 때 설정을 눌러 이 파일을 업로드하면 목록을 다시 불러올 수 있다. - svg 파일을 받아서 사이트에 drag & drop 하면 나만의 아이콘 폰트를 만들 수 있다.
-
demo.html을 열어 다운받은 아이콘 리스트를 확인show codes를 누르면 각 이미지의 문자 값 (i.e. unicode)를 보여준다.- 이 값을 복사해서
<body>부분에 붙여 넣어 사용 할 수 있다.
-
아이콘을 사용하려는 html파일에
fontello.css를 링크 걸어준 뒤 아이콘을 사용할 태그에font-family: "fontello";를 적용.- 폰트이기 때문에 관련된 속성을 모두 사용할 수 있다.
.font { font-family: "fontello"; color: red; font-size: 200px; }
- 폰트이기 때문에 관련된 속성을 모두 사용할 수 있다.
-
아이콘 사용의 직관성을 높이기 위해 코드가 아닌 이름을 사용 할 수도 있다.
demo.html의show codes를 체크 해제하면 이름이 표시- 다음과 같은 코드로 아이콘을 입력 할 수 있다.
font-family속성 없이 아이콘 유지.<i class = "font name"></i> :before,:afterpseudo selector를 이용해 태그 전후에 콘텐츠를 추가하는 것을 이용/* A 전후로 각각 s, e 추가: sAe */ #test:before { content: "s"; } #test:after { content: "e"; }<div id=test>A</div>- 지정한
class값 전에 아이콘 콘텐츠를 추가하도록css파일에 지정되어있다./* icon- 으로 시작하는 class명의 font-family를 fontello로 설정 */ /* prefix는 사이트 설정에서 바꿀 수 있다. */ [class^ = "icon-"]:before, [class* = "icon-"]:before { font-family: "fontello"; }
-
Font에 animation을 주고 싶으면
animation.css를 링크한 뒤 css에 정의된 animation용 class 값을 넣어줌
Buttons
디자인 된 버튼 라이브러리. Class 이름에 따라 다양한 크기, 형태, 색상의 버튼을 사용
- 홈페이지에서 제공하는
css파일을 받아서 사용하려는 페이지에 링크 - 원하는 element에 맞춰 홈페이지에서 안내하는 class 값을 지정해주면 된다.
- dropdown과 같은 동적 효과는
js파일을 별도로 받은 뒤 script를<head>부분에 넣어줌.
'공부를 합니다 > 웹 (Web)' 카테고리의 다른 글
| 생활코딩 CSS_12 유지보수 (0) | 2020.04.22 |
|---|---|
| 생활코딩 CSS_11 모션 그래픽 (0) | 2020.04.22 |
| 생활코딩 CSS_10.5 SVG (0) | 2020.04.06 |
| 생활코딩 CSS_10.4 변형(transform) (0) | 2020.04.06 |
| 생활코딩 CSS_10.3 혼합(Blend) (0) | 2020.04.06 |