카테고리 없음

HTML 5에 대하여 알아보겠습니다.

2name 2022. 5. 23. 19:20

HTML은 Hyper Text Markup Languag의 약자입니다. 

태그로 이루어진 웹의 가장 기본적인 언어죠. 
5는 HTML의 다섯 번째 버전이라는 의미입니다.
그러니까 바로 이전의 버전은 HTML 4라는 거죠.
 
태그는 < > 구조로 되어 있습니다.
< >로 시작해 </ >로 끝나죠.
 
구글의 메인 화면을 예로 들어볼까요?

구글의 메인 화면입니다.
그러면 구글 메인 화면의 구조를 볼까요?
 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>새 탭</title>
    <style>
      body {
        background: #FFFFFF;
        margin: 0;
      }

      #backgroundImage {
        border: none;
        height: 100%;
        pointer-events: none;
        position: fixed;
        top: 0;
        visibility: hidden;
        width: 100%;
      }

      [show-background-image] #backgroundImage {
        visibility: visible;
      }
    </style>
  </head>
  <body>
    <iframe id="backgroundImage" src=""></iframe>
    <ntp-app></ntp-app>
    <script type="module" src="new_tab_page.js"></script>
    <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
    <link rel="stylesheet" href="shared_vars.css">
  </body>
</html>
 
이렇게 되어있습니다. 
 
그럼 구글 메인 화면의 구조를 알아보겠습니다.
시작은 
<!doctype html>로 시작합니다.
이건 HTML의 문서 타입을 의미합니다. HTML 5로 매우 간단하게 정의되는 것으로 바꼈습니다.
 
<html>은 html의 시작을 의미하며, 가장 아랫쪽의 </html>은 html이 끝난다는 의미입니다.
모든 태그는 이 <html>과 </html> 사이에 존재합니다.
<head>와 </head> 사이에는 html 문서의 제목이나 설명 등이 들어가며, 문서에 적용된 스타일이 정의됩니다.
<body>와 </body> 사이에는 본문에 표시될 내용이 작성됩니다.