[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에서 입력된 스페이스나 줄바꿈 문자가 브라우저에서 표현되는 것은
조금 다르기 때문입니다.
나 < 또는 >를 보신적 있으실 껍니다. 이건 파일이 깨져서 나오는 문자가 아니고 바로 HTML 엔티티 입니다.
만약, <span>꼬깔콘</span> 에 현재 값은 꼬깔콘 이지만 꼬<깔>콘 이라고 바꾸고 싶다면??
<span>꼬<깔>콘</span> 하면 브라우저에서 표현을 못할 수 있습니다.
(많은 브라우저들이 표현을 못했지만, 현재 똑똑한 브라우저들은 표현을 해줍니다.)
<는 <로, >는 >로 변경이 됩니다. 이렇게 특정 문자가 변경되는 것을 escape(한다)라고 합니다.
대표적인 Eascpe 문자 표
| Result | Description | Entity Name | Entity Number |
|---|---|---|---|
| non-breaking space | |   | |
| < | less than | < | < |
| > | greater than | > | > |
| & | ampersand | & | & |
| " | double quotation mark | " | " |
| ' | single quotation mark (apostrophe) | ' | ' |
| ¢ | cent | ¢ | ¢ |
| £ | pound | £ | £ |
| ¥ | yen | ¥ | ¥ |
| € | euro | € | € |
| © | copyright | © | © |
| ® | registered trademark | ® | ® |
w3schools.com
또, 엔티티 벨류가 별도로 존재하는데요, 브라우저에서 이 값을 확인하여 문자를 판별할 수 있습니다.
charCodeAt, fromCharCode 함수를 통해 문자를 확인하여 필요에 따라 Escape하면 되는 거죠!.