HTML 공부

MOON·2021년 2월 10일
0

태그 에러가 있어도 브라우저는 똑똑하기 때문에 브라우저는 정상 출력됨

validator.w3.org 에서 태그의 유효성 확인할 수 있다.

Document and website Structure

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

큰 그림을 먼저 본다.

웹사이트는 커다란 박스안에 작은 박스들로 구성되어 있다.
웹사이트를 바라볼 때 작은 단위로 바라볼 수 있어야 한다.

박스 모델로 바라보기

태그

  1. BOX
    header, nav, main, aside, footer ,div, span, form 등
    섹션으로 나눌 수 있는 것

  2. ITEM
    a, button, input, label, img 등
    사용자에게 보여지는 태그들

    • Block 레벨 태그
    • Inline 레벨 태그
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <!-- Box vs Item -->
  <header></header>
  <footer></footer>
  <section></section>
  <div></div>
  <span></span>
  
  <h1>H1</h1>
  <button></button>
  
  <!-- a -->
  <a href="https://google.com" target=_blank>Click</a>
  
  <!-- Block vs Inline -->
  <p>This is a sentence. <b>That</b> is..</p>
    <p>This is a sentence. <span>That</span> is..</p>
      <p>This is a sentence. <div>That</div> is..</p>
  
  <!-- ol, ul, li -->
  <ol type='I' reversed start="20">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>
  
  <ul>
    <li>Hello</li>
    <li>HTML</li>
    <li>CSS</li>
  </ul>
  
  <!-- input -->
  <label for="input_name">Name: </label>
  <input id="input_name" type="password">
  
</body>
</html>

0개의 댓글