웹 문서에 있는 &nbsp는 무엇일까, 어떤 특수문자들이 있을까?

 가 뭐예요 ?

한 지인이 전화를 걸어 와 문의 한다. 인터넷을 이용하다보면 가끔씩  라는 것이 보이는데 도대체 이것이 무엇인지 모르겠다고 한다.

물론  가 무엇인지 모르더라도 인터넷 이용에 문제는 없다. 그러나 엑셀로 데이터 작업 할 때도 중간에  가 끼어 있다면 이 것을 함수 등을 이용해 제거해야 하기에 그리 반가운 기호는 아니다.

또한 &nbsp의 구성을 보면 앞에 특수문자가 붙어 있으니 이것이 무엇인가 예외적이거나 특별한 것을 처리하기 위함 임을 쉽게 짐작해 볼 수 있다.

그런데 특수 문자는  만이 아니다. 총 101개의 특수 문자가 존재한다. 이에 HTML에서 이용되는 특수 문자 기호에 대해 알아 보고자 한다.

웹의 특수 문자 기호에 대한 궁금증, Source: Clip art

 는 웹페이지에서 공백(Space)을 표시하기 위해 사용되는 특수 문자

nbsp는 Non-breaking Space의 약어이다. 공백(Space)을 나타내 주는 것이라 이해하면 쉽다. 이 기호를 일반적인 문자 조합과 구분하기 위해 앞에는 &, 뒤에 ;을 넣어  라 표기한다.

그렇다면 왜 굳이 공백 문자를 웹 페이지의 특수 문자(HTML Special character code)로 만들어 따로 둬야 할까 ? 우리가 HTML 웹 페이지를 만들면 화일 내에 수 많은 공백이 존재한다. 웹 브라우저나 스크립트 엔진 등이 이를 처리하기 위해서는 중간에 여러 개의 공백이 있는 경우 1개만 남겨 두고 모두 제거한다.

따라서 웹 페이지에 여러 개의 공백을 넣어야 한다면  를 반복 입력하면 된다. 특수 문자의 운영 필요성에 대한 이유이다.

그런데 웹 페이지의 내용을 엑셀로 불러 들여 작업하는 경우도 있다. 이 때 웹 페이지에  가 들어 있다면 코드 그 자체로 엑셀에서 표시된다. 엑셀이 공백 표시를 위해  를 이용하지 않기 때문이다. 따라서 엑셀에서 함수를 이용해 데이터 중간에 들어 있는  를 제거해야 하는 경우도 발생된다.

< &gt눈 무엇일까 ? 왜 특수 문자를 만들었을까 ?

<는 "Less than sign", >는 "Greater than sign"을 의미한다. 우리말로는 각각 작다(<)와 크다(>)를 나타내는 기호이다.

그런데 웹 페이지에서는 HTML의 코드 자체를 구분하기 위해 등호 기호를 앞과 뒤에 붙인다. 예를 들어 <body>라 표현하면 HTML의 본문 시작을 알리는 기호이다. 이처럼 등호 기호가 웹 페이지에서 HTML 코드를 나타내주는 특수한 목적으로 이용 되기에 이에 대한 별도의 특수 기호가 필요한 것이다.

따라서 웹 페이지에서 "<"와 ">"를 표시 하려면 각각 < 와 >를 입력하면 된다.

& "도 많이 이용된다.

지금까지의 웹 페이지 특수 문자는 모두 앞에 &이 들어 있다. 따라서 웹 페이지에서 "&"을 보여 주려면 이 역시 특수 문자가 필요하다. 따라사 웹 페이지 내에 &라 입력하면 "&"가 나타난다. &가 영어로 Ampersand이니 약어로 &라 표기한다.

"는 쌍 따옴표를 표시하기 위햔 것이다. 이는 쌍 따옴표가 웹 브라우저 또는 자바 스크립트(JavaScript) 엔진 등에서 URL 표시 등을 위해 특별하게 이용되기 때문에 만들어졌다.

따라서 문자열 중간에 쌍 따옴표가 필요하다면 단순히 "라 입력하면 된다. Quot는 Quotes의 약어이다.

이외에도 특수 문자는 많이 존재한다. 필요시 이를 찾아 활용하자 !

아래의 표는 HTML에서 이용되는 특수 문자 및 그에 대한 명칭, 이를 나타내주는 ASCII의 10진수, 16진수를 보여 준다. 총 101개의 특수 문자 코드가 존재한다.

만약 웹 페이지에서 국가별 통화 기호 등의 특수 문자를 입력해야 한다면 하기 표가 유용할 것이다.

특수문자 코드	심벌	전체 명칭	ASCII 10진수	ASCII 16진수
"	"	double quotes	34	22
&	&	ampersand	38	26
<	<	less than sign	60	3C
>	>	greater than sign	62	3E
		non-breaking space	160	A0
¡	¡	inverted exclamation mark	161	A1
¢	¢	cent sign	162	A2
£	£	pound sign	163	A3
¤	¤	currency sign	164	A4
¥	¥	yen sign	165	A5
¦	¦	broken vertical bar	166	A6
§	§	section sign	167	A7
¨	¨	spacing diaeresis - umlaut	168	A8
©	©	copyright sign	169	A9
ª	ª	feminine ordinal indicator	170	AA
«	«	left double angle quotes	171	AB
¬	¬	not sign	172	AC
		soft hyphen	173	AD
®	®	registered trade mark sign	174	AE
¯	¯	spacing macron - overline	175	AF
°	°	degree sign	176	B0
±	±	plus-or-minus sign	177	B1
²	²	superscript two - squared	178	B2
³	³	superscript three - cubed	179	B3
´	´	acute accent - spacing acute	180	B4
µ	µ	micro sign	181	B5
¶	¶	pilcrow sign - paragraph sign	182	B6
·	·	middle dot - Georgian comma	183	B7
¸	¸	spacing cedilla	184	B8
¹	¹	superscript one	185	B9
º	º	masculine ordinal indicator	186	BA
»	»	right double angle quotes	187	BB
¼	¼	fraction one quarter	188	BC
½	½	fraction one half	189	BD
¾	¾	fraction three quarters	190	BE
¿	¿	inverted question mark	191	BF
À	À	latin capital letter A with grave	192	C0
Á	Á	latin capital letter A with acute	193	C1
Â	Â	latin capital letter A with circumflex	194	C2
Ã	Ã	latin capital letter A with tilde	195	C3
Ä	Ä	latin capital letter A with diaeresis	196	C4
Å	Å	latin capital letter A with ring above	197	C5
Æ	Æ	latin capital letter AE	198	C6
Ç	Ç	latin capital letter C with cedilla	199	C7
È	È	latin capital letter E with grave	200	C8
É	É	latin capital letter E with acute	201	C9
Ê	Ê	latin capital letter E with circumflex	202	CA
Ë	Ë	latin capital letter E with diaeresis	203	CB
Ì	Ì	latin capital letter I with grave	204	CC
Í	Í	latin capital letter I with acute	205	CD
Î	Î	latin capital letter I with circumflex	206	CE
Ï	Ï	latin capital letter I with diaeresis	207	CF
Ð	Ð	latin capital letter ETH	208	D0
Ñ	Ñ	latin capital letter N with tilde	209	D1
Ò	Ò	latin capital letter O with grave	210	D2
Ó	Ó	latin capital letter O with acute	211	D3
Ô	Ô	latin capital letter O with circumflex	212	D4
Õ	Õ	latin capital letter O with tilde	213	D5
Ö	Ö	latin capital letter O with diaeresis	214	D6
×	×	multiplication sign	215	D7
Ø	Ø	latin capital letter O with slash	216	D8
Ù	Ù	latin capital letter U with grave	217	D9
Ú	Ú	latin capital letter U with acute	218	DA
Û	Û	latin capital letter U with circumflex	219	DB
Ü	Ü	latin capital letter U with diaeresis	220	DC
Ý	Ý	latin capital letter Y with acute	221	DD
Þ	Þ	latin capital letter THORN	222	DE
ß	ß	latin small letter sharp s - ess-zed	223	DF
à	à	latin small letter a with grave	224	E0
á	á	latin small letter a with acute	225	E1
â	â	latin small letter a with circumflex	226	E2
ã	ã	latin small letter a with tilde	227	E3
ä	ä	latin small letter a with diaeresis	228	E4
å	å	latin small letter a with ring above	229	E5
æ	æ	latin small letter ae	230	E6
ç	ç	latin small letter c with cedilla	231	E7
è	è	latin small letter e with grave	232	E8
é	é	latin small letter e with acute	233	E9
ê	ê	latin small letter e with circumflex	234	EA
ë	ë	latin small letter e with diaeresis	235	EB
ì	ì	latin small letter i with grave	236	EC
í	í	latin small letter i with acute	237	ED
î	î	latin small letter i with circumflex	238	EE
ï	ï	latin small letter i with diaeresis	239	EF
ð	ð	latin small letter eth	240	F0
ñ	ñ	latin small letter n with tilde	241	F1
ò	ò	latin small letter o with grave	242	F2
ó	ó	latin small letter o with acute	243	F3
ô	ô	latin small letter o with circumflex	244	F4
õ	õ	latin small letter o with tilde	245	F5
ö	ö	latin small letter o with diaeresis	246	F6
÷	÷	division sign	247	F7
ø	ø	latin small letter o with slash	248	F8
ù	ù	latin small letter u with grave	249	F9
ú	ú	latin small letter u with acute	250	FA
û	û	latin small letter u with circumflex	251	FB
ü	ü	latin small letter u with diaeresis	252	FC
ý	ý	latin small letter y with acute	253	FD
þ	þ	latin small letter thorn	254	FE
ÿ	ÿ	latin small letter y with diaeresis	255	FF
€	€	euro sign	8364	20AC

HTML 웹 페이지에서 사용되는 특수 문자 코드 ! 그리 어려운 것이 아니다. 또한 이러한 코드가 존재할 수 밖에 없는 이유를 이해해 두면 좋다. 괜히 어렵게 하려는 것이 아니라 해당 기호들이 이미 특수하게 이용되고 있기에 어쩔 수 없는 선택이다.

또한 특수 기호의 경우 영문 약어로 되어 있기에 조금만 노력하면 쉽게 암기할 수 있다. 영어 단어의 축약형이기 때문이다.

웹 페이지를 만들 때 특수 기호나 문자를 표시해야 하는 경우가 종종 발생 되기에 위의 특수 문자 코드가 유용할 것이다. 위의 표를 참조 하여 멋지고 효과적인 웹 페이지가 디자인 될 수 있기를 기대 해 본다.

저작자표시 비영리 변경금지 (새창열림)

'IT 동향' 카테고리의 다른 글

스마트폰 교체 시 꼭 챙겨야만 하는 사항들 (8)	2014.06.29
브라질 월드컵 경기 어떻게 한국까지 중계될까 ? (8)	2014.06.22
월드컵 비디오 판독시스템은 어떻게 골 여부 판단할까? (12)	2014.06.16
월드컵 열리는 브라질 과연 어떤 나라일까? (6)	2014.06.14
애플 앱스토어에서 페북 앱을 없앨수 있을까? (8)	2014.06.12

SenseChef

웹 문서에 있는 &nbsp는 무엇일까, 어떤 특수문자들이 있을까?

'IT 동향' 카테고리의 다른 글

티스토리툴바

웹 문서에 있는 &nbsp는 무엇일까, 어떤 특수문자들이 있을까?

'IT 동향' 카테고리의 다른 글

관련글

티스토리툴바