홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송
딩뱃(dingbat)과 한글폰트 점검, 색깔 선택
15년 전
Dingbat은 문자에 하나씩 대응되어 있는 그림으로 TTF이므로 그래픽처리가 가능합니다.
Windows 에서는 Webdings, wingdings, wingdings 2, wingdings 3 등이 제공됩니다.
Font 이름 :
Color 이름 :
! 문자 값 : &#33
문자 모양 : !

<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;">&#33</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>

추천추천 : 229 추천 목록
번호 제목
3,035
 아이프레임(iframe) 비율 유지하면서 크기 조절하는 방법
3,034
 PHP 배열에서 무작위로 하나 뽑아주는 array rand() 함수
3,033
 PHP 정규식 정리
3,032
 PHP 정규식을 활용한 태그 및 특정 문자열 제거 및 추출 방법
3,031
 php 크롤링 또는 파싱 함수, 정규식 모음
3,030
 제이쿼리 기본 명령어
3,029
 웹페이지 가로 모드세로 모드 인식하기
3,028
 모바일 웹 화면 강제 회전(가로모드 고정)
3,027
 [HTML5]에서 frameset 대체 방법과 iframe 속성
3,026
 HTML <Audio> 사용법
3,025
 윈도우10 시스템파일 손상 (초간단 오류 복구방법!!)
3,024
 PHP 파일 존재 여부 파악하기(로컬 파일 존재 및 원격지 파일 존재)
3,023
 [CSS] 박스 세로 가운데 중앙 정렬 6가지
3,022
 CSS Layout 수평 & 수직 정렬
3,021
 여러 도메인들 간 쿠키 공유하기
3,020
 태그 사이에 있는 텍스트를 추출
3,019
 [JQuery] textbox focus on off일때 숫자 콤마 보여주기
3,018
 쿠키 생성,가져오기,삭제
3,017
 사용자 함수 모음
3,016
 마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
3,015
 [HTML5] <video> - DOM으로 제어하기
3,014
 HTML5 video 태그에서 영상 좌우반전
3,013
 PHP - 특정 태그 및 문자열 추출, 제거
3,012
 [PHP] define과 defined의 차이
3,011
 우클릭 완벽차단 스크립트
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.