| 1. 텍스트 처리 태그 주석 태그 / 제목 태그 / 줄바꾸기 태그 / 입력한 모양대로 출력하는 태그 2. 문자 모양 태그 3. 특수 문자 표기법 4. 공간분할 태그 단락 태그 / 블록 형식의 공간 분할태그 / 인라인 형식의 공간 분할태그 / 선그리기 태그 5. 목록 태그 비순차적 목록 / 순차적 목록 6. 하이퍼 링크 태그 7. 테이블 태그 8. 입력양식 태그 form 태그 / 태그 속성 / input 태그 속성 / form 태그의 하위 태그 9. 프레임 태그 10. 이미지 태그 11. 멀티 미디어 태그 음악 태그<audio> / 비디오 태그<vedio> |
더보기
| HTML5에는 30여 개의 새로운 태그가 추가되었고 CSS로 대체 가능하거나 문제가 되는 태그는 더 이상 지원하지 않는다 <font><center>등 (그러나 HTML5에서 완전히 사라진 태그도 웹 브라우저에서 실행은 가능하다.) 웹 페이지 구성을 위해 레이아웃으로 사용했던 <table>로 더 이상 표현하지 않는다 |
💗 텍스트 처리 태그
⭐ 주석 태그
주석 처리안에 작성한 내용은 없는 것으로 인식
<!-- 설명할 내용 -->
⭐ 제목 태그
<h>태그는 Heading의 약자로서 Bold로 표현하며 문장의 제목으로 사용한다. 자동 줄바꿈 기능을 포함 하고 있다.
<h1> … </h1>
⭐ 줄바꾸기 태그
태그는 Line break의 약자이며 HTML문서의 어느 곳에서든 강제로 줄바꿈을 할 수 있다. 줄 바꾸 기 태그는 종료가 없다.
<br/>
⭐ 공백 문자
⭐ 입력한 모양대로 출력하는 태그
Preformatted text의 약자로서 공백, 탭, 줄바꿈, 뛰어쓰기, ASCII 문자 등을 그대로 표현할 수 있다. Courier, 굴림체, 바탕체 모든 문자의 폭이 동일한 고정 폭 글꼴을 사용해야 웹 페이지에서도 같은 표현을 할 수 있다.
<pre> … </pre>
💗 문자 모양 태그
| 태그 | 설명 |
| <strong> | 굵게 표시 |
| <em> | 기울임 표시 |
| <ins> | 밑줄 표시 |
| <del> | |
| <small> | 작은 글씨로 표시 |
| <mark> | 형광펜 표시 |
| <sub> | 아래 첨자로 명시됨 |
| <sup> | 위 첨자로 명시됨 |
💗 특수문자 표기법
HTML 문서상에서 직접 쓸 수 없는 특수기호를 표현하기 위해 사용하는 표기법이다.
| 엔티티 이름 | 화면출력 | 설명 |
| | Non-breaking space | |
| &It; | < | Less than |
| > | > | Greater than |
| & | & | Ampersand |
| " | " | Quotation mark |
| © | © | Copyright |
💗 공간 분할 태그
⭐ 단락태그
<p> 태그는 Paragraphs의 약자로 텍스트를 단락(문단)으로 정의할 때 사용한다.
<p> = <br><br> /<p>태그는 <br><br>태그를 2번 입력한 효과를 나타낸다. 대신 연속으로 사용해도 한번으로 인식한다.
<p> … </p>
⭐ 블록 형식의 공간 분할태그
div> 태그는 박스 형태로 블록 영역으로 공간을 분할하는 단락 정렬 태그이다. 블록 요소는 요소 앞뒤 로 줄바꿈이 일어나며 주로 레이아웃에 사용한다.
<div> … </div>
⭐ 인라인 형식의 공간 분할태그
<span>태그는 CSS와 함께 문자를 꾸며줄 때 사용한다.
<div>태그와 차이점은 블록(block)이 아닌 인라인(inline)형식으로 공간을 분할한다.(줄바꿈을 안한다는 뜻)
<span> … </span>
⭐ 선그리기 태그
<hr/>태그는 Horizontal Rule의 약자로 텍스트 사이에 선을 긋지만 세로 선은 그을 수 없다. 자동 줄 바꿈 기능이 있다.
<hr />
⭐ 단락 인용(Block Quotation)
다른 글의 내용을 단락 단위로 인용하여 포함시킬 때 들여쓰기로 구분하여 표시한다.
<blockquote>…</blockquote>
💗 목록 태그
⭐ 비순차적 목록
<ul> 태그는 Unordered List의 약자이다. 세부 리스트 항목은 <li>를 사용한다.
|
<ul>
<li>항목</li>
</ul>
⭐ 순차적 목록
<ol> 태그는 Ordered List의 약자이다. 세부 리스트 항목은 <li>를 사용한다.
|
<ol type="1 | A | a | I | i" start="적용할 시작번호" reversed="reversed">
<li>항목</li>
</ol>
⭐ 정의 목록
<dl> 태그는 Definition List의 약자이다. dt(Definition Term), dd(Definition Description)와 함께 사용한다. 특정 용어와 용어를 설명하는 태그이다.
<dl>
<dt>정의할 용어</dt>
<dd>용어 설명</dd>
</dl>
<list>태그 예시
더보기
- HTML
- HyperText Markup Language의 약어로 웹페이지를 만들기 위한 언어 로 웹브라우저 위에서 동작하는 언어이다.
- CSS
- Cascading Style Sheets의 약어로 HTML이 정보를 표현한다면 CSS는 HTML을 시각적으로 꾸며주는 역할을 한다.
💗 하이퍼링크 태그
<a> 태그는 Anchor의 약자로 텍스트나 이미지 콘텐츠에 링크를 걸어서 다른 페이지로 이동하는 하이퍼 링크이다.
<a href="이동할 페이지의 파일명 또는 링크할 URL" target="눈에 보이는 글자">텍스트나 이미지</a>
💗 테이블 태그
태그는 표를 만드는 태그이다. 데이터를 보여주는 표를 만들 때 사용한다.
| 태그명 | 설명 |
| <table> | 표는 데이터를 일목요연하게 표현하기 위한 방법 |
| <tr> | Table Row의 약자로 표에서 행 구분. |
| <th> | Table Header의 약자로 표 내부의 제목(column)을 명시하고자 할 때 사용 |
| <td> | Table Data의 약자로 표에서 열을 구분 |
| <caption> | 표의 상단/하단에 제목을 적을 때 사용 |
| <thead> | 테이블 구조 설정 시 제목 부분 |
| <tbody> | 테이블 구조 설정 시 본문 |
| <tfoot> | 테이블 구조 설정 시 바닥글 |
| 테이블 표 통합 태그 | 설명 |
| <td colspan="통합할 갯수"> | 테이블 데이터<td> column을 병합 |
| <td rowspan="통합할 갯수"> | 테이블 데이터<td> row를 병합 |
| tble코드에 border="n"속성을 넣어야 선이 생긴다. |
⭐ <table>태그 예시 (1)
| 이름 | 주소 | 전화 |
|---|---|---|
| 홍길동 | 서울특별시 강남구 역삼동 | 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>태그 예시 (2)
| 지상파 방송국 | |||
| 채널 | MBC | KBS | SBS |
| 11 | 9 | 5 | |
더보기
<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> 태그
form 태그는 정보를 입력 또는 선택하고 버튼을 클릭할 때 정보를 서버에 전달하는 CGI 기능이다. 또한 응답받는 양방향의 의사소통을 지원하는 입력 양식이다.
⭐ [form 태그 속성]
| 속성명 | <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을 식별하기 위해 이름을 지정한다. |
⭐ <input> 태그 속성
| 속성명 | 설명 |
| 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 속성을 사용하여 정규 표현식에 간단한 설명을 추가함으로써 사용자가 정확한 값을 입력할 수 있도록 도움을 줄 수 있다. |
⭐ [form 태그의 하위 태그]
| ✨ input type= | "text" | 텍스트 입력 양식 |
| "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" | 라디오 버튼 |
| "checkbox" | 체크박스 |
더보기
<form>
<table>
<tr>
<td>GENDER</td>
<td>
<input type="radio" name="gender" id="women" value="women" checked="checked"/>
<lable for="women">여자</lable>
<input type="radio" name="gender" id="men" value="men"/>
<lable for="men">남자</lable>
</td>
</tr>
<tr>
<td>HOBBY</td>
<td>
<input type="checkbox" name="hobby" value="climbing"/>
<lable>등산</lable>
<input type="checkbox" name="hobby" value="traveling"/>
<lable>여행</lable>
<input type="checkbox" name="hobby" value="fishing"/>
<lable>낚시</lable>
</td>
</tr>
</table>
</form>
| ✨ input type= |
"button" |
이벤트를 처리할 버튼 |
| "submit" | form에서 지정한 페이지로 이동 | |
| "reset" | 모든 입력양식 초기화 |
| ✨ textarea | row="n" | 여러 행의 텍스트 입력 양식 cols는 열개수, rows는 행수 |
| cols="n" |
더보기
<form>
<table>
<tr>
<td>Ect</td>
<td><textarea rows="7" cols="30" name="exam"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="list" noeclick="alert(목록 이동)"/>
<button type="button" oneclick="alert(클릭시 보여줄 내용)">list</button>
<input type="submit" value="전송"/>
<input type="reset" value="취소"/>
</td>
</tr>
</table>
</form>
| ✨ <select> | 선택 양식 |
| ✨ <optgroup> | 옵션의 그룹화 |
| ✨ <option> | 옵션 추가 |
더보기
<form>
<table>
<tr>
<td>computer management</td>
<td>
<select name="OS" size="3" multiple>
<option value="window">window</option>
<option value="linux">linux</option>
<option value="solaris">solaris</option>
<option value="mac">mac</option>
</select>
</td>
</tr>
<tr>
<td>Web Programming subject</td>
<td>
<select name="LessonOne">
<option value=window>window</option>
<option value="linux">linux</option>
<option value="solaris">solaris</option>
<option value="mac">mac</option>
</select>
</td>
</tr>
</table>
</form>
| ✨ <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 |
더보기
<form>
<table>
<colgroup>
<col width="34%">
<col width="33%">
<col width="33%">
</colgroup>
<tr>
<td>date (연-월-일)</td>
<td>month (연도-월)</td>
<td>week (연도-주)</td>
</tr>
<tr>
<td><input type="date" /> </td>
<td><input type="month" /> </td>
<td><input type="week"> </td>
</tr>
</table>
</form>
| ✨ time | 스핀박스에서 시간 선택 |
| ✨ datetime-local | 스핀박스에서 현지 시간 선택 |
더보기
<form>
<table>
<tr>
<td>time (시간)</td>
<td>datetime-local (현지시간)</td>
</tr>
<tr>
<td><input type="time" /></td>
<td><input type="datetime-local" /></td>
</tr>
</table>
</form>
| 이메일(email) | |
| ✨ tel | 전화번호(tel) |
💗 프레임태그
iframe> 태그는 Internal Frame의 약자이다. 현재 HTML 문서 내에 일정한 크기의 영역을 할당해서 삽입하는 인라인 프레임이다.
sandbox는 플러그인 실행 금지, JavScript 사용 금지, 폼 요소에 의한 페이지 호출 금지 등의 제한을 할 수 있다. srcdoc는 iframe 태그에 표시할 페이지의 내용을 작성한다. src 속성보다 우선 순위가 높기 때문 에 src의 내용은 무시한다.
<iframe src="보여줄 파일명" name="이름" width="가로" height="세로"></frame>더보기
list를 클릭했을때 나오는 문서
<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>
💗 이미지 태그
Img 요소는 반드시 src 속성을 설정해야한다.
더보기
| GIF(Graphic Interchange Format) | JPEG, PNG에 비하여 파일 크기가 작다. 표현 가능 색상이 256개이므로 자연스러운 장면에는 부적합 해서 사진보다는 클립아트나 드로잉 같은 종류의 이미지에 적합하다. |
| JPEG(Joint Photographic Experts Group) | 24비트의 컬러를 사용하므로 수백만 개의 색상을 표현한다. 복잡한 그림이나 사진 등 색상을 많이 사 용하는 이미지에 적합하다. |
| PNG(Portable Network Graphic) | GIF와 JPEG 형식의 장점과 비압축 형식인 BMP 형식의 장점을 가지고 있다. 24비트 (또는 32비트) 컬 러를 사용한다. |
<img src="이미지 파일명 또는 웹상의 이미지 경로" alt="이미지가 없을 때 출력하는 메시지" />
⭐ 이미지 관련 태그
| 태그 | 설명 |
| <figure> | 그림, 사진, 다이어그램과 텍스트의 콘텐츠를 함께 묶어서 어떤 요소들을 그룹 지을 때 사용한다. |
| <figcaption> | <figure> 요소를 위한 제목을 표현한다. |
💗 음악태그 <audio>
더보기
브라우저 자체에서 동영상을 재생하도록 기능이이다. 브라우저 별로 지원하지 않는 동영상 파일도 있다.
[audio 파일의 종류]
| 종류 | 설명 |
| mp3 (*.mp3) | 음악 다운로드 및 저장에 가장 인기있는 형식(mpeg-1 오디오 규격) |
| wave (*.wav, *.wave) | 마이크로소프트오 IBM이 개발한 비압축 방식의 표준 오디오 파일 |
| ogg (*.ogg, *.ogv) | 공개 소스 기반의 다양한 코덱을 지원하는 오디오 파일 |
[video파일의 종류]
| 종류 | 설명 |
| mpeg4 (*.mp4, *.m4v) | mpeg-4는 영상, 음성을 디지털 데이터로 전송하기 위한 비디오 파일 형식. 일반적으로 웹에서 비디오 파일을 공유할 때 사용한다. |
| webm (*.webm) | 구글이 HTML5의 동영상에 사용하기 위해서 개발하였고, video 태그 를 사용하여 웹에서 재생할 수 있다. |
| avi | 윈도우가 지원하는 동영상 파일 형식. 화질은 좋지만 실시간 웹 영상 에 적합하지 않다. |
⭐ audio의 속성값
<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>태그 예시
더보기
<audio controls="controls">
<source src="audio/ladymov.mp3" type="audio/mp3">
<source src="audio/ladymov.ogg" type="audio/ogg">
</audio>
💗 동영상태그 <vedio>
⭐ video의 속성값
<video controls src="비디오 경로" width="폭" height="높이" />
<video controls width="폭" height="높이">
<source src="비디오 경로" type="video/mp4">
비디오를 재생할 수 없습니다.
</video>| 속성명 | 설명 |
| src | 동영상 파일의 경로를 지정한다. |
| controls="controls" | 동영상 화면에 컨트롤을 표시할지 여부를 지정한다. |
| width="폭" height="높이" | 화면에서 비디오가 표시될 영역의 크기를 설정한다. |
| poster | 동영상이 화면에 나타나지 않을 때 대신 표시할 그림 |
| preload | ⦁ auto(기본값) : 페이지를 로드하고 바로 비디오 파일을 다운로드한다. ⦁ metadata : 사용자가 재생시키지 전까지는 비디오의 크기, 첫프레임, 비디오 관련 정보 등과 같은 metadata만 다운로드 한다 ⦁ none : 재생 시작 전까지는 비디오 파일을 다운로드 하지 않는다. |
⭐ <vedio>태그 예시 (유튜브 동영상을 넣는것도 가능하다)
더보기
<video width="640px" height="360px" controls="controls">
<source src="video/tiger.mp4" type="video/mp4">
<source src="video/tiger.webm" type="video/webm">
</video>유튜브 동영상 문서내 포함하고자 할때
<h3>유튜브 동영상 문서내 포함하고자 할때</h3>
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/y7H_XPe2X3A"></iframe>
</p>
<p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/FQGM4qd5tdk"></iframe>
</p>
'Web > html5' 카테고리의 다른 글
| 로그인,회원가입 form 만들기 (0) | 2022.05.05 |
|---|---|
| Layout (0) | 2022.04.24 |
| HTML (웹표준, 태그 구성, 규칙) (0) | 2022.04.19 |