πŸ’»/HTML

(41) [HTML] 2일 HTML λ ˆμ΄μ•„μ›ƒ

λ”°κΆˆ 2024. 4. 12. 13:55

 

<span>~</span>

  • ν…μŠ€νŠΈ λ²”μœ„ νƒœκ·Έ 
  • 인라인 μš”μ†Œμ— μŠ€νƒ€μΌμ„ κ·Έλ£Ήν™”ν•˜κ³  μ μš©ν•˜λŠ”λ° μ‚¬μš©
  • span νƒœκ·ΈλŠ” 인라인 레벨 νƒœκ·Έλ‘œ 쀄 λ°”κΏˆμ΄ μΌμ–΄λ‚˜μ§€ μ•ŠλŠ”λ‹€.
  • width,height 속성은 λ¬΄μ‹œλ˜λ©°, margin 속성은 쒌우 κ°„κ²©λ§Œ 반영되고, μƒν•˜ 간격은 λ°˜μ˜λ˜μ§€ μ•ŠλŠ”λ‹€.
  • 인라인 레벨 μš”μ†Œ 뒀에 곡백(μ—”ν„°,슀페이슀 λ“±)이 μžˆλŠ” 경우, μ •μ˜ν•˜μ§€ μ•ŠλŠ” 곡백이 μžλ™ μ§€μ •λœλ‹€. 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>span νƒœκ·Έ</h3>

<div style="background: green;">예제</div>

<!-- 인라인 νƒœκ·ΈλŠ” μ „ν›„ μ€„λ°”κΏˆμ΄ μΌμ–΄λ‚˜μ§€ μ•ŠλŠ”λ‹€. -->
<!-- 인라인 νƒœκ·ΈλŠ” 곡백(μ—”ν„°)이 μ‘΄μž¬ν•˜λ©΄ 4px μ •λ„μ˜ 여백이 생긴닀. -->
<span style="background: yellow;"> HTML</span>

<!-- 인라인 νƒœκ·ΈλŠ” width,height λ¬΄μ‹œ -->
<span style="background: gray; width: 300px; height: 50px">CSS</span>
<!-- γ…‘margin은 쒌우만 적용 -->
<span style="margin: 50px">javascript</span>
<span>JAVA</span>
<span>ORACLE</span>
<hr>

<!-- 인라인 νƒœκ·ΈλŠ” padding은 μ μš©λ˜μ§€λ§Œ μœ„/μ•„λž˜ νŒ¨λ”©μ€ λ‹€λ₯Έ μ˜μ—­μ„ μΉ¨λ²”ν•œλ‹€. -->
<div style="background: gray; height: 30px;">예제</div>
<span style="background: tomato; padding: 15px;">μŠ€ν”„λ§</span>
<div style="background: yellow; height: 30px;">예제</div>
<hr>


</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>span νƒœκ·Έ</h3>

<span style="background: gray; width: 100px;">HTML</span>
<span style="background: green; width: 100px;">CSS</span>
<span style="background: fuchsia; width: 100px">javascript</span>
<hr>

<!-- inline -block μš”μ†Œλ₯Ό 인라인으둜 λ°°μΉ˜ν•˜λ©΄μ„œ 블둝 레벨 속성을 지정 κ°€λŠ₯(width,height,...) -->
<span style="background: gray; width: 100px; display: inline-block;">HTML</span>
<span style="background: green; width: 100px;display: inline-block;">CSS</span>
<span style="background: fuchsia; width: 100px; display: inline-block;">javascript</span>
<hr>

<!--block: μš”μ†Œλ₯Ό 블둝 μš”μ†Œλ‘œ 지정 -->
<span style="background: gray; width: 100px; display:block;">HTML</span>
<span style="background: green; width: 100px;display:block;">CSS</span>
<span style="background: fuchsia; width: 100px; display:block;">javascript</span>
<hr>


</body>
</html>

 

 

 

 

μ‹œλ§¨ν‹± 

λ¬Έμ„œμ˜ ꡬ쑰와 λ°μ΄ν„°μ˜ 의미λ₯Ό 보닀 λͺ…ν™•νžˆ ν•˜κΈ° μœ„ν•œ μ‹œλ©˜ν‹± μš”μ†Œ, 검색 엔진 및 λ¬Έμ„œ 해석기 λ“±μ—μ„œ μ›Ή λ¬Έμ„œ νŒλ³„μ΄ μ •ν™•ν•˜κ³  μš©μ΄ν•΄μ§„λ‹€. 

 

<main> ν•΄λ‹Ή λ¬Έμ„œμ˜ 쀑심 주제 λ˜λŠ” μ£Όμš” κΈ°λŠ₯κ³Ό μ§μ ‘μ μœΌλ‘œ κ΄€λ ¨λ˜μ–΄ μžˆκ±°λ‚˜ ν™•μž₯λ˜λŠ” μ½˜ν…μΈ λ‘œ ꡬ성.λ¬Έμ„œ μ „λ°˜μ— 걸쳐 λ°˜λ³΅λ˜λŠ” λ‚΄μš©μ„ ν¬ν•¨ν•΄μ„œλŠ” μ•ˆλœλ‹€. 
<section> λ¬Έμ„œ λ‚΄μ—μ„œ 같은 의미의 ꡬ역을 λ‚˜λˆŒλ•Œ μ‚¬μš©
<article> λ¬Έμ„œλ‚΄μ˜ 독립적인 κΈ€, λ³Έλ¬Έ 등을 κ΅¬μ„±ν•˜λŠ” μ„Ήμ…˜. sectionκ³Ό μœ μ‚¬.
<footer> νŽ˜μ΄μ§€ ν•˜λ‹¨λΆ„μ˜ μ €μž‘κΆŒ μ •λ³΄λ‚˜ μ„œλΉ„μŠ€ 제곡자 정보 등을 μ œκ³΅ν•˜λŠ” λΆ€
<derails> 좔가적인 μ„€λͺ… νƒœκ·Έ 
<summary>  μ„ΈλΆ€ μš”μ•½ νƒœκ·Έ 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<style type="text/css">
* {
	margin: 0; padding: 0;
	box-sizing: border-box;
}

body > header, body > main, body > footer {
	width: 1100px;
	margin: 0 auto;
}

body > header {
	background: #d4f4fa;
	margin-top: 20px;
	padding: 20px;
	border: 1px solid #333;
}

main > nav {
	border: 1px solid #333;
	padding: 30px;
	text-align: center;
}

main > section {
	border: 1px solid #333;
	background: #fff;
	padding: 20px;
}

main > section > header {
	border: 1px solid #333;
	background: #fff;
	padding: 20px;
	margin-bottom: 10px;
}

main > section > article {
	border: 1px solid #333;
	background: #fff;
	padding: 20px;
	min-height: 300px;
	margin-bottom: 10px;
}

main > section > footer {
	border: 1px solid #333;
	background: #fff;
	padding: 20px;
}

main > aside {
	border: 1px solid #333;
	padding: 20px;
	height: 140px;
}

body > footer {
	background: #ffebff;
	padding: 20px;
	margin-bottom: 20px;
	border: 1px solid #333;
}

.title {
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	padding: 20px;
}

</style>

</head>
<body>

<header>
	<p class="title">header</p>
</header>

<main>

	<nav style="float: left; width: 20%; height: 650px;">
		<p class="title">nav</p>
	</nav>
	<section style="float: left; width: 60%; height: 650px;">
		<p class="title">section</p>
		
		<header>
			<p class="title">header</p>
		</header>
		
		<article>
			<p class="title">article</p>
		</article>
		
		<footer>
			<p class="title">footer</p>
		</footer>
	</section>
	<aside style="float: left; width: 20%; height: 650px;">
		<p class="title">aside</p>
	</aside>

</main>
<div style="clear: both;"></div>

<footer>
	<p class="title">footer</p>
</footer>

</body>
</html>