DOCTYPE이란

DOCYPE이란

DOCTYPE은 document type의 약어입니다.

HTML은 한 개의 종류가 아니라 여러 종류가 있습니다. HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 등이 있습니다. HTML 종류에 따라 같은 코드의 HTML 파일을 실행했을 때 다른 결과가 나타납니다.

이러한 DOCTYPE을 선언했을 경우를 Standards Mode(표준모드)라 하고, 선언 하지 않은 경우를 quirks Mode(비표준 모드)라고 합니다.

표준모드는 HTML와 CSS 표준에 따라 렌더링이 되며, 비표준모드는 브라우저가 오래된 브라우저의 렌더링을 모방하도록 되어 있습니다.

표준 모드와 비표준 모드 차이를 보면,

IE 박스모델 버그
- 표준모드 : width 계산 시 padding, margin, border를 포함.
- 비표준모드 : width 계산시 padding, margin, border를 미포함.
Table 안의 font-size 상속
- 표준모드 : table안에서의 텍스트는 기본 font-size를 상속함
- 비표준모드 : table안에서의 텍스트는 기본 font-size를 상속 안 함.

표준모드 소스 코드

<!DOCTYPE html>
<html>
  <head>
    <title>Standards mode</title>
    <style type="text/css">
      body {
        font-size: 12px;
      }
      p {
        font-size: 100%;
      }
      div {
        margin: 20px;
        width: 200px;
        padding: 30px;
        border: 5px solid darkcyan;
      }
      table {
        border: 2px solid darkmagenta;
      }
    </style>
  </head>

  <body>
    <h1>Standards mode(표준 모드)</h1>
    <div>
      width:200px, margin:20px, padding:30px, border:5px.
    </div>
    <p>p 태그 안에 있는 글</p>
    <table>
      <tr>
        <td>table 안에 있는 글</td>
      </tr>
    </table>
  </body>
</html>

비표준모드 소스코드

<html>
  <head>
    <title>Quirks mode</title>
    <style type="text/css">
      body {
        font-size: 12px;
      }
      p {
        font-size: 100%;
      }
      div {
        margin: 20px;
        width: 200px;
        padding: 30px;
        border: 5px solid darkcyan;
      }
      table {
        border: 2px solid darkmagenta;
      }
    </style>
  </head>

  <body>
    <h1>Quirks mode(비표준 모드)</h1>
    <div>
      width:200px, margin:20px, padding:30px, border:5px.
    </div>
    <p>p 태그 안에 있는 글</p>
    <table>
      <tr>
        <td>table 안에 있는 글</td>
      </tr>
    </table>
  </body>
</html>