티스토리 뷰

HTML

HTML - Block /Inline

김소비요정 2021. 8. 22. 10:00

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>

'HTML' 카테고리의 다른 글

HTML - Semantic Tags  (0) 2021.08.23
HTML - Box / Item  (0) 2021.08.21
HTML - 기본 개념 / 구조  (0) 2021.08.20