Block vs Inline
- Block : 한 줄에 하나 차지
- inline : 공간이 허용되면 태그 옆에 배치가 가능
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- Box -->
<header></header>
<footer></footer>
<section></section>
<div></div>
<span></span>
<!-- Item -->
<h1>h1</h1><!-- 안에 컨텐츠가 없으면 보여지지 않아 Box 로 간주할 수도 있지만, 컨텐츠를 알아서 꾸며주기 때문에 Item 요소로 본다.-->
<button>click</button>
<a href="https://google.com" target="_blank"> go google !! </a>
<!-- block vs inline -->
<p>There is a sentence. <b>This</b> is...</p>
<p>There is a sentence. <span>This</span> is...</p>
<p>There is a sentence. <div>This</div> is...</p>
<!-- ol, ul, li -->
<ol type="i" reversed> <!-- reversed 는 boolean 형태의 속성값-->
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>hello</li>
<li></li>
<li></li>
</ul>
<!-- input and type-->
<label for="input_name">Name</label>
<input type="text" id="input_name">
</body>
</html>
