리스트(List) 태그
<p>메뉴 리스트</p>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
<p>지역 리스트</p>
<ol>
<li>서울</li>
<li>경기</li>
<li>충천</li>
<li>전라</li>
<li>경상</li>
<li>강원</li>
</ol>
✔< ul >< /ul >
순서 없는 리스트(Unordered Lists)
✔< ol >< /ol >
순서 있는 리스트(Ordered Lists)
테이블(Table) 태그
<body>
<table border="1">
<!-- <tr>
<td rowspan="4">중간고사 성적</td>
</tr> -->
<tr>
<td>국어</td>
<td>영어</td>
<td>수학</td>
</tr>
<tr>
<td>100</td>
<td>70</td>
<td>80</td>
</tr>
<tr>
<td colspan="2">평균</td>
<td>80</td>
</tr>
</table>
</body>주간 히트 노래 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>차트</title>
</head>
<body>
<table border="1">
<tr>
<td><h1>주간 히트 노래</h1>
<hr/>
<ol>
<!-- #은 자기자신(링크)를 가리킴 -> 나중에 링크 걸어준다의 표시 -->
<li>
<img src="실전 HTML5 & CSS동영상강좌_03강_HTML 기본-II/img01.png" alt="어머니 누구니"><a href="#">어머니 누구니</a>
</li>
<li>
<img src="/실전 HTML5 & CSS동영상강좌_03강_HTML 기본-II/img02.png" alt="한번 더 말해줘"><a href="#">한번 더 말해줘</a>
</li>
<li>
<img src="/실전 HTML5 & CSS동영상강좌_03강_HTML 기본-II/img03.png" alt="다른 남자 말고 너"><a href="#">다른 남자 말고 너</a>
</li>
<li>
<img src="/실전 HTML5 & CSS동영상강좌_03강_HTML 기본-II/img04.png" alt="모두가 내 발아래"><a href="#">모두가 내 발아래</a>
</li>
<li>
<img src="/실전 HTML5 & CSS동영상강좌_03강_HTML 기본-II/img05.png" alt="조만간 봐요"><a href="#">조만간 봐요</a>
</li>
</ol>
<p><audio src="34ex1.mp3" controls = "controls" autoplay = "autoplay" loop = "loop"></audio></p>
</td>
</tr>
</table>
</body>
</html>
폼(form) 태그
- < input type = "sumbit" >라는 전송하는 버튼이 있어야 폼 태그가 정상적으로 작동한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width`, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#" method="get">
이름: <input type="text" name="uname" /><br />
아이디: <input type="text" name="uid" /><br />
비밀번호: <input type="password" name="upw" /><br />
연락처: <input type="text" name="uphone1" size="5" /> -
<input type="text" name="uphone2" size="5"> -
<input type="text" name="uphone3" size="5" /><br />
사진: <input type="file" name="upic/"><br />
성별구분: <input type="radio" name="gender" value="m">남
<input type="radio" name="gender" value="w">여<br />
사용언어:<input type="checkbox" name="lan" value="kor" checked="" checked />한글,
<input type="checkbox" name="lan" value="eng">영어,
<input type="checkbox" name="lan" value="chi">중국어<br />
자기소개 : <textarea rows="5" cols="20">간단하게 입력하세요.</textarea><br />
국적 : <select>
<option>KOREA</option>
<option>USA</option>
<option>JAPAN</option>
<option>CHINA</option>
</select><br />
좋아하는음식 : <select multiple="multiple">
<option>김치</option>
<option>불고기</option>
<option>파전</option>
<option>비빔밥</option>
</select><br />
<input type="submit" value="submit" />
</form>
</body>
</html>
get방식(meter = "get")
- 클라이언트가 서버에게 데이터를 요정할 때 사용하는 방식.
- URL에 정보가 담겨서 전송된다.
- ?뒤에 key와 value값이 = 로 기준으로 정렬되어 있다.
- method를 명시하지 않으면 default가 get방식
- 데이터 크기 제한 있음.
post방식(meter = "post")
- 서버 쪽에서 어떤 작업을 명령할 때 사용하는 방식.
- header의 body에 담겨서 전송된다. 데이터를 별도로 첨부하여 전달.
- URL상에 전달한 정보가 표시되지 않는다.(비밀번호 입력하고 정보를 전송한 때 사용)
- 데이터 크기 제한 없음.
블록/인라인 태그
div태그(블록 태그 )
요소 안 내용 길이에 상관없이 요소 자체가 한 줄 전체를 차지하는 요소.
✔종류
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br/>, <button>, <cite>, <code>,
<dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>,
<small>, <script>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>, <tt>, <var>
span태그(인라인 태그)
요소 안 내용 길이에 좌우, 해당 요소 안 컨텐츠 길이 만큼만 너비를 차지하는 요소.
✔종류
<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>,
<dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>,
<h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <ul>, <video>
예제
<body>
<div>block_01</div>
<div>block_02</div>
<div>block_03</div>
<div>block_04</div>
<div>block_05</div>
<br /><br /> <!-- 개행 두번 -->
<span>inline_01</span>
<span>inline_02</span>
<span>inline_03</span>
<span>inline_04</span>
<span>inline_05</span>
</body>MIME Type
video/mp4 = video파일의 mp4포멧인 내용
- MIME 형식 : image/gif
[파일의 종류 / 파일포맷]
-> 웹 브라우저한테 읽을라고 전달하는 명령
-> 어떤 타입, 내용인지 먼저 알려주는 명령
📌종류
text/plain -> .txt
text/html -> .html
image/jpeg -> .jpeg
image/png
audio/mpeg
audio/ogg
audio/*
video/mp4
application/octet-stream
…
