HTML Day 1

<!DOCTYPE html>
<!--์–ธ์–ด ๋ฒ„์ „ ์ •ํ•˜๋Š” ๋ถ€๋ถ„ -->
<html>
<head>
<meta charset="UTF-8">
<title>๋ธ”๋ก์š”์†Œ ์ธ๋ผ์ธ ์š”์†Œ</title>
<!-- ๋ธ”๋ก์•ˆ์˜ ๋˜ ๋‹ค๋ฅธ ์š”์†Œ == ์ธ๋ผ์ธ ์š”์†Œ -->
</head>
<body>
	<h2>๋ธ”๋ก ์š”์†Œ</h2>
	<p>์ค„๋ฐ”๊ฟˆ</p>
	
	<!--๋ธ”๋ก์ด ๋‚˜๋‰˜์–ด์ ธ์„œ ์ค„ ๋ฐ”๊พธ๊ธฐ ๊ฐ€๋Šฅ -->
	<div style="background-color: pink">
		๋ธ”๋ก ์š”์†Œ ์•ˆ์— ํ…์ŠคํŠธ, <strong>์ธ๋ผ์ธ ์š”์†Œ</strong> ํฌํ•จ ๊ฐ€๋Šฅ
		<p>๋ธ”๋ก์š”์†Œ ์•ˆ์— ๋ธ”๋ก์š”์†Œ๋„ ํฌํ•จ ๊ฐ€๋Šฅ</p>
	</div>
	<!--์ „์ฒด์ ์ธ ๋ ˆ์ด์•„์›ƒ์„ ์žก์•„์ฃผ๋Š” ๊ธฐ๋Šฅ(๊ตฌ์—ญ์„ ๋‚˜๋ˆ„์–ด์ฃผ๋Š” ๊ฒƒ) ex)๋ฉ”๋‰ด๊ตฌํ˜„-->
	<h2>๋ธ”๋ก ์š”์†Œ2</h2>
	<p>HTML์ด๋ž€?</p>
	<blockquote>
		<!--์ธ์šฉํ•˜๋Š” ๊ธ€์„ ์ ์„ ๊ฒฝ์šฐ ์‚ฌ์šฉํ•จ ex)blockquote -->
		Hypertext Markup Language is the standard markup language for
		documents designed to be displayed in a web browser. It can be
		assisted by technologies such as Cascading Style Sheets and scripting
		languages such as JavaScript
	</blockquote>
	<p>
		์†๋‹ด์— <q><strong>๊ฐ€๋Š” ๋ง์ด ๊ณ ์™€์•ผ ์˜ค๋Š” ๋ง์ด ๊ณฑ๋‹ค.</strong></q>๋ผ๋Š” ์†๋‹ด์ด ์žˆ์Šต๋‹ˆ๋‹ค.
		<!--""๋‹ฌ์•„์ฃผ๋Š” ํƒœ๊ทธ ex) <q> -->
	</p>

	<h2>์ธ๋ผ์ธ ์š”์†Œ</h2>
	<a>์ค„๋ฐ”๊ฟˆ X </a>
	<!-- ์ค„๋ฐ”๊ฟˆ ํƒœ๊ทธ : <br/> ์‚ฌ์šฉํ•˜๋ฉด ๋จ. -->
	<a>์ค„๋ฐ”๊ฟˆ<br/>๋ ๊นŒ์š”? ๋˜๋„ค์š”
	</a>
	<!--<a> : ํ•˜์ดํผ๋งํฌ๋ฅผ ๋‹ฌ์•„์ฃผ๋Š” ํƒœ๊ทธ -->
	<br />

	<a href="http://www.naver.com">๋„ค์ด๋ฒ„</a>
	<a href="test.html">ํ…Œ์ŠคํŠธ</a>
	
	<q style = "background-color : skyblue">์ธ๋ผ์ธ ์š”์†Œ ์•ˆ์— ํ…์ŠคํŠธ์™€<a> ์ธ๋ผ์ธ์š”์†Œ</a> ํฌํ•จ๊ฐ€๋Šฅ</q><br/>
	<span>์ธ๋ผ์ธ ์š”์†Œ ์•ˆ์— <p>๋ธ”๋ก ์š”์†Œ</p> ํฌํ•จ ๋ถˆ๊ฐ€</span>
	<!--CSS๋ž‘ ๊ฐ™์ด ์“ฐ๋Š” ํƒœ๊ทธ : <span>-->
	<!--์ธ๋ผ์ธ ์š”์†Œ ์•ˆ์—๋Š” ๋ธ”๋ก ์š”์†Œ ๋˜๋„๋ก ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ธฐ-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!--๋ฌธ์„œ๊ฐ€ ์–ด๋–ป๊ฒŒ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋Š”์ง€์— ๋Œ€ํ•œ ์ •๋ณด ํƒœ๊ทธ : <meta> -->
<meta name = "Generator" content = "Eclipse">
<!--Generator : ์–ด๋””์„œ ๋งŒ๋“ค์—ˆ๋Š”์ง€(๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•œ ๋„๊ตฌ๊ฐ€ ๋ฌด์—‡์ธ์ง€) -->
<meta name = "Author" content = "๊ฐœ๋ฐœ์ž">
<!--Author : ๋ˆ„๊ฐ€ ๋งŒ๋“ค์—ˆ๋Š”์ง€ -->
<meta name = "Keywords" content = "">
<!--Keywords : ํ‚ค์›Œ๋“œ ์„ค์ • ','๋ฅผ ํ†ตํ•ด ์—ฌ๋Ÿฌ ๋‹จ์–ด ์„ค์ • ๊ฐ€๋Šฅ -->
<meta name = "Description" content = "">
<!--Description : ์š”์•ฝ๊ธ€(์„ค๋ช…)์„ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฒƒ -->

<title>์ œ๋ชฉ, ๋‹จ๋ฝ ํƒœ๊ทธ</title>
</head>
<body> 
<!--h1 > h2 > h3 > ...์ˆœ์œผ๋กœ ๊ธ€์ž ํฌ๊ธฐ๊ฐ€ ์ค„์–ด๋“ฆ -->
<h1>์ œ๋ชฉ</h1>
<h2>๊ธ€์ž</h2>
<h3>ํฌ๊ธฐ</h3>
<h4>์ง€์ •</h4>
<h5>ํ•˜๋Š”</h5>
<h6>ํƒœ๊ทธ</h6>
	
<p>p ์š”์†Œ๋Š” ๋‹จ๋ฝ์„ ์ •์˜</p>
<div>div ์š”์†Œ๋Š” ์˜์—ญ์„ ์ •์˜</div>

<address>์—ฐ๋ฝ์ฒ˜ : 010-1234-5678</address>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ํ…์ŠคํŠธ ๊ด€๋ จ ํƒœ๊ทธ</title>
</head>
<body>

	<h1>h1 ํƒœ๊ทธ</h1>
	<h2>h2 ํƒœ๊ทธ</h2>
	<!-- ์ค„ ๋ฐ”๊ฟˆ -->
	<br/>
	
	<!-- ๊ธ€๊ผด -->
	<h3>ํ…์ŠคํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ํƒœ๊ทธ๋“ค</h3>
	์ผ๋ฐ˜๊ธ€๊ผด
	<br/>
	<b>๊ธ€์ž๋ฅผ ๊ตต๊ฒŒ ํ‘œ์‹œํ•˜๋Š” ํƒœ๊ทธ</b>
	<br/>
	<strong>๊ธ€์ž๋ฅผ ๊ตต๊ฒŒ ํ‘œ์‹œํ•˜๋Š” ํƒœ๊ทธ</strong>
	<br/>
	<em>๊ธ€์ž๋ฅผ ๊ธฐ์šธ์ด๋Š” ํƒœ๊ทธ</em>
	<br/>
	<i>๊ธ€์ž๋ฅผ ๊ธฐ์šธ์ด๋Š” ํƒœ๊ทธ</i>
	<br/>
	<mark>ํ˜•๊ด‘ํŽœ ํšจ๊ณผ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ</mark>
	<br/>
	<small>๊ธ€์ž๋ฅผ ์ž‘๊ฒŒ ํ‘œ์‹œํ•˜๋Š” ํƒœ๊ทธ</small>
	<br/>
	๊ธฐ๋ณธ ๊ธ€์ž์—<sub>์•„๋ž˜ ์ฒจ์ž</sub>๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ์™€ <sup>์œ„์ฒจ์ž</sup>๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํƒœ๊ทธ์ด๋‹ค.
	<br/>
	<s>๊ธ€์ž์— ์ทจ์†Œ์„ ์„ ๋„ฃ๋Š” ํƒœ๊ทธ</s>
	<br/>
	
	<pre>
	์ž…๋ ฅํ•œ ํ˜•ํƒœ ๊ทธ๋Œ€๋กœ ๋ณด์—ฌ์ฃผ๋Š” ํƒœ๊ทธ 
	์•ˆ๋…•ํ•˜์„ธ์š” 
	์ €๋Š”                      ์žฌ๋ฏธ์žˆ์ง€ ์•Š์•„์š”.
	</pre>
	<hr/>
	<!--๋ฌธ๋‹จ์„ ๋‚˜๋ˆ„์–ด์ฃผ๋Š” ์ค„์„ ๊ทธ์–ด์ฃผ๋Š” ํƒœ๊ทธ -->
	<!--<pre> : ์ƒ์„ธํ•œ ์„ค์ •์„ ํ•ด์ฃผ๊ธฐ๊ฐ€ ์–ด๋ ค์›€ -->
	<br/>
	
	<h3>๊ธ€์ž๊ด€๋ จ ํƒœ๊ทธ ์‘์šฉ</h3>
	<p>ํƒœ๊ทธ๋“ค์€ ํ•ด๋‹น ํƒœ๊ทธ ๋‚ด์—์„œ ์ค‘์ฒฉ์œผ๋กœ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค.<br/>
	<strong>๊ตต์€</strong>๊ธ€์ž๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๊ณ , <s>์ทจ์†Œ์„ </s>์„ ๋„ฃ๊ฑฐ๋‚˜, <i>๊ธฐ์šธ์ด๋Š” ๋“ฑ</i><br/>
	๋‹ค์–‘ํ•˜๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
	</p>
	
	<h2>์…€ํ”„ ์—ฐ์Šต</h2>
	<p>๋ฌด์—‡์„ ์—ฐ์Šตํ•ด๋ณผ๊นŒ์š”?</p>
	<div style = "background-color : orange">
	๊ทค ๋จน๊ณ ์‹ถ๋‹ค <q>๊ทค</q> <br/>
	<strong>๋‚˜๋Š” ๊ทค์„ ์ข‹์•„ํ•ด!</strong>
	</div>
	
	
	
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>๋ฆฌ์ŠคํŠธ</title>
</head>
<body>

	<h1>๋ชฉ๋ก</h1>
	<h2>์ˆœ์ฐจ์  ๋ชฉ๋ก</h2>
	<p>ํ•™์› ์˜ค๋Š” ์ˆœ์„œ</p>
	<ol>
		<li>๋ˆˆ์„ ๋œฌ๋‹ค.</li>
		<li>์ผ์–ด๋‚œ๋‹ค.</li>
		<li>์”ป๋Š”๋‹ค.
			<ol type="i">
				<!-- i, I, a, A, 1 -->
				<li>์–‘์น˜ํ•œ๋‹ค.</li>
				<li>๋จธ๋ฆฌ ๊ฐ๋Š”๋‹ค.</li>
			</ol>
		</li>
		<li>์˜ท์„ ์ž…๋Š”๋‹ค.
			<ol type="1" start="5">
				<li>ํ‹ฐ์…”์ธ ๋ฅผ ์ž…๋Š”๋‹ค.</li>
				<li>๋ฐ”์ง€๋ฅผ ์ž…๋Š”๋‹ค.</li>
				<li>์ฝ”ํŠธ๋ฅผ ์ž…๋Š”๋‹ค.</li>
				<li>์‹ ๋ฐœ์„ ์‹ ๋Š”๋‹ค.</li>
			</ol>
		</li>
		<li>์ถœ๋ฐœํ•œ๋‹ค.
			<ol reversed = "reversed">
				<li>๋ฌธ์„ ์—ฐ๋‹ค.</li>
				<li>๊ณ„๋‹จ์„ ๋‚ด๋ ค์˜จ๋‹ค.</li>
				<li>์ง€ํ•˜์ฒ ์—ญ์œผ๋กœ ๊ฐ„๋‹ค.</li>
				<li>์ง€ํ•˜์ฒ ์„ ํƒ„๋‹ค.</li>
			</ol>
		</li>

	</ol>
	<hr />


	<h2>๋น„ ์ˆœ์ฐจ์  ๋ชฉ๋ก</h2>
	<b>์ง‘์œผ๋กœ ๊ฐ€๋Š” ์ˆœ์„œ</b>
	<ul>
		<li>15:15๊นŒ์ง€ ๊ฐ€๋ฐฉ์„ ์‹ผ๋‹ค.</li>
		<li>๊ฑด๋ฌผ ๋ฐ”๊นฅ์œผ๋กœ ๋›ฐ์–ด ๋‚˜๊ฐ„๋‹ค.</li>
		<li>
			<ul>
				<li>์ •๋ฅ˜์žฅ์œผ๋กœ ๊ฐ„๋‹ค.</li>
				<li>์ง€ํ•˜์ฒ ์—ญ์œผ๋กœ ๊ฐ„๋‹ค.</li>
				<li>๊ฑธ์–ด๊ฐ„๋‹ค.</li>
				<li>์‹œ๋™์„ ๊ฑด๋‹ค.</li>
			</ul>
		</li>
			<li>ํƒˆ ๊ฒƒ์„ ํƒ„๋‹ค.</li>
	
	</ul>
	
	<h2>์ •์˜ํ˜• ๋ชฉ๋ก</h2>
	<dl>
		<dt>(์ œ๋ชฉ)ํ•™์› ๊ฐ•์˜ ์‹œ๊ฐ„</dt>
		<dd>์˜ค์ „์‹œ๊ฐ„</dd>
		<dd>์ ์‹ฌ์‹œ๊ฐ„</dd>
		<dd>์˜คํ›„์‹œ๊ฐ„</dd>
	</dl>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- ์˜์—ญ ๊ตฌ๋ถ„ ์ง“๋Š” ํƒœ๊ทธ
		<p> : ๋ฌธ๋‹จ ์˜์—ญ์„ ์ง€์ •(๋ธ”๋Ÿญ ์š”์†Œ)
		<pre> : ์ž…๋ ฅํ•œ ๋Œ€๋กœ ๋ฌธ๋‹จ ์˜์—ญ ์ง€์ •(๋ธ”๋Ÿญ ์š”์†Œ)
		<div> : ์ค„๋ฐ”๊ฟˆ์ด ์ ์šฉ ๋จ.
		<span> : ์ค„๋ฐ”๊ฟˆ ์ ์šฉ ์•ˆ๋จ.	
	 -->	
	
	<h1>์˜์—ญ ๊ด€๋ จ ํƒœ๊ทธ</h1>
	<h3>div</h3> <!--์ค„๋ฐ”๊ฟˆ์„ ํ†ตํ•ด์„œ ์˜์—ญ์ด ์ง€์ •๋จ -->
		<div style = "background : pink; width : 100px; height : 100px;">์ฒ˜์Œ</div>
		<div style = "background : red;">์ค‘๊ฐ„</div>
		<div style = "background : skyblue; width : 100px; height : 100px;">๋</div>
		<hr/>
	<h3>span</h3> <!--๊ธ€์ž ์˜์—ญ๋งŒํผ๋งŒ ํ•˜์ด๋ผ์ดํŠธ ์ง€์ •๋จ -->
		<span style = "background : red;">์ฒ˜์Œ</span>
		<span style = "background : green;">๋‘์Œ</span>
		<span style = "background : blue;">์„ธ์Œ</span>
		<hr/>
</body>
</html>
PreviousHTML Day 2NextTrend & New Tech

Last updated

Was this helpful?