특수 폰트를 이용하여 예쁜 특수문자를 만드는 방법

흔히 간단한 특수문자를 입력하기 위해 한글 'ㅁ'을 입력한 후 '한자'키를 눌러 나타나는 특수문자를 입력하곤 한다. 물론 이 외에도 여러 한글 자음을 입력하고 '한자'키를 누르면 이용할 수 있는 특수문자들이 여러 가지 있다. 하지만 이 특수문자 가운데 이용할 수 있는 종류가 한정적이어서 좀 더 확장하고 싶은 경우가 있다. 그럴 경우 'WebDings' 폰트나 'WingDings' 폰트를 이용하면 많은 도움을 얻을 수 있다. 웹 문서를 작성하면서 이들 폰트를 어떻게 활용하는지에 대해 알아보도록 하자.

WebDings, WIngDings 폰트를 이용하면 다음과 같은 특수문자를 입력할 수가 있다.

Y 1 G A 8 @ h

우선 HTML 태그에서 WebDings 폰트나 WingDins 폰트를 이용하려면 다음과 같이 <font> 태그의 face 속성을 이용하면 된다. 위 특수문자에 대한 HTML 코드는 다음과 같다.

<font face='WebDings' size='7' color='red'>Y</font>	Y
<font face='WingDings' size='7' color='maroon'>1</font>	1
<font face='WebDings' size='7' color='brown'>G</font>	G
<font face='WingDings' size='7' color='silver'>A</font>	A
<font face='WingDings' size='7' color='navy'>8</font>	8
<font face='WebDings' size='7' color='black'>@</font>	@
<font face='WebDings' size='7' color='navy'>h</font>	h

만일 CSS를 사용한다고 하면, <style> 정의 부분에서 해당 클래스의 font-family를 적절한 폰트로 설정해 주거나 특정 태그에서 style="font-family:'WebDings'"와 같이 정의해 주면 된다.

그렇다면 WingDings와 WebDings의 특수문자에는 어떤 것들이 있을까? 다음의 표를 보면 어떤 문자들이 있는지 쉽게 찾을 수 있을 것이다.

아스키 코드 및 문자	WingDings	Webdings
30 = 0	0	0
31 = 1	1	1
32 = 2	2	2
33 = 3	3	3
34 = 4	4	4
35 = 5	5	5
36 = 6	6	6
37 = 7	7	7
38 = 8	8	8
39 = 9	9	9
40 = @	@	@
41 = A	A	A
42 = B	B	B
43 = C	C	C
44 = D	D	D
45 = E	E	E
46 = F	F	F
47 = G	G	G
48 = H	H	H
49 = I	I	I
50 = P	P	P
51 = Q	Q	Q
52 = R	R	R
53 = S	S	S
54 = T	T	T
55 = U	U	U
56 = V	V	V
57 = W	W	W
58 = X	X	X
59 = Y	Y	Y
60 = `	`	`
61 = a	a	a
62 = b	b	b
63 = c	c	c
64 = d	d	d
65 = e	e	e
66 = f	f	f
67 = g	g	g
68 = h	h	h
69 = i	i	i
70 = p	p	p
71 = q	q	q
72 = r	r	r
73 = s	s	s
74 = t	t	t
75 = u	u	u
76 = v	v	v
77 = w	w	w
78 = x	x	x
79 = y	y	y
80 = €	€	€
30 = 0	0	0
31 = 1	1	1
32 = 2	2	2
33 = 3	3	3
34 = 4	4	4
35 = 5	5	5
36 = 6	6	6
37 = 7	7	7
38 = 8	8	8
39 = 9	9	9
40 = @	@	@
41 = A	A	A
42 = B	B	B
43 = C	C	C
44 = D	D	D
45 = E	E	E
46 = F	F	F
47 = G	G	G
48 = H	H	H
49 = I	I	I
50 = P	P	P
51 = Q	Q	Q
52 = R	R	R
53 = S	S	S
54 = T	T	T
55 = U	U	U
56 = V	V	V
57 = W	W	W
58 = X	X	X
59 = Y	Y	Y
60 = `	`	`
61 = a	a	a
62 = b	b	b
63 = c	c	c
64 = d	d	d
65 = e	e	e
66 = f	f	f
67 = g	g	g
68 = h	h	h
69 = i	i	i
70 = p	p	p
71 = q	q	q
72 = r	r	r
73 = s	s	s
74 = t	t	t
75 = u	u	u
76 = v	v	v
77 = w	w	w
78 = x	x	x
79 = y	y	y
80 = ?	?	?
30 = 0	0	0
31 = 1	1	1
32 = 2	2	2
33 = 3	3	3
34 = 4	4	4
35 = 5	5	5
36 = 6	6	6
37 = 7	7	7
38 = 8	8	8
39 = 9	9	9
40 = @	@	@
41 = A	A	A
42 = B	B	B
43 = C	C	C
44 = D	D	D
45 = E	E	E
46 = F	F	F
47 = G	G	G
48 = H	H	H
49 = I	I	I
50 = P	P	P
51 = Q	Q	Q
52 = R	R	R
53 = S	S	S
54 = T	T	T
55 = U	U	U
56 = V	V	V
57 = W	W	W
58 = X	X	X
59 = Y	Y	Y
60 = `	`	`
61 = a	a	a
62 = b	b	b
63 = c	c	c
64 = d	d	d
65 = e	e	e
66 = f	f	f
67 = g	g	g
68 = h	h	h
69 = i	i	i
70 = p	p	p
71 = q	q	q
72 = r	r	r
73 = s	s	s
74 = t	t	t
75 = u	u	u
76 = v	v	v
77 = w	w	w
78 = x	x	x
79 = y	y	y
80 = ?	?	?

위 표의 특수문자들을 색상과 폰트 크기 등을 조절하여 자신의 웹 페이지에 적절히 사용한다면 멋진 효과를 구현할 수 있을 것이다

 

 

출처 : Tong - lollipop님의 │ lollipop님의 기본통통