[HTML] 내 마음대로 HTML

이 포스트는 HTML에 대해 전반적으로 다루는 내용이 아닙니다. 제가 공부하다 이전에 HTML에서 소홀히 알았던, 또는 새롭게 알게된

내용을 정리하는 포스트 입니다. (많은 내용이 zerocho 님의 내용을 참고하여 만들었습니다. https://www.zerocho.com/)

• HTML은 웹페이지의 구조
• CSS는 웹페이지의 디자인
• JS는 웹페이지의 동작

display (block, inline, inline-block)

block 한줄 - div, p, h1, h2, ...

inline 자기 너비 만큼 - span..

optGroup

meter, progress

video

웹에서 영상을 재생하기 위해 제공 되는 태그로 poster(영상이 로딩되기 까지 보여줄 이미지), controls(재생 시작, 중지등), loop(반복여부), muted(음소거), track(자막) 등을 설정할 수 있다.  audio는 video와 거의 유사하기 때문에 생략

iframe

주로 다른(로컬이 아닌 외부) html을 불러올 때 사용, youtube에서도 자사 동영상을 로딩할 때 video태그가 아닌 iframe태그를 이용할 것을 권장

embed, object

외부 자원을 불러올 때 사용(pdf, svg) 전에는 flash나 activeX를 불러올 때 사용 - 이 극혐요소들은 요즘 사용하지 않음

HTML 문자 엔티티

HTML에서 스페이스를 여러번 입력해도 입력한 스페이스만큼 공간이 표현되지 않을때가 있습니다. 예를들어

<span>kkk</span>

<span>123</span>

<span>두둡</span>

은 페이지 kkk123두둡으로 표현이 됩니다. 그 이유는 HTML에서 입력된 스페이스나 줄바꿈 문자가 브라우저에서 표현되는 것은

조금 다르기 때문입니다.

&nbsp;나 &lt; 또는 &gt;를 보신적 있으실 껍니다. 이건 파일이 깨져서 나오는 문자가 아니고 바로 HTML 엔티티 입니다.

만약, <span>꼬깔콘</span> 에 현재 값은 꼬깔콘 이지만 꼬<깔>콘 이라고 바꾸고 싶다면??

<span>꼬<깔>콘</span> 하면 브라우저에서 표현을 못할 수 있습니다.

(많은 브라우저들이 표현을 못했지만, 현재 똑똑한 브라우저들은 표현을 해줍니다.)

<는 &lt;로, >는 &gt;로 변경이 됩니다. 이렇게 특정 문자가 변경되는 것을 escape(한다)라고 합니다.

대표적인 Eascpe 문자 표

Result	Description	Entity Name	Entity Number
	non-breaking space	 	 
<	less than	&lt;	&#60;
>	greater than	&gt;	&#62;
&	ampersand	&amp;	&#38;
"	double quotation mark	&quot;	&#34;
'	single quotation mark (apostrophe)	&apos;	&#39;
¢	cent	&cent;	&#162;
£	pound	&pound;	&#163;
¥	yen	&yen;	&#165;
€	euro	&euro;	&#8364;
©	copyright	&copy;	&#169;
®	registered trademark	&reg;	&#174;

w3schools.com

또, 엔티티 벨류가 별도로 존재하는데요, 브라우저에서 이 값을 확인하여 문자를 판별할 수 있습니다.

        

charCodeAt, fromCharCode 함수를 통해 문자를 확인하여 필요에 따라 Escape하면 되는 거죠!.