HTML5 태그

HTML5에는 30여 개의 새로운 태그가 추가되었고 CSS로 대체 가능하거나 문제가 되는 태그는 더 이상 지원하지 않는다
<font><center>등 (그러나 HTML5에서 완전히 사라진 태그도 웹 브라우저에서 실행은 가능하다.)
웹 페이지 구성을 위해 레이아웃으로 사용했던 <table>로 더 이상 표현하지 않는다

💗 텍스트 처리 태그

⭐ 주석 태그

주석 처리안에 작성한 내용은 없는 것으로 인식

<!-- 설명할 내용 -->

⭐ 제목 태그

<h>태그는 Heading의 약자로서 Bold로 표현하며 문장의 제목으로 사용한다. 자동 줄바꿈 기능을 포함 하고 있다.

<h1> … </h1>

window
linux
solaris
mac

태그	설명
<strong>	굵게 표시
<em>	기울임 표시
<ins>	밑줄 표시
<del>	~~취소선 표시~~
<small>	작은 글씨로 표시
<mark>	형광펜 표시
<sub>	_{아래 첨자로 명시됨}
<sup>	^{위 첨자로 명시됨}

엔티티 이름	화면출력	설명
		Non-breaking space
&It;	<	Less than
>	>	Greater than
&	&	Ampersand
"	"	Quotation mark
&copy	©	Copyright

	<ol type="1 \| A \| a \| I \| i" start="적용할 시작번호" reversed="reversed">
	<li>항목</li>
	</ol>

태그명	설명
<table>	표는 데이터를 일목요연하게 표현하기 위한 방법
<tr>	Table Row의 약자로 표에서 행 구분.
<th>	Table Header의 약자로 표 내부의 제목(column)을 명시하고자 할 때 사용
<td>	Table Data의 약자로 표에서 열을 구분
<caption>	표의 상단/하단에 제목을 적을 때 사용
<thead>	테이블 구조 설정 시 제목 부분
<tbody>	테이블 구조 설정 시 본문
<tfoot>	테이블 구조 설정 시 바닥글

테이블 표 통합 태그	설명
<td colspan="통합할 갯수">	테이블 데이터<td> column을 병합
<td rowspan="통합할 갯수">	테이블 데이터<td> row를 병합

이름	주소	전화
홍길동	서울특별시 강남구 역삼동	010-1234-0987
김민철	부산광역시 동구 범일1동	010-5678-4310

	<table border="1"> //border="1"을 안주면 선이 안나타난다
	<caption>주소록</caption>
	<tr>
	<th>이름</th>
	<th>주소</th>
	<th>전화</th>
	</tr>
	<tr>
	<td>홍길동</td>
	<td>서울특별시 강남구 역삼동</td>
	<td>010-1234-0987</td>
	</tr>
	<tr>
	<td>김민철</td>
	<td>부산광역시 동구 범일1동</td>
	<td>010-5678-4310</td>
	</tr>
	</table>

	<table border="1">
	<tr>
	<td colspan="4">지상파 방송국</td>
	</tr>
	<tr>
	<td rowspan="2">채널</td>
	<td>MBC</td>
	<td>KBS</td>
	<td>SBS</td>
	</tr>
	<tr>
	<td>11</td>
	<td>9</td>
	<td>5</td>
	</tr>
	</table>

속성명	<form action="..." method="..." enctype="..." name="...">
action="url"	form의 내용을 처리하기 위해 서버쪽 URL을 지정한다.
method="get/post"	클라이언트의 데이터를 서버로 보내기 위한 방법을 설정한다. get(기본값)은 서버로 데이터를 전송할 때 길이의 제한이 있다. 또한 주소 표시줄에 전송값을 그대로 노출하게 된다. post는 대용량이거나 보안이 필요한 데이터를 서버로 전송할 때 적합하다.
enctype=""	application/x-www-form-urlencoded는 key=value의 Map 형태로 표현한다. 예를 들어 name=kim&age=20&phone=01023569873로 전송한다. Multipart/form-data 는 첨부파일을 전송할 때 사용한다.
target="윈도우명"	form에서 입력 데이터의 처리된 결과를 표시할 윈도우이다.
name=""	form을 식별하기 위해 이름을 지정한다.

속성명	설명
type="입력 타입"	⦁ <input> 요소가 나타낼 타입을 명시 type="text, password, checkbox, radio, submit, reset, button, image, hidden, file" 등
name="이름"	서버에 전송될 양식의 이름
value="기본입력값"	⦁ <input> 요소의 초깃값(value)을 명시한다. ✦ <input> 요소의 type 속성값이 “file”인 경우에는 value 속성을 사용할 수 없다 ✦ value 속성은 <input> 요소의 type 속성값에 따라 다른 용도로 사용된다. - “button”, “reset”, “submit” : 버튼 내의 텍스트를 정의함. - “hidden”, “password”, “text” : 입력 필드의 초깃값을 정의함. - “checkbox”, “image”, “radio” : 해당 입력 필드를 선택 시 서버로 제출되는 값을 정의함.
size="입력 문자수"	✦ type="email, password, search, tel, text, url"에서 동작 입력필드의 길이 명시
maxlength="입력 최대 문자수"	실제 입력할 수 있는 최대 문자수 명시
src="URL"	✦ type="image"면 반드시 명시 제출 버튼(submit button)으로 사용될 이미지의 URL을 명시
checked="checked"	✦ type="radio"와 type="checkbox"에서 사용 체크박스와 라디오 버튼일 경우 기본 선택 값 설정
readonly="readonly"	읽기 전용 속성
accept="파일 확장자"	✦ type="file"에서만 사용 accept="audio, video, image/*" 이런식으로 파일 확장자를 표시
alt="텍스트"	✦ type="image"에서만 사용 이미지를 보여줄 수 없을 때 대신 보여줄 대체 텍스트를 명시
placeholder="텍스트"	✦ type="email, password, search, tel, text, url"에서 동작 입력할 내용을 흐린 색의 hint로 보여준다. 값을 입력하면 사라진다
autocomplete="on \| off"	✦ type="color, datepickers, email, password, range, search, tel, text"에서 동작 <input> 요소에서 자동 완성 기능을 명시한다. 속성값을 on으로 명시하면, 브라우저는 사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과 비슷한 값들을 드롭다운 옵션으로 보여준다.
autofocus (boolean 속성)	페이지가 로드될 때 자동으로 포커스(focus)가 <input> 요소로 이동됨을 명시 boolean 속성은 해당 속성을 명시하지 않으면 > 속성값이 자동으로 false 값을 가짐 boolean 속성은 해당 속성을 명시하면 > 자동으로 true 값을 가짐
min / max	✦ type="number, range, date, datetime, datetime-local, month, time, week"에 적용 input 요소의 최소값/최대값을 지정한다
multiple (불리언(boolean) 속성)	✦type="email, file" <input> 요소에 사용자가 둘 이상의 값을 입력할 수 있음을 명시 type 속성값이 “email”인 경우 이메일 사이에 콤마(,)를 추가하여 여러 이메일 주소를 동시에 입력할 수 있다. type 속성값이 “file”인 경우 CTRL이나 SHIFT키를 사용하여 여러 파일을 동시에 선택할 수 있다.
pattern="정규 표현식"	✦type="date, email, password, search, tel, text, url" 폼 제출 시 <input> 요소의 값을 검사할 때 사용될 정규 표현식을 명시한다. 이때 전역 속성인 title 속성을 사용하여 정규 표현식에 간단한 설명을 추가함으로써 사용자가 정확한 값을 입력할 수 있도록 도움을 줄 수 있다.

	<ul>
	<li>항목</li>
	</ul>

	<dl>
	<dt>정의할 용어</dt>
	<dd>용어 설명</dd>
	</dl>

지상파 방송국
채널	MBC	KBS	SBS
채널	11	9	5

✨ input type=	"text"	텍스트 입력 양식
✨ input type=	"password"	비밀번호 입력 양식

	<form>
	<table>
	<tr>
	<td>ID</td>
	<td><input type="text" name="id" size="20" maxlength="12" placeholder="write id"/></td>
	</tr>
	<tr>
	<td>PASSWORD</td>
	<td><input type="password" name="pwd" size="20" maxlength="12"/></td>
	</tr>
	<tr>
	<td>NAME</td>
	<td><input type="text" name="name" size="20" maxlength="5"/></td>
	</tr>
	</table>
	</form>

✨ input type=	"radio"	라디오 버튼
✨ input type=	"checkbox"	체크박스

✨ input type=	"button"	이벤트를 처리할 버튼
	"submit"	form에서 지정한 페이지로 이동
	"reset"	모든 입력양식 초기화

✨ textarea	row="n"	여러 행의 텍스트 입력 양식 cols는 열개수, rows는 행수
	cols="n"

✨ <select>	선택 양식
✨ <optgroup>	옵션의 그룹화
✨ <option>	옵션 추가

✨ <fieldset>	입력 양식 그룹 지정
✨ <legend>	입력 양식 그룹 이름

	<form>
	<table>
	<fieldset>
	<legend>통합 Search</legend>
	<label for="book_name">도서명 :</label>
	<input type="text" name="book_search" size="50" id="book_name" />
	<button type="submit">검색</button>
	<button type="result">초기화</button><br />

	<label>검색범위 :</label>
	<input type="radio" name="s_type" value="keyword" id="keyword" />

	<label>자료유형 :</label>
	<input type="radio" name="s_type" value="keyword" id="keyword" />
	</fieldset>
	</table>
	</form>

✨ color	색상표
✨ number	스핀박스를 이용해서 숫자 를 입력 min(최소값), max(최대값), step(간격), value(값)
✨ range	슬라이드 막대로 숫자 선택 min(최소값), max(최대값), step(간격), value(값)

	<form>
	<table>
	<colgroup>
	<col width="34%">
	<col width="33%">
	<col width="33%">
	</colgroup>
	<tr>
	<td>표지색상 </td>
	<td>제작권수 </td>
	<td>표지두께 </td>
	</tr><tr>
	<td><input type="color" /> </td>
	<td><input type="number" min="0" max="100" step="10" value="20"/> </td>
	<td><input type="range" min="1" max="5" value="3" />mm </td>
	</tr>
	</table>
	</form>

✨ data	달력에서 날짜 선택
✨ month
✨ week

Study room

Menu

Category

Notice

Recent comments

Links

HTML5 태그

💗 텍스트 처리 태그

💗 문자 모양 태그

💗 특수문자 표기법

💗 공간 분할 태그

💗 목록 태그

💗 하이퍼링크 태그

💗 테이블 태그

💗 입력양식 태그

💗 프레임태그

💗 이미지 태그

💗 음악태그 <audio>

💗 동영상태그 <vedio>

유튜브 동영상 문서내 포함하고자 할때

'Web > html5' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

✨ time	스핀박스에서 시간 선택
✨ datetime-local	스핀박스에서 현지 시간 선택

	<iframe src="exam_01.html" width="560">
	<p>이 브라우저는 iframe을 지원하지 않습니다</p>
	</iframe>

	<h3>클릭하면 문서들이 나온다</h3>
	<p>
	<iframe width="560" height="315" name="site"></iframe>
	</p>
	<ul>
	<li><a href="exam_01.html" target="site">div tag</a></li>
	<li><a href="exam_01-2.html" target="site">list</a></li>
	<li><a href="exam.html" target="site">site</a></li>
	</ul>

GIF(Graphic Interchange Format)	JPEG, PNG에 비하여 파일 크기가 작다. 표현 가능 색상이 256개이므로 자연스러운 장면에는 부적합 해서 사진보다는 클립아트나 드로잉 같은 종류의 이미지에 적합하다.
JPEG(Joint Photographic Experts Group)	24비트의 컬러를 사용하므로 수백만 개의 색상을 표현한다. 복잡한 그림이나 사진 등 색상을 많이 사 용하는 이미지에 적합하다.
PNG(Portable Network Graphic)	GIF와 JPEG 형식의 장점과 비압축 형식인 BMP 형식의 장점을 가지고 있다. 24비트 (또는 32비트) 컬 러를 사용한다.

태그	설명
<figure>	그림, 사진, 다이어그램과 텍스트의 콘텐츠를 함께 묶어서 어떤 요소들을 그룹 지을 때 사용한다.
<figcaption>	<figure> 요소를 위한 제목을 표현한다.

종류	설명
*mp3 (.mp3)**	음악 다운로드 및 저장에 가장 인기있는 형식(mpeg-1 오디오 규격)
*wave (.wav, .wave)*	마이크로소프트오 IBM이 개발한 비압축 방식의 표준 오디오 파일
*ogg (.ogg, .ogv)*	공개 소스 기반의 다양한 코덱을 지원하는 오디오 파일

종류	설명
*mpeg4 (.mp4, .m4v)*	mpeg-4는 영상, 음성을 디지털 데이터로 전송하기 위한 비디오 파일 형식. 일반적으로 웹에서 비디오 파일을 공유할 때 사용한다.
*webm (.webm)**	구글이 HTML5의 동영상에 사용하기 위해서 개발하였고, video 태그 를 사용하여 웹에서 재생할 수 있다.
avi	윈도우가 지원하는 동영상 파일 형식. 화질은 좋지만 실시간 웹 영상 에 적합하지 않다.

	<audio controls autoplay src="재생할 사운드 파일 이름" />

	<audio controls autoplay>
	<source src="재생할 사운드 파일 이름(mp3)" type="audio/mp3">
	브라우저에서 <audio> 요소, 혹은 mp3/ogg/wav 를 지원하지 않습니다.
	</audio>

속성명	설명
src	오디오 파일의 경로를 지정한다.
controls="controls"	오디오 컨트롤을 표시할지 여부를 지정한다.
autoplay"autoplay"	파일이 로드시 자동으로 재생시킨다는 의미이다.
loop	사운드를 반복 재생하도록 설정한다.
type	오디오 파일의 MIME형식을 지정한다. (audio/mp3, audio/ogg, audio/wav)

	<audio controls="controls">
	<source src="audio/ladymov.mp3" type="audio/mp3">
	<source src="audio/ladymov.ogg" type="audio/ogg">
	</audio>