HTML Day 2

HTML ๋งํฌ ๊ด€๋ จ ํƒœ๊ทธ

<!DOCTYPE html>
<html> 
<head>
<meta charset="UTF-8">
<title>๋งํฌ</title>
</head>
<body>
<h1>ํ•˜์ดํผ๋งํฌ ๊ด€๋ จ ํƒœ๊ทธ</h1>
	<!--aํƒœ๊ทธ์˜ href ์†์„ฑ์œผ๋กœ ๋งํฌ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. -->
	<h3>aํƒœ๊ทธ๋ฅผ ์ด์šฉํ•œ ํ•˜์ดํผ๋งํฌ ํ…Œ์ŠคํŠธ</h3>
	<ul>
		<li><a href = "test.html">test.html</a></li>
		<li><a href = "html01_block_inline.html">html01</a></li>
		<li><a href = "html2_title_paragraph.html">html2</a></li>	
	</ul>
	<br/>
	
	<h3>์›นํŽ˜์ด์ง€ ๋งํฌ ํ…Œ์ŠคํŠธ</h3>
	<ul>
		<li><a href = "http://www.naver.com" target = "_blank">๋„ค์ด๋ฒ„</a></li>
		<!--target = "_blank"๋ฅผ ํ•˜๊ฒŒ ๋˜๋ฉด ์ƒˆํƒญ์—์„œ ํŽ˜์ด์ง€๊ฐ€ ์—ด๋ฆผ -->
		<!--target = "_self"==default : ๊ธฐ์กด ํƒญ์—์„œ ํŽ˜์ด์ง€๊ฐ€ ์—ด๋ฆผ -->
		
		<li><a href = "http://www.google.com" target = "_blank">๊ตฌ๊ธ€</a></li>
		<li><a href = "http://www.instagram.com" target = "_self">์ธ์Šคํƒ€๊ทธ๋žจ</a></li>
		<li><a href = "http://www.29cm.com" target = "_blank">29cm</a></li>	
		
	</ul>

	<br/>
	<h3>ํŽ˜์ด์ง€ ๋‚ด์—์„œ ๋งํฌ๋ฅผ ํ†ตํ•œ ์ด๋™</h3>
	<ul>
		<li><a href = "#a">1๋ฒˆ์œผ๋กœ</a></li>
		<li><a href = "#b">2๋ฒˆ์œผ๋กœ</a></li>
		<li><a href = "#c">3๋ฒˆ์œผ๋กœ</a></li>
		<!-- #a, #b, #c : id์™€ ๊ตฌ๋ณ„ํ•˜๊ธฐ ์œ„ํ•ด #์„ ๋ถ™์—ฌ์คŒ / ๋งํฌ ๋งจ ๋’ค์— #a, #b, #c ์ด๋ ‡๊ฒŒ ๋ถ™์Œ -->	
	
	</ul>
	
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>

<p id = "a">1๋ฒˆ</p>

	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	
<p id = "b">2๋ฒˆ</p>

	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>

<p id = "c">3๋ฒˆ</p>

	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br>
	
	<p></p>
	<!--<p></p>๋ฅผ ๋’ค์— ๋ถ™์—ฌ์ฃผ๋ฉด ๊ณต๋ฐฑ์„ ์ œ๊ฑฐํ•˜๊ณ  3๋ฒˆ์„ ๋ณด์—ฌ์คŒ-->

</body>
</html>

HTML ํ‘œ ๊ด€๋ จ ํƒœ๊ทธ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ํ…Œ์ด๋ธ”</title>
</head>
<body>
<!-- 
	<table> : ๊ธฐ๋ณธ์ ์ธ ํ‘œ๋ฅผ ์ƒ์„ฑํ•ด์ฃผ๋Š” ํƒœ๊ทธ
	<tr> : ํ‘œ์˜ ํ–‰์„ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ
	<th> : ํ‘œ์˜ ์ œ๋ชฉ ์…€์„ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ
	<td> : ํ‘œ์˜ ์ผ๋ฐ˜ ์…€์„ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ 

 -->

<h2>๊ธฐ๋ณธ ํ…Œ์ด๋ธ” ๋งŒ๋“ค๊ธฐ</h2>
<table border = "1" style = "width : 300px">
	<tr style = "background-color : gray">
		<th>cloumn01</th>
		<th>cloumn02</th>	
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>	
		
	</tr>
	<tr>
		<td>3</td>	
		<td>4</td>
	</tr>

</table>
<br/>
<br/>
<br/>

<table border = "1">
	<caption>ํ…Œ์ด๋ธ” ์ œ๋ชฉ</caption>
	<colgroup>
		<col width = "100px"/>
		<col width = "200px"/>
		<col width = "300px"/>	
	</colgroup>
	
	<thead>
		<tr style = "background-color : pink">
			<th>์ปฌ๋Ÿผ1</th>
			<th>์ปฌ๋Ÿผ2</th>
			<th>์ปฌ๋Ÿผ3</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<td>๋‚ด์šฉ1</td>
			<td>๋‚ด์šฉ2</td>
			<td>๋‚ด์šฉ3</td>		
		</tr>
	</tbody>
	
	<tfoot>
		<tr>
			<td>๋‚ด์šฉ4</td>
			<td>๋‚ด์šฉ5</td>
			<td>๋‚ด์šฉ6</td>		
		</tr>	
	</tfoot>

</table>

<h3>ํ…Œ์ด๋ธ” ์…€ ๋ณ‘ํ•ฉํ•˜๊ธฐ</h3>
<!-- 
	<td>ํƒœ๊ทธ์˜ ์†์„ฑ์„ ์ด์šฉํ•ด์„œ ํ–‰๊ณผ ์—ด์„ ํ•ฉ์น  ์ˆ˜ ์žˆ๋‹ค.
	<colspan> : ์—ด ํ•ฉ์น˜๊ธฐ
	<rowspan> : ํ–‰ ํ•ฉ์น˜๊ธฐ 
 -->
<table border = "1">
	<caption>ํ…Œ์ด๋ธ” ๋ณ‘ํ•ฉ</caption>
	<thead style = "background-color : pink">
		<tr>
			<th>์ปฌ๋Ÿผ1</th>
			<th>์ปฌ๋Ÿผ2</th>
			<th>์ปฌ๋Ÿผ3</th>
			<th>์ปฌ๋Ÿผ4</th>
		</tr>
		
	</thead>
	
	<tbody>
		<tr>
			<td rowspan = "2">1[์„ธ๋กœ ํ•ฉ์นจ]</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>		
		</tr>
		<tr>
			<td colspan = "2">5[๊ฐ€๋กœ ํ•ฉ์นจ]</td>
			<td>6</td>
			<td>7</td>
			<td>8</td>		
		</tr>
	</tbody>

	<tfoot>
		<tr>
			<td colspan = "6">๊ฐ€๋กœ ์ „๋ถ€ ํ•ฉ์น˜๊ธฐ</td>		
		</tr>	
	
	</tfoot>

</table>


</body>
</html>

HTML ์ด๋ฏธ์ง€ ๊ด€๋ จ ํƒœ๊ทธ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>์ด๋ฏธ์ง€ ๊ด€๋ จ ํƒœ๊ทธ</title>
</head>
<body>
<!-- ์ด๋ฏธ์ง€ ์‚ฝ์ž…ํ•˜๊ธฐ ์œ„ํ•œ <img>ํƒœ๊ทธ ์‚ฌ์šฉ
	ํŒŒ์ผ์˜ ๊ฒฝ๋กœ : src์ด๋ผ๋Š” ์†์„ฑ
	<img>ํƒœ๊ทธ๋Š” ๋‹ซ๊ธฐ ํƒœ๊ทธ ์‚ฌ์šฉX
 -->
 
<h1>์ด๋ฏธ์ง€ ๊ด€๋ จ ํƒœ๊ทธ</h1>
	<img src = "sample/image/river1.PNG">
	<p>src ์†์„ฑ ๊ฒฝ๋กœ๋ฅผ ์„ธํŒ…ํ•˜์—ฌ ํŒŒ์ผ์„ ๋ถˆ๋Ÿฌ์˜จ๋‹ค.</p>
<hr/>

	<h2>์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ์†์„ฑ</h2>
	<h3>alt ์†์„ฑ</h3>
	<p>์ด๋ฏธ์ง€๋ฅผ ์ฝ์–ด์˜ฌ ์ˆ˜ ์—†์„ ๊ฒฝ์šฐ ๋Œ€์ฒด๋˜๋Š” ํ…์ŠคํŠธ</p>
	<img alt="๊ฐ• ์‚ฌ์ง„" src="sample/image/river1.png">
<br/>
	<h3>width์™€ height ์†์„ฑ</h3>
	<h4>๊ณ ์ • ํฌ๊ธฐ : ํ™”๋ฉด์˜ ์‚ฌ์ด์ฆˆ๊ฐ€ ๋ฐ”๋€Œ์–ด๋„ ํฌ๊ธฐ๊ฐ€ ๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹ค.</h4>
	<img src = "sample/image/flower1.PNG" width = "200px" height = "150px">
	<img src = "sample/image/flower2.PNG" width = "200px" height = "150px">
	<img src = "sample/image/flower3.PNG" width = "200px" height = "150px">
	<br/>
	<img src = "sample/image/flower4.PNG" width = "200px" height = "150px">
	<img src = "sample/image/flower5.PNG" width = "200px" height = "150px">
	
	<hr/>
	<h4>๊ฐ€๋ณ€ ํฌ๊ธฐ : ํ™”๋ฉด์˜ ์‚ฌ์ด์ฆˆ๊ฐ€ ๋ฐ”๋€Œ๋ฉด ํฌ๊ธฐ๋„ ๋ณ€ํ•œ๋‹ค.</h4>
	<img src = "sample/image/flower1.PNG" width = "15%" height = "150px">
	<img src = "sample/image/flower2.PNG" width = "15%" height = "150px">
	<img src = "sample/image/flower3.PNG" width = "15%" height = "150px">
	<br/>
	<img src = "sample/image/flower4.PNG" width = "15%" height = "150px">
	<img src = "sample/image/flower5.PNG" width = "15%" height = "150px">
	<hr/>
	
	<h4>์ด๋ฏธ์ง€ ๊ตฌ์—ญ์„ 2๊ฐœ๋กœ ๋‚˜๋ˆ„์–ด ๊ฐ๊ฐ ๋งํฌ๋ฅผ ์„ค์ •</h4>
	<img src = "sample/image/river1.PNG" usemap = "#map">
	<!--map ํƒœ๊ทธ๋กœ ์ด๋ฏธ์ง€ ๋งต์„ ๋งŒ๋“ ๋‹ค.(์ด๋ฏธ์ง€๋งต์ด๋ž€ ํด๋ฆญ์„ ํ•  ์ˆ˜ ์žˆ๋Š” ์˜์—ญ) -->
	<map name = "map">
		<area shape = "rect" coords = "00,00,300,500" href = "http://www.naver.com" target = "_blank">
		<!-- 00,00,300,500์œผ๋กœ ๋งž์ถฐ์ฃผ๋ฉด ์™ผ์ชฝ์—๋งŒ ์„ค์ •๋จ -->
		<area shape = "rect" coords = "300,00,628,419" href = "http://www.google.com" target = "_blank"                >
		
	
	</map>

</body>
</html>

HTML ๋ฏธ๋””์–ด ๊ด€๋ จ ํƒœ๊ทธ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๋ฏธ๋””์–ด</title>
</head>
<body>
	<h3>์˜ค๋””์˜ค ํƒœ๊ทธ</h3>
	<audio src="sample/audio/major.mp3" controls = "controls" autoplay = "autoplay"></audio>
	<h3>๋น„๋””์˜ค ํƒœ๊ทธ</h3>
	<video src="sample/video/video1.mp4" controls = "controls"></video>
	<h3>iframe</h3> <!--ํŽ˜์ด์ง€ ๋‚ด ๋‹ค๋ฅธ ํŽ˜์ด์ง€ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ์Œ(์œ ํˆฌ๋ธŒ, ๋˜๋Š” ๋ฌธ์„œ ๋“ฑ) -->
	<iframe src = "https://www.youtube.com/embed/2KtFPjSp3og" frameborder = "5" gesture = "media" allow = "encrypted-media"
		allowfullscreen></iframe>


</body>
</html>

HTML form ๊ด€๋ จ(input, fieldset) ํƒœ๊ทธ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form01</title>
</head>
<body>
	<form action = "html12_form01_res.html" method = "get">
	<!-- 
		์ „์†ก(submit)์„ ๋ˆŒ๋ €์„ ๋•Œ action์—์„œ ์ง€์ •ํ•ด์ค€ ๊ฒฝ๋กœ(#)๋ฅผ ํ†ตํ•ด method์— ์ง€์ •ํ•œ ๋ฐฉ์‹(get)์œผ๋กœ
			 input ํƒœ๊ทธ์˜ ๊ฐ’์ด ์ „๋‹ฌ๋œ๋‹ค. 
		action : form ํƒœ๊ทธ์— ์ž…๋ ฅ๋œ ๊ฐ’์„ ์ „์†ก๋ฐ›์„ ์„œ๋ฒ„์˜ ํด๋ž˜์Šค๋ช…์„ ์ง€์ •ํ•˜๋Š” ํƒœ๊ทธ(์ˆ˜์‹ ๋Œ€์ƒ)
		method : get(์ž…๋ ฅ๋œ ๊ฐ’๋“ค์„ ์ฃผ์†Œ์— ํฌํ•จ์‹œ์ผœ ์ „๋‹ฌ)/post(์ž…๋ ฅ๋œ ๊ฐ’๋“ค์„ ์ˆจ๊ฒจ์„œ ์ฃผ์†Œ๋ฅผ ์ „๋‹ฌ)๋กœ ์ „์†ก๋ฐฉ์‹์„ ์ง€์ •(์ „์†ก๋ฐฉ์‹) 
		
	 -->
		<!-- <label>๊ฒ€์ƒ‰ํ•  ๋‚ด์šฉ :</label>
		<input type = "text" size = "15" name = "search"> <input type = "submit" value = "search">-->
		
		<fieldset> <!--html ์š”์†Œ(p, input ๋“ฑ๋“ฑ)๋ฅผ ๋ฐ•์Šค๋กœ ๋ฌถ์–ด์ฃผ๋Š” ํƒœ๊ทธ
					<legend> : ํ•„๋“œ์…‹์˜ ์ œ๋ชฉ์„ ์ •ํ•ด์ฃผ๋Š” ํƒœ๊ทธ -->
			<legend>ํšŒ์›๊ฐ€์ž…</legend>
		<p>์•„์ด๋”” : <input type = "text" name = "ID" placeholder = "id"/></p>
		<p>๋น„๋ฐ€๋ฒˆํ˜ธ : <input type = "password" name = "Pwd" placeholder = "password" /></p>
		<p>์ด๋ฉ”์ผ ์ˆ˜์‹  ์—ฌ๋ถ€
			<input type = "radio" name = "radio" value = "y"/> ๋™์˜
			<input type = "radio" name = "radio" value = "n"/> ๊ฑฐ๋ถ€
		</p>
		
		<p>๊ด€์‹ฌ๋ถ„์•ผ
			<input type = "checkbox" name = "cb1" value = "๋‹ฌ๋น›์กฐ๊ฐ์‚ฌ" />๋‹ฌ๋น›์กฐ๊ฐ์‚ฌ
			<input type = "checkbox" name = "cb2" value = "์Šคํฌ์ธ ํ† ํ† " />์Šคํฌ์ธ ํ† ํ† 
			<input type = "checkbox" name = "cb3" value = "์‹ ๋ถ„์ฆ์žฌ๋ฐœ๊ธ‰" />์‹ ๋ถ„์ฆ์žฌ๋ฐœ๊ธ‰		
		
		</p>
		
		<p>
			<input type = "submit" value = "๊ฐ€์ž…ํ•˜๊ธฐ"/>
			<input type = "reset" value = "์ทจ์†Œ"/>
			<input type = "button" value = "๋ฒ„ํŠผ"/>
		</p>
		
		<p>
			<input type = "file"/>
			<input type = "hidden" name = "hidden01" value = "my_hidden_value"/>
			<!--ํŽ˜์ด์ง€์—์„œ ์ฃผ์†Œ๋ฅผ ๋„˜๊ฒจ์ค„ ๋•Œ hidden์„ ์‚ฌ์šฉํ•ด์„œ ๊ฐ€๋ ค์คŒ (์‚ฌ์šฉ์ž์—๊ฒŒ๋Š” ์•ˆ๋œธ)-->
		
		</p>

		</fieldset>
	</form>

</body>
</html>

HTML form ๊ด€๋ จ(legend, label, select, option, optgroup) ํƒœ๊ทธ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form02</title>
</head>
<body>
<h1>select ์š”์†Œ</h1>
<form action = "html12_form01_res.html" method = "get">
	<fieldset>
		<legend>์—ฌ๋Ÿฌ์ค„ ๊ธ€์ƒ์ž์™€ ๋ชฉ๋ก์ƒ์ž</legend>
		<p>
			<label>๋‹ต๊ธ€</label><br/>
			<textarea rows = "5" cols = "100" name = "ta"></textarea>		
		</p>
		
		<p>
			<input type = "submit" value = "์ „์†ก"/>
		</p>
		
		<p>
			<select name = "selected01">
				<option value = "html">HTML</option>			
				<option>CSS</option>			
				<option>JS</option>			
				<option>JQuery</option>			
			</select>
		</p>
		
		<p>
			<select name = "select02">
				<optgroup label="์„œ์šธ"></optgroup>
					<option value = "gang-nam">๊ฐ•๋‚จ</option>
					<option value = "sadang">์‚ฌ๋‹น</option>
					<option value = "gu-ro">๊ตฌ๋กœ</option>
				
				<optgroup label="๊ฒฝ๊ธฐ"></optgroup>
					<option value = "su-won">์ˆ˜์›</option>
					<option value = "an-yang">์•ˆ์–‘</option>
			</select>
		</p>
	
	
	</fieldset>

</form>



</body>
</html>
PreviousHTMLNextHTML Day 1

Last updated

Was this helpful?