index.html

<!DOCTYPE html>
<html lang="kr" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>html_study</title>
  </head>
  <body>
  <!-- div.container>div.item.item${$}*10 -->
  BOX : header, section, footer, article, nav, div, aside, span, main, form
  <br>
  ITEM : a, video, button, audio, input, map, label, canvas, img, table
  <!-- BOX VS ITEM -->
  <p>BOX는 안에 내용이 없으면 사용자에게 보여지지 않는다</p>
  <header>header</header>
  <header></header>
  <footer>footer</footer>
  <footer></footer>
  <section>section</section>
  <section></section>
  <div>div</div>
  <div></div>
  <span>span</span>
  <span></span>

  <p>H1은 박스와 같은 특성이지만 박스는 아니라고 본다 (좀 특별)</p>
  <h1>H1</h1>
  <h1></h1>

  <a href="www.naver.com" target="_blank">네이버</a>

  <!-- Block과 Inline -->
  <!-- b, span은 inlin이고 div는 block이기 때문에
  자동줄바꿈이 일어(css를 통해 수정가능) -->
  <p>html를 공부합니다. <b>css</b>를 공부합니다.</p>
  <p>html를 공부합니다. <span>css</span>를 공부합니다.</p>
  <p>html를 공부합니다. <div>css</div>를 공부합니다.</p>

  <!-- ol, ul, li -->
  ol>li*3(tab)이런식으로 쉽게 작성가능하다
  <ol reversed>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>
  <ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <!-- Input -->
  <label for="">input :</label>
  <input id="input_name" type="text">
  <input id="input_name" type="button">
  <input id="input_name" type="checkbox">
  <input id="input_name" type="color">
  <input id="input_name" type="file">
  <input id="input_name" type="password">

  </body>
</html>