<html> <head> <style type="text/css"><!-- .dingbat_class {font-family: Webdings; font-size: 25px; color:blue;} --> </style> <script language="JavaScript"><!-- ; var hand="hand"; var str="가나다.넓고넓은.청춘예찬.가시리가시리잇고.잡초는없다.불휘기픈남간바라매아니뮐쌔.훈민정음.청산에살어리랏다.佛"; function setDingbetName(arg) { dingbat1.style.fontFamily=arg.value; document.styleSheets[0].rules[0].style.fontFamily=arg.value; } function setColor(arg) { dingbat1.style.color=arg.value; document.styleSheets[0].rules[0].style.color=arg.value; } function selectChar(arg) { dingbat1.innerText=arg.innerText; dingbat2.innerText=arg.value1; dingbat3.innerText=arg.innerText; } --></script> </head> <body> Dingbat은 문자에 하나씩 대응되어 있는 그림으로 TTF이므로 그래픽처리가 가능합니다.<br> Windows 에서는 Webdings, wingdings, wingdings 2, wingdings 3 등이 제공됩니다. <center> <table> <tr> <td> <font FACE="굴림" SIZE=5> <table> <tr> <td>Font 이름 : <input type="text" name="dingbat_name" size="20" maxlength="40" value="Webdings" onchange="setDingbetName(this);"> <select onChange="if(this.selectedIndex!=0) dingbat_name.value=this.options[this.selectedIndex].value; setDingbetName(this); this.selectedIndex=0;"> <option value="Webdings" selected>Font 이름 <option value="Webdings">Webdings <option value="Wingdings">Wingdings <option value="Wingdings 2">Wingdings 2 <option value="Wingdings 3">Wingdings 3 <option value="굴림">굴림 <option value="굴림체">굴림체 <option value="궁서">궁서 </select> </td> </tr> <tr> <td> Color 이름 : <input type="text" name="dingbat_color" size="19" maxlength="40" value="Blue" onchange="setColor(this);"> <select onChange="if(this.selectedIndex!=0) dingbat_color.value=this.options[this.selectedIndex].value; setColor(this); this.selectedIndex=0;"> <option value="black" selected>Color 이름 <option value="aliceblue" style="background-color:aliceblue">aliceblue <option value="antiquewhite" style="background-color:antiquewhite">antiquewhite <option value="aqua" style="background-color:aqua">aqua <option value="aquamarine" style="background-color:aquamarine">aquamarine <option value="zure" style="background-color:zure">zure <option value="beige" style="background-color:beige">beige <option value="bisque" style="background-color:bisque">bisque <option value="black" style="background-color:black">black <option value="blanchedalmond" style="background-color:blanchedalmond">blanchedalmond <option value="blue" style="background-color:blue">blue <option value="blueviolet" style="background-color:blueviolet">blueviolet <option value="brown" style="background-color:brown">brown <option value="burlywood" style="background-color:burlywood">burlywood <option value="cadetblue" style="background-color:cadetblue">cadetblue <option value="chartreuse" style="background-color:chartreuse">chartreuse <option value="chocolate" style="background-color:chocolate">chocolate <option value="coral" style="background-color:coral">coral <option value="cornflowerblue" style="background-color:cornflowerblue">cornflowerblue <option value="cornsilk" style="background-color:cornsilk">cornsilk <option value="crimson" style="background-color:crimson">crimson <option value="cyan" style="background-color:cyan">cyan <option value="darkblue" style="background-color:darkblue">darkblue <option value="darkcyan" style="background-color:darkcyan">darkcyan <option value="darkgoldenrod" style="background-color:darkgoldenrod">darkgoldenrod <option value="darkgray" style="background-color:darkgray">darkgray <option value="darkgreen" style="background-color:darkgreen">darkgreen <option value="darkkhaki" style="background-color:darkkhaki">darkkhaki <option value="darkmagenta" style="background-color:darkmagenta">darkmagenta <option value="darkolivegreen" style="background-color:darkolivegreen">darkolivegreen <option value="darkorange" style="background-color:darkorange">darkorange <option value="darkorchid" style="background-color:darkorchid">darkorchid <option value="darkred" style="background-color:darkred">darkred <option value="darksalmon" style="background-color:darksalmon">darksalmon <option value="darkseagreen" style="background-color:darkseagreen">darkseagreen <option value="darkslateblue" style="background-color:darkslateblue">darkslateblue <option value="darkslategray" style="background-color:darkslategray">darkslategray <option value="darkturquoise" style="background-color:darkturquoise">darkturquoise <option value="darkviolet" style="background-color:darkviolet">darkviolet <option value="deeppink" style="background-color:deeppink">deeppink <option value="deepskyblue" style="background-color:deepskyblue">deepskyblue <option value="dimgray" style="background-color:dimgray">dimgray <option value="dodgerblue" style="background-color:dodgerblue">dodgerblue <option value="firebrick" style="background-color:firebrick">firebrick <option value="floralwhite" style="background-color:floralwhite">floralwhite <option value="forestgreen" style="background-color:forestgreen">forestgreen <option value="fuchsia" style="background-color:fuchsia">fuchsia <option value="gainsboro" style="background-color:gainsboro">gainsboro <option value="ghostwhite" style="background-color:ghostwhite">ghostwhite <option value="gold" style="background-color:gold">gold <option value="goldenrod" style="background-color:goldenrod">goldenrod <option value="gray" style="background-color:gray">gray <option value="green" style="background-color:green">green <option value="greenyellow" style="background-color:greenyellow">greenyellow <option value="honeydew" style="background-color:honeydew">honeydew <option value="hotpink" style="background-color:hotpink">hotpink <option value="indianred" style="background-color:indianred">indianred <option value="indigo" style="background-color:indigo">indigo <option value="ivory" style="background-color:ivory">ivory <option value="khaki" style="background-color:khaki">khaki <option value="lavender" style="background-color:lavender">lavender <option value="lavenderblush" style="background-color:lavenderblush">lavenderblush <option value="lawngreen" style="background-color:lawngreen">lawngreen <option value="lemonchiffon" style="background-color:lemonchiffon">lemonchiffon <option value="lightblue" style="background-color:lightblue">lightblue <option value="lightcoral" style="background-color:lightcoral">lightcoral <option value="lightcyan" style="background-color:lightcyan">lightcyan <option value="lightgoldenrodyellow" style="background-color:lightgoldenrodyello">wlightgoldenrodyellow <option value="lightgreen" style="background-color:lightgreen">lightgreen <option value="lightgray" style="background-color:lightgray">lightgray <option value="lightpink" style="background-color:lightpink">lightpink <option value="lightsalmon" style="background-color:lightsalmon">lightsalmon <option value="lightseagreen" style="background-color:lightseagreen">lightseagreen <option value="lightskyblue" style="background-color:lightskyblue">lightskyblue <option value="lightslategray" style="background-color:lightslategray">lightslategray <option value="lightsteelblue" style="background-color:lightsteelblue">lightsteelblue <option value="lightyellow" style="background-color:lightyellow">lightyellow <option value="lime" style="background-color:lime">lime <option value="limegreen" style="background-color:limegreen">limegreen <option value="linen" style="background-color:linen">linen <option value="magenta" style="background-color:magenta">magenta <option value="maroon" style="background-color:maroon">maroon <option value="mediumaquamarine" style="background-color:mediumaquamarine">mediumaquamarine <option value="mediumblue" style="background-color:mediumblue">mediumblue <option value="mediumorchid" style="background-color:mediumorchid">mediumorchid <option value="mediumpurple" style="background-color:mediumpurple">mediumpurple <option value="mediumseagreen" style="background-color:mediumseagreen">mediumseagreen <option value="mediumslateblue" style="background-color:mediumslateblue">mediumslateblue <option value="mediumspringgreen" style="background-color:mediumspringgreen">mediumspringgreen <option value="mediumturquoise" style="background-color:mediumturquoise">mediumturquoise <option value="mediumvioletred" style="background-color:mediumvioletred">mediumvioletred <option value="midnightblue" style="background-color:midnightblue">midnightblue <option value="mintcream" style="background-color:mintcream">mintcream <option value="mistyrose" style="background-color:mistyrose">mistyrose <option value="moccasin" style="background-color:moccasin">moccasin <option value="navajowhite" style="background-color:navajowhite">navajowhite <option value="navy" style="background-color:navy">navy <option value="oldlace" style="background-color:oldlace">oldlace <option value="olive" style="background-color:olive">olive <option value="olivedrab" style="background-color:olivedrab">olivedrab <option value="orange" style="background-color:orange">orange <option value="orangered" style="background-color:orangered">orangered <option value="orchid" style="background-color:orchid">orchid <option value="palegoldenrod" style="background-color:palegoldenrod">palegoldenrod <option value="palegreen" style="background-color:palegreen">palegreen <option value="paleturquoise" style="background-color:paleturquoise">paleturquoise <option value="palevioletred" style="background-color:palevioletred">palevioletred <option value="papayawhip" style="background-color:papayawhip">papayawhip <option value="peachpuff" style="background-color:peachpuff">peachpuff <option value="peru" style="background-color:peru">peru <option value="pink" style="background-color:pink">pink <option value="plum" style="background-color:plum">plum <option value="powderblue" style="background-color:powderblue">powderblue <option value="purple" style="background-color:purple">purple <option value="red" style="background-color:red">red <option value="rosybrown" style="background-color:rosybrown">rosybrown <option value="royalblue" style="background-color:royalblue">royalblue <option value="saddlebrown" style="background-color:saddlebrown">saddlebrown <option value="salmon" style="background-color:salmon">salmon <option value="sandybrown" style="background-color:sandybrown">sandybrown <option value="seagreen" style="background-color:seagreen">seagreen <option value="seashell" style="background-color:seashell">seashell <option value="sienna" style="background-color:sienna">sienna <option value="silver" style="background-color:silver">silver <option value="skyblue" style="background-color:skyblue">skyblue <option value="slateblue" style="background-color:slateblue">slateblue <option value="slategray" style="background-color:slategray">slategray <option value="snow" style="background-color:snow">snow <option value="springgreen" style="background-color:springgreen">springgreen <option value="steelblue" style="background-color:steelblue">steelblue <option value="tan" style="background-color:tan">tan <option value="teal" style="background-color:teal">teal <option value="thistle" style="background-color:thistle">thistle <option value="tomato" style="background-color:tomato">tomato <option value="turquoise" style="background-color:turquoise">turquoise <option value="violet" style="background-color:violet">violet <option value="wheat" style="background-color:wheat">wheat <option value="white" style="background-color:white">white <option value="whitesmoke" style="background-color:whitesmoke">whitesmoke <option value="yellow" style="background-color:yellow">yellow <option value="yellowgreen" style="background-color:yellowgreen">yellowgreen </select> </td> </tr> </table> </font> </td> <td> <span id="dingbat1" STYLE="font-family: Webdings; font-size: 120px; color=blue;">!</span> </td> <td> 문자 값 : &#<span id="dingbat2" STYLE="font-family: "굴림"; font-size: 20px;">33</span><br> 문자 모양 : <span id="dingbat3" STYLE="font-family: "굴림"; font-size: 20px;">!</span><br> <!--[아스키(ASCII)값을 벗어나는 글자(128이상)은 '문자모양'을 사용하지 마세요]--> </td> </tr> </table> </center><hr> <script> for (i=33; i<256; i++) document.write('<span class="dingbat_class" onmouseover="this.style.cursor=hand" onclick="selectChar(this);" value1=' + i + '>&#' + i + '</span> '); document.write('<hr>[한글]'); for (i=0; i<str.length; i++) document.write('<span class="dingbat_class" onmouseover="this.style.cursor=hand" onclick="selectChar(this);" value1=' + str.charCodeAt(i) + '>' + str.substr(i,1) + '</span> '); </script> </body> </html>
추천 : 
