[HTML] 내 마음대로 HTML

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

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

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

	<b>굵은 글씨</b><br />
	<strong>굵고 중요한 글씨</strong><br />
	<i>기울어진 글씨</i><br />
	<em>기울어지고 중요한 글씨</em><br />
	<q>짧은 인용문</q><br />
	<blockquote>인용문</blockquote><br />
	<small>조금 작은 글씨</small>
	<mark>하이라이트</mark>
	<del>삭제된 글씨</del>
	<ins>밑줄 글씨</ins>
	<sub>아래첨자</sub>
	<sup>위첨자</sup><br />
	<address>연락처</address><br />
	<cite>작품 제목</cite><br />
	<abbr title="JavaScript">JS</abbr> <!-- 약어를 표현합니다. 태그 위에 마우스를 올리면 title 속성의 설명이 뜹니다. -->
	<pre>
	var <var>hello</var> = "world";
	var <var>html</var> = "wonderful";
	<pre> <!-- code 태그는 컴퓨터 코드를 표현합니다. pre 태그는 공백을 그대로 표현합니다. var 태그는 변수를 표현합니다 -->
	<kbd>인풋</kbd>
	<samp>아웃풋</samp>

view raw html hosted with ❤ by GitHub

display (block, inline, inline-block)

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

inline 자기 너비 만큼 - span..

	<form action="/api/join" method="post">
	<label>아이디<input type="text" placeholder="아이디 입력" id="userid" name="userid" /></label><br />
	<label>비밀번호<input type="password" id="password" name="password" /></label><br />
	<label>이메일<input type="email" id="email" name="email" /></label><br />
	<label>성별
	<input type="radio" name="gender" value="m" />남
	<input type="radio" name="gender" value="f" />여
	</label><br />
	<label>포지션
	<input type="radio" name="position" value="m" />사원
	<input type="radio" name="position" value="f" />대리
	</label><br />
	<label>구독<input type="checkbox" name="subs" /><br />
	<label>지역
	<select name="area">
	<option value="seoul">서울</option>
	<option value="gyeonggi">경기</option>
	<option value="jeolla">전라</option>
	<option value="gyeongsang">경상</option>
	</select>
	</label><br />
	<label>하고싶은 말<textarea placeholder="입력하세요" name="textarea"></textarea><br />
	</label>
	<button type="submit">제출</button>
	<button type="reset">취소</button>
	</form>

view raw html hosted with ❤ by GitHub

optGroup

	<select name="car">
	<optgroup label="oversea">
	<option value="TESLA">TESLA</option>
	<option value="BMW">BMW</option>
	<option value="Ford">Ford</option>
	<option value="GM">GM</option>
	</optgroup>
	<optgroup label="korea">
	<option value="KIA">HTML</option>
	<option value="현대">CSS</option>
	<option value="대우">대우</option>
	</optgroup>
	</select>

view raw html hosted with ❤ by GitHub

meter, progress

	<meter value="2" min="0" max="10">2/10</meter>
	<progress value="15" max="100"></progress>

view raw html hosted with ❤ by GitHub

video

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

	<!-- 하나의 비디오 동영상 자막도 입힐 수 있고, 자막은 여러개 등록하여 언어에 맞게 설정도 한다.-->
	<video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay controls loop>
	<track kind="subtitles" src="자막이름.확장자" srclang="ko" label="한글자막" />
	비디오를 지원하지 않는 경우 표시할 내용
	</video>
	<!-- 브라우저마다 지원 가능한 영상 포맷이 다르기 때문에 여러개 등록하여 위부터 재생 불가능하면 다음 소스로 재생한다. -->
	<video width="320" height="240" controls>
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.ogg" type="video/ogg">
	Your browser does not support the video tag.
	</video>

view raw html hosted with ❤ by GitHub

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하면 되는 거죠!.