πŸ“Œ
wooaoe TIL
  • ICT λž€?
  • ORACLE DB SQL
  • λ°±μ€€ #2581번 JAVA 풀이
  • DEVEIW 2019 컨퍼런슀 ν›„κΈ°
  • λ°±μ€€ #4153번 μ§κ°μ‚Όκ°ν˜•JAVA 풀이
  • Cloud Computing κ³Ό AWS
  • JAVA
  • HTML
    • HTML Day 2
    • HTML Day 1
  • Trend & New Tech
  • SQL
Powered by GitBook
On this page

Was this helpful?

  1. HTML

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 5 years ago

Was this helpful?