유니코드 Encoding/Decoding

한글 문자를 유니코드 형태, 혹은 그 반대로 변환하는 예제를 만들어 보자.

 

출처 : https://jang8584.tistory.com/227

[javascript] 유니코드-한글 변환

 

function unicodeToKor(){
  var str=document.getElementById("txtUni").value;
  document.getElementById("txtKor").value=unescape(str);
}
function korToUnicode(){
  var str=document.getElementById("txtKor").value;
  document.getElementById("txtUni").value=escape(str).replace(/%u/g,'U+');
}

// 클립보드 복사 API
new ClipboardJS('#copyUni');
new ClipboardJS('#copyKor');

<table width="100%">
  <colgroup>
    <col width="100" />
    <col width="*" />
  </colgroup>
  <tr>
    <th class="thema_color" style="text-align: center;">유니코드<br><button id="copyUni" class="icomoon icomoon-copy" data-clipboard-target="#txtUni" title="유니코드 문자 복사"></button></th>
    <td>
      <textarea id="txtUni" onkeyup="unicodeToKor()" style="width: 100%; height: 100px;"></textarea>

    </td>
  </tr>
  <tr>
    <th class="thema_color" style="text-align: center;">한글<br><button id="copyKor" class="icomoon icomoon-copy" data-clipboard-target="#txtKor" title="한글 문자 복사"></button></th>
    <td>
      <textarea id="txtKor" onkeyup="korToUnicode()" style="width: 100%; height: 100px;"></textarea>
    </td>
  </tr>
</table>

 

테스트 해보기

유니코드
한글

 

이러한 유니코드 문자는 폰트를 임베딩 할 때 한글과 영문 폰트를 별도로 지정하는 옵션에서도 활용할 수 있다.

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Raleway Light'), local('Raleway-Light')
    , url('images/Raleway-Light.ttf') format('truetype');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF, U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

 

위 변환에서 나온 결과의 %u 를 U+로 변경하여 사용하기!

 

유니코드 문자 리스트

Refer	Code	Glyph	Decimal	Description	Abbreviation
ASCII Punctuation & Symbols	U+0020		32	Space	0001
	U+0021	!	33	Exclamation mark	0002
	U+0022	"	34	Quotation mark	0003
	U+0023	#	35	Number sign, Hashtag, Octothorpe, Sharp	0004
	U+0024	$	36	Dollar sign	0005
	U+0025	%	37	Percent sign	0006
	U+0026	&	38	Ampersand	0007
	U+0027	'	39	Apostrophe	0008
	U+0028	(	40	Left parenthesis	0009
	U+0029	)	41	Right parenthesis	0010
	U+002A	*	42	Asterisk	0011
	U+002B	+	43	Plus sign	0012
	U+002C	,	44	Comma	0013
	U+002D	-	45	Hyphen-minus	0014
	U+002E	.	46	Full stop	0015
	U+002F	/	47	Slash (Solidus)	0016
ASCII Digits	U+0030	0	48	Digit Zero	0017
	U+0031	1	49	Digit One	0018
	U+0032	2	50	Digit Two	0019
	U+0033	3	51	Digit Three	0020
	U+0034	4	52	Digit Four	0021
	U+0035	5	53	Digit Five	0022
	U+0036	6	54	Digit Six	0023
	U+0037	7	55	Digit Seven	0024
	U+0038	8	56	Digit Eight	0025
	U+0039	9	57	Digit Nine	0026
ASCII Punctuation & Symbols	U+003A	:	58	Colon	0027
	U+003B	;	59	Semicolon	0028
	U+003C	<	60	Less-than sign	0029
	U+003D	=	61	Equal sign	0030
	U+003E	>	62	Greater-than sign	0031
	U+003F	?	63	Question mark	0032
	U+0040	@	64	At sign	0033
Latin Alphabet: Uppercase	U+0041	A	65	Latin Capital letter A	0034
	U+0042	B	66	Latin Capital letter B	0035
	U+0043	C	67	Latin Capital letter C	0036
	U+0044	D	68	Latin Capital letter D	0037
	U+0045	E	69	Latin Capital letter E	0038
	U+0046	F	70	Latin Capital letter F	0039
	U+0047	G	71	Latin Capital letter G	0040
	U+0048	H	72	Latin Capital letter H	0041
	U+0049	I	73	Latin Capital letter I	0042
	U+004A	J	74	Latin Capital letter J	0043
	U+004B	K	75	Latin Capital letter K	0044
	U+004C	L	76	Latin Capital letter L	0045
	U+004D	M	77	Latin Capital letter M	0046
	U+004E	N	78	Latin Capital letter N	0047
	U+004F	O	79	Latin Capital letter O	0048
	U+0050	P	80	Latin Capital letter P	0049
	U+0051	Q	81	Latin Capital letter Q	0050
	U+0052	R	82	Latin Capital letter R	0051
	U+0053	S	83	Latin Capital letter S	0052
	U+0054	T	84	Latin Capital letter T	0053
	U+0055	U	85	Latin Capital letter U	0054
	U+0056	V	86	Latin Capital letter V	0055
	U+0057	W	87	Latin Capital letter W	0056
	U+0058	X	88	Latin Capital letter X	0057
	U+0059	Y	89	Latin Capital letter Y	0058
	U+005A	Z	90	Latin Capital letter Z	0059
ASCII Punctuation & Symbols	U+005B	[	91	Left Square Bracket	0060
	U+005C	\	92	Backslash	0061
	U+005D	]	93	Right Square Bracket	0062
	U+005E	^	94	Circumflex accent	0063
	U+005F	_	95	Low line	0064
	U+0060	`	96	Grave accent	0065
Latin Alphabet: Lowercase	U+0061	a	97	Latin Small Letter A	0066
	U+0062	b	98	Latin Small Letter B	0067
	U+0063	c	99	Latin Small Letter C	0068
	U+0064	d	100	Latin Small Letter D	0069
	U+0065	e	101	Latin Small Letter E	0070
	U+0066	f	102	Latin Small Letter F	0071
	U+0067	g	103	Latin Small Letter G	0072
	U+0068	h	104	Latin Small Letter H	0073
	U+0069	i	105	Latin Small Letter I	0074
	U+006A	j	106	Latin Small Letter J	0075
	U+006B	k	107	Latin Small Letter K	0076
	U+006C	l	108	Latin Small Letter L	0077
	U+006D	m	109	Latin Small Letter M	0078
	U+006E	n	110	Latin Small Letter N	0079
	U+006F	o	111	Latin Small Letter O	0080
	U+0070	p	112	Latin Small Letter P	0081
	U+0071	q	113	Latin Small Letter Q	0082
	U+0072	r	114	Latin Small Letter R	0083
	U+0073	s	115	Latin Small Letter S	0084
	U+0074	t	116	Latin Small Letter T	0085
	U+0075	u	117	Latin Small Letter U	0086
	U+0076	v	118	Latin Small Letter V	0087
	U+0077	w	119	Latin Small Letter W	0088
	U+0078	x	120	Latin Small Letter X	0089
	U+0079	y	121	Latin Small Letter Y	0090
	U+007A	z	122	Latin Small Letter Z	0091
ASCII Punctuation & Symbols	U+007B	{	123	Left Curly Bracket	0092
	U+007C	|	124	Vertical bar	0093
	U+007D	}	125	Right Curly Bracket	0094
	U+007E	~	126	Tilde	0095

 

 

출처 : 위키피디아

List of Unicode characters - Wikipedia