본문 영역
아이콘 테스트 상세보기
작성자: 관리자
추천: 0 조회: 2361
아이콘
우리가 인터넷 서핑을 할때 로딩시간이 10초 이상일 경우, 답답함을 느끼고, 창을 닫아버리게 됩니다.
페이지 로딩 시간을 10으로 잡았을 때, 이미지 로딩 시간(페이지 내)이 5이상을 차지 합니다.
이미지 파일 수 ∝ (1 /로딩속도) 반비례
아이콘의 용량은 아주 적습니다. 하지만 아이콘 역시 이미지 파일입니다.
이미지 파일 한개를 로딩하기 위해서는 요청 → 대기 → 받아옴 → 출력 순으로 시간을 잡아먹게 됩니다.
파일 용량이 적다고 100% 로딩이 빠르다는 보장도 없습니다.(순간적인 대기 시간이 길어진다던가, 요청시간이 길어진다던가)
아이콘의 역활은 좀 더 이쁘게 꾸미기 위한 것이지, 전체 페이지에 큰 역활은 하지 못합니다. 하지만 아이콘을 삽입하고자 할 경우, 한 페이지 내에 10개 이상이 들어가게 됩니다.
있어도 그만, 없어도 그만인 아이콘으로 로딩시간에 영향을 미친다는 것은 엄청난 잘못입니다.
결론적으로, 몽9빌더에서 제공되는 아이콘은 CSS Image Sprite 형식으로 저장되어 있습니다.
CSS Image Sprite이란?
여러 그림 파일을 하나로 합치고, 그 그림 파일을 화면에 표시할 때는 CSS의 background-position 속성을 이용해 원하는 부분만 보이는게 하는것
여러 그림 파일을 하나로 합치고, 그 그림 파일을 화면에 표시할 때는 CSS의 background-position 속성을 이용해 원하는 부분만 보이는게 하는것
쉽게 말해 아이콘 모두를 하나의 파일로 저장하고, 스타일시트로 불러온 후, 필요부분만 보여지게 하는 것입니다.
100개 이상의 아이콘을 한방에 불러온다는 것이지요. 이제 몽9빌더에서 여러분은 100개 이상의 아이콘을 걱정없이 마음껏 쓰실 수 있습니다.
아이콘 종류
![클래스명 icon 그룹 이미지](http://image.mong9.com/m9_img/etc/icons/mong9_icon_17x17_black.png)
![클래스명 icon2 그룹 이미지](http://image.mong9.com/m9_img/etc/icons/mong9_icon_17x17_white.png)
![클래스명 icon3 그룹 이미지](http://image.mong9.com/m9_img/etc/icons/mong9_icon_17x17_gray.png)
![클래스명 icon4 그룹 이미지](http://image.mong9.com/m9_img/etc/icons/mong9_icon_17x17_blue.png)
![클래스명 icon5 그룹 이미지](http://image.mong9.com/m9_img/etc/icons/mong9_icon_17x17_green.png)
![클래스명 icon6 그룹 이미지](http://image.mong9.com/m9_img/etc/icons/mong9_icon_17x17_orange.png)
![클래스명 icon7 그룹 이미지](http://blog.mong9.com/mong9_icon_17x17.png)
이 이미지 7개 중 첫번째(검정색), 두번째(흰색) 이미지만 활성화 되어 있습니다. 나머지 이미지는 필요하시면 활성화(주석처리 된 것을 제거)하여 사용하세요.
두번째(흰색) 이미지는 흰색인 관계로 사용자에게 설명하기 위해 배경을 검은색으로 처리한 것입니다.
두번째(흰색) 이미지는 흰색인 관계로 사용자에게 설명하기 위해 배경을 검은색으로 처리한 것입니다.
아이콘 출력방법
아이콘은 이미지이기 때문에 <img src="">로 출력하지만, 우리는 CSS Image Sprite 형식으로 저장되어 있기에 <span class=""></span>로 사용합니다.
div, a 기타 많은 태그로도 사용 가능하지만, 아래의 버튼들과 응용하기 위해서는 span 태그 사용을 습관화 해두시는게 좋습니다.
NO | 아이콘 | 클래스 코드명 | 사용 코드 |
---|---|---|---|
1 | 로그인 | arrow1_up | <span class="icon icon-arrow1_up"></span> |
2 | 로그인 | arrow1_down | <span class="icon icon-arrow1_down"></span> |
3 | 로그인 | arrow1_right | <span class="icon icon-arrow1_right"></span> |
4 | 로그인 | arrow1_left | <span class="icon icon-arrow1_left"></span> |
5 | 로그인 | arrow2_up | <span class="icon icon-arrow2_up"></span> |
6 | 로그인 | arrow2_down | <span class="icon icon-arrow2_down"></span> |
7 | 로그인 | arrow2_right | <span class="icon icon-arrow2_right"></span> |
8 | 로그인 | arrow2_left | <span class="icon icon-arrow2_left"></span> |
9 | 로그인 | clock1 | <span class="icon icon-clock1"></span> |
10 | 로그인 | clock2 | <span class="icon icon-clock2"></span> |
11 | 로그인 | arrow3_up | <span class="icon icon-arrow3_up"></span> |
12 | 로그인 | arrow3_down | <span class="icon icon-arrow3_down"></span> |
13 | 로그인 | arrow3_right | <span class="icon icon-arrow3_right"></span> |
14 | 로그인 | arrow3_left | <span class="icon icon-arrow3_left"></span> |
15 | 로그인 | arrow4_up | <span class="icon icon-arrow4_up"></span> |
16 | 로그인 | arrow4_down | <span class="icon icon-arrow4_down"></span> |
17 | 로그인 | arrow4_right | <span class="icon icon-arrow4_right"></span> |
18 | 로그인 | arrow4_left | <span class="icon icon-arrow4_left"></span> |
19 | 로그인 | link1 | <span class="icon icon-link1"></span> |
20 | 로그인 | link2 | <span class="icon icon-link2"></span> |
21 | 로그인 | arrow5_up | <span class="icon icon-arrow5_up"></span> |
22 | 로그인 | arrow5_down | <span class="icon icon-arrow5_down"></span> |
23 | 로그인 | arrow5_right | <span class="icon icon-arrow5_right"></span> |
24 | 로그인 | arrow5_left | <span class="icon icon-arrow5_left"></span> |
25 | 로그인 | arrow6_up | <span class="icon icon-arrow6_up"></span> |
26 | 로그인 | arrow6_down | <span class="icon icon-arrow6_down"></span> |
27 | 로그인 | arrow6_right | <span class="icon icon-arrow6_right"></span> |
28 | 로그인 | arrow6_left | <span class="icon icon-arrow6_left"></span> |
29 | 로그인 | man1 | <span class="icon icon-man1"></span> |
30 | 로그인 | man2 | <span class="icon icon-man2"></span> |
31 | 로그인 | plus1 | <span class="icon icon-plus1"></span> |
32 | 로그인 | plus2 | <span class="icon icon-plus2"></span> |
33 | 로그인 | minus1 | <span class="icon icon-minus1"></span> |
34 | 로그인 | minus2 | <span class="icon icon-minus2"></span> |
35 | 로그인 | box-arrow-up1 | <span class="icon icon-box-arrow-up1"></span> |
36 | 로그인 | box-arrow-down1 | <span class="icon icon-box-arrow-down1"></span> |
37 | 로그인 | box-arrow-up2 | <span class="icon icon-box-arrow-up2"></span> |
38 | 로그인 | box-arrow-down2 | <span class="icon icon-box-arrow-down2"></span> |
39 | 로그인 | document1 | <span class="icon icon-document1"></span> |
40 | 로그인 | document2 | <span class="icon icon-document2"></span> |
41 | 로그인 | circle-check1 | <span class="icon icon-circle-check1"></span> |
42 | 로그인 | circle-minus1 | <span class="icon icon-circle-minus1"></span> |
43 | 로그인 | circle-plus1 | <span class="icon icon-circle-plus1"></span> |
44 | 로그인 | circle-close1 | <span class="icon icon-circle-close1"></span> |
45 | 로그인 | circle-check2 | <span class="icon icon-circle-check2"></span> |
46 | 로그인 | circle-minus2 | <span class="icon icon-circle-minus2"></span> |
47 | 로그인 | circle-plus2 | <span class="icon icon-circle-plus2"></span> |
48 | 로그인 | circle-close2 | <span class="icon icon-circle-close2"></span> |
49 | 로그인 | light1 | <span class="icon icon-light1"></span> |
50 | 로그인 | light2 | <span class="icon icon-light2"></span> |
51 | 로그인 | star1 | <span class="icon icon-star1"></span> |
52 | 로그인 | star2 | <span class="icon icon-star2"></span> |
53 | 로그인 | star3 | <span class="icon icon-star3"></span> |
54 | 로그인 | star4 | <span class="icon icon-star4"></span> |
55 | 로그인 | figure1 | <span class="icon icon-figure1"></span> |
56 | 로그인 | figure2 | <span class="icon icon-figure2"></span> |
57 | 로그인 | figure3 | <span class="icon icon-figure3"></span> |
58 | 로그인 | figure4 | <span class="icon icon-figure4"></span> |
59 | 로그인 | pencil | <span class="icon icon-pencil"></span> |
60 | 로그인 | pen | <span class="icon icon-pen"></span> |
61 | 로그인 | question1 | <span class="icon icon-question1"></span> |
62 | 로그인 | question2 | <span class="icon icon-question2"></span> |
63 | 로그인 | question3 | <span class="icon icon-question3"></span> |
64 | 로그인 | picture1 | <span class="icon icon-picture1"></span> |
65 | 로그인 | picture2 | <span class="icon icon-picture2"></span> |
66 | 로그인 | picture3 | <span class="icon icon-picture3"></span> |
67 | 로그인 | check1 | <span class="icon icon-check1"></span> |
68 | 로그인 | check2 | <span class="icon icon-check2"></span> |
69 | 로그인 | check3 | <span class="icon icon-check3"></span> |
70 | 로그인 | cycle | <span class="icon icon-cycle"></span> |
71 | 로그인 | key1 | <span class="icon icon-key1"></span> |
72 | 로그인 | key2 | <span class="icon icon-key2"></span> |
73 | 로그인 | key3 | <span class="icon icon-key3"></span> |
74 | 로그인 | home | <span class="icon icon-home"></span> |
75 | 로그인 | factory | <span class="icon icon-factory"></span> |
76 | 로그인 | building | <span class="icon icon-building"></span> |
77 | 로그인 | spanner | <span class="icon icon-spanner"></span> |
78 | 로그인 | gear | <span class="icon icon-gear"></span> |
79 | 로그인 | mail1 | <span class="icon icon-mail1"></span> |
80 | 로그인 | mail2 | <span class="icon icon-mail2"></span> |
81 | 로그인 | diagram1 | <span class="icon icon-diagram1"></span> |
82 | 로그인 | diagram2 | <span class="icon icon-diagram2"></span> |
83 | 로그인 | sun | <span class="icon icon-sun"></span> |
84 | 로그인 | book | <span class="icon icon-book"></span> |
85 | 로그인 | mark1 | <span class="icon icon-mark1"></span> |
86 | 로그인 | mouse | <span class="icon icon-mouse"></span> |
87 | 로그인 | speaker | <span class="icon icon-speaker"></span> |
88 | 로그인 | warning | <span class="icon icon-warning"></span> |
89 | 로그인 | exclamation | <span class="icon icon-exclamation"></span> |
90 | 로그인 | question | <span class="icon icon-question"></span> |
91 | 로그인 | search | <span class="icon icon-search"></span> |
92 | 로그인 | polder | <span class="icon icon-polder"></span> |
93 | 로그인 | tel | <span class="icon icon-tel"></span> |
94 | 로그인 | fax | <span class="icon icon-fax"></span> |
95 | 로그인 | phone | <span class="icon icon-phone"></span> |
96 | 로그인 | mike | <span class="icon icon-mike"></span> |
97 | 로그인 | airplane | <span class="icon icon-airplane"></span> |
98 | 로그인 | car | <span class="icon icon-car"></span> |
99 | 로그인 | bus | <span class="icon icon-bus"></span> |
100 | 로그인 | train | <span class="icon icon-train"></span> |
101 | 로그인 | battery | <span class="icon icon-battery"></span> |
102 | 로그인 | gift | <span class="icon icon-gift"></span> |
103 | 로그인 | click | <span class="icon icon-click"></span> |
104 | 로그인 | clock | <span class="icon icon-clock"></span> |
105 | 로그인 | click2 | <span class="icon icon-click2"></span> |
106 | 로그인 | headset | <span class="icon icon-headset"></span> |
107 | 로그인 | gradation-cap | <span class="icon icon-gradation-cap"></span> |
108 | 로그인 | dais | <span class="icon icon-dais"></span> |
109 | 로그인 | syringe | <span class="icon icon-syringe"></span> |
110 | 로그인 | music | <span class="icon icon-music"></span> |
111 | 로그인 | medal | <span class="icon icon-medal"></span> |
112 | 로그인 | thumb-tack | <span class="icon icon-thumb-tack"></span> |
113 | 로그인 | organization | <span class="icon icon-organization"></span> |
아이콘 응용
등록일:
마지막 수정일:
이전글:검색엔진 최적화
다음글: 그림자 스타일시트 생성기