์ด๋ฏธ์ง ์ฝ์
../ : ํ์ฌ ๊ฒฝ๋ก ์์ ๋ปํจ
<body>
<h1>๊ฒฝ๋ก์ฐ์ต</h1>
<p>์๋๊ฒฝ๋ก(ํ์ฌGTMLํ์ด์ง ๊ฒฝ๋ก๋ฅผ ๊ธฐ์ค์ผ๋ก ํ๋ค)</p>
<img alt="์ด๋ฏธ์ง์ ๋ํ ์ค๋ช
(์ด๋ฏธ์ง๊ฐ ๋ณด์ด์ง ์์ ๋ ๋์ ํ ์ค๋ช
) - ์
๋ฌ๋๊ฐ ๋ง์๋ค..." src="../04/images/salad.jpg" width="200" height="200">
<p>์ ๋๊ฒฝ๋ก</p>
<img alt="์ด๋ฏธ์ง์ ๋ํ ์ค๋ช
(์ด๋ฏธ์ง๊ฐ ๋ณด์ด์ง ์์ ๋ ๋์ ํ ์ค๋ช
) - ์
๋ฌ๋๊ฐ ๋ง์๋ค..." src="http://localhost:9090/webproject/04/images/salad.jpg" width="200" height="200">
<img alt="์ด๋ฏธ์ง์ ๋ํ ์ค๋ช
(์ด๋ฏธ์ง๊ฐ ๋ณด์ด์ง ์์ ๋ ๋์ ํ ์ค๋ช
) - ์
๋ฌ๋๊ฐ ๋ง์๋ค..." src="/webproject/04/images/salad.jpg" width="200" height="200">
</body>
์ด๋ฏธ์ง ์ฌ์ด์ฆ ์กฐ์ width, height
- %๋ก ์ฌ์ด์ฆ ์กฐ์ ์ ์น ํฌ๊ธฐ์์ ๋ฐ์ํ์ผ๋ก ์กฐ์
์ค๋์ค์ ๋น๋์ค ์ฝ์
<embed>
- <audio>, <video> ์ง์
<!-- /๋ก ์์ํ๋ฉด ์ ๋๊ฒฝ๋ก, /๊ฐ ์์ผ๋ฉด ์๋๊ฒฝ๋ก -->
<img src=*"images/tangerines.jpg"* alt=*"๋ ๋ํฅ"*>
<audio src=*"medias/spring.mp3"* autoplay=*"autoplay"* controls></audio>
ํ์ดํผ๋งํฌ ์ฝ์ ํ๊ธฐ
blank๋ฅผ ์ฃผ๋ฉด ์๋ก์ด ํญ์ผ๋ก ์ฐฝ์ด ๋จ๊ฒํจ
์ ๋ ฅ ์์ ์์ฑํ๊ธฐ
<form></form> ํ๊ทธ
<fieldset>๋ฌถ์</fieldset>
<form action="./jsp/loginCheck.html" method="get">
<fieldset>
<legend>๋ก๊ทธ์ธ์ ๋ณด</legend>
<label>์์ด๋:<input type="text" name="userID"></label>
<label for="userPW">ํจ์ค์๋:</label><input type="text" name="userPW">
</fieldset>
<fieldset>
<legend>๋ค๋ฅธ์๋น์ค</legend>
<input type="submit" value="๋ก๊ทธ์ธํ๊ธฐ">
<input type="reset" value="์ง์ฐ๊ธฐ">
</fieldset>
</form>input์ required = ํ์์ ๋ ฅํ๊ฒ ๋ง๋ฆ
์ ์ก๋ฐ์ ๊ฐ(JSP๋ฌธ์ผ๋ก ์์ฑ) <% %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String uid = request.getParameter("userID");
String upw = request.getParameter("userPW");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>์ ์ก๋ฐ์ ๊ฐ</h1>
<p>์์ด๋๋ <%=uid %></p>
<p>ํจ์ค์๋๋ <%=upw %></p>
</body>
</html>
+์ถ๊ฐ JSP
์ฃผ์
<%--
JSP์ฃผ์ : JSP๋ฌธ์๋ฅผ ๋ณด๋ ์ฌ๋์ ์ํ ์ค๋ช
--%>
<!--
HTML์ฃผ์ : ๊ฐ๋ฐ์์๊ฒ ์ฝ๋๋ฅผ ์ค๋ช
ํ๊ธฐ ์ํจ
์ด ์ฃผ์์ ๊ฐ๋ฐ์๊ด๋ฆฌ์ต์
์์ ๋ณด์
-->๋ธ๋ผ์ฐ์ ์ ์ฃผ์ ์จ๊ธฐ๊ธฐ, ํ๋ผ๋ฏธํฐ ๋ ธ์ถX
method=”post” → ํ๊ธ์ด ๊นจ์ง๋ ํ์์ด ๋ฐ์
-ํด๊ฒฐ๋ฐฉ๋ฒ-
request.setCharacterEncoding("utf-8"); //post ๋ฐฉ์์ผ๋ ํ์
์๋ฐ์คํฌ๋ฆฝํธ value ์ฝ๊ธฐ
<script type="text/javascript">
a = document.getElementById("input1").value;
console.log(a);
</script>
Input ํํ
4.search : <input type="search" placeholder="Xํ์์์"><br>
5.url : <input type="url" placeholder="urlํํ http://์ฃผ์"><br>
6.email : <input type="email" placeholder="OOO@OOO.OO"><br>
7.tel : <input type="tel" placeholder="010-0000-0000"><br>
<fieldset>
<legend>์ฑ๋ณ์ ํ(radio๋ ์๋ก ๋ฐฐํ์ )</legend>
<input name="gender" type="radio" value="M">๋จ์
<input name="gender" type="radio" value="F">์ฌ์
</fieldset>
<br>
<fieldset>
<legend>ํ์ต๊ณผ๋ชฉ(checkbox๋ ์๋ก ๋
๋ฆฝ์ )</legend>
<input type="checkbox" name="subject" value="HTML">HTML5
<input type="checkbox" name="subject" value="CSS">CSS3
<input type="checkbox" name="subject" value="JS">JavaScript
<input type="checkbox" name="subject" value="JQ">JQuery
<input type="checkbox" name="subject" value="react">ReactJS
</fieldset>
10.number : <input name="input8" type="number" min="10" max="100" value="10" step="10"><br>
11.range : <input name="input9" type="range" max="100" value="10" step="10"><br>
12.date : <input name="input10" type="date"><br>
12.month : <input name="input11" type="month"><br>
12.week : <input name="input12" type="week"><br>
13.time : <input name="input13" type="time"><br>
14.datetime : <input name="input14" type="datetime"><br>
15.datetime-local : <input name="input15" type="datetime-local"><br>
13.์ด๋ฏธ์ง-์๋๊ฒฝ๋ก<input type="image" src="../05/images/login.png"><br>
13.์ด๋ฏธ์ง-์ ๋๊ฒฝ๋ก<input type="image" src="/webproject/05/images/login.png"><br>
14.๋ฒํผ<input type="button" value="type๋ฒํผ"><br>
<!--input button : ๋ฒํผ ํด๋ฆญ์ JavaScript ์ํํ๊ธฐ ์ํจ-->
<button>form์์ ๋ฒํผ(submit์ํ๋จ)</button>
</form>
15.ํ์ผ์ฒจ๋ถ<input type='file'>
17.์ฌ๋ฌ๊ฐ์ค ํ๋์ ํ<br>
<select name="week1">
<option>์์์ผ</option>
<option value="TUE">ํ์์ผ</option>
<option selected="selected">์์์ผ</option>
<option>๋ชฉ์์ผ</option>
</select><br>
17.์ฌ๋ฌ๊ฐ์ค ๋ค์ค์ ํ<br>
<select name="week2" multiple="multiple">
<option>์์์ผ</option>
<option value="TUE">ํ์์ผ</option>
<option selected="selected">์์์ผ</option>
<option>๋ชฉ์์ผ</option>
</select><br>
18.์
๋ ฅ ๋ฐ ์ ํ <input type="text" list="weekList" name="week3"><br>
<datalist id="weekList">
<option>์์์ผ</option>
<option>ํ์์ผ</option>
<option>์์์ผ</option>
<option>๋ชฉ์์ผ</option>
</datalist><br>
๋ฐ์ํ
'๐Front > HTML' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| HTML_Day01 (0) | 2024.04.20 |
|---|