Front

[HTML] 문서의 구조(1)

bkuk 2022. 8. 17. 16:29

1. <title> 태그

 - 제목을 지정하는 태그이며, 검색엔진이 웹페이지를 분석할 때 가장 중요하게 생각하는 태그

<head>
  <title>COVID-19</title>
  <meta charset="utf-8">
</head>

 

 

2. <meta> 태그

 - 이 웹페이지가 어떤 방식으로 저장되는지 알려주며, 어떤 방식으로 열어야하는지 알려주는 태그

 - 웹페이지가 저장된 방식과 여는 방식이 일치하지 않을 때 웹브라우저는 이상한 문자를 표시

</meta charset="utf-8">

 

 

3. <body> 태그

 - 문서의 본문을 정의하는 태그이며 제목, 단락, 이미지, 하이퍼링크 등과 같은 HTML 문서의 모든 내용이 포함

See the Pen Untitled by hbkuk (@hbkuk) on CodePen.

 

 

4. <head> 태그

 - <html> 태그와 <body> 태그 사이에 배치되며 문서 제목, 스타일, 스크립트 등을 정의함.

  <head>
    <meta charset="utf-8">
    <title>구구단</title>
    <style>
      h1{
        border-style: solid;
        border-width: 3px;
        margin: 3px;
        padding: 3px;
        border-top-color: blueviolet;
        border-left-color: royalblue;
        border-right-color: mediumpurple;
        border-bottom-color: slateblue;
        font-size: 30px; color:indigo; text-align: center;
      }
      #article{
        display: grid;
        grid-template-columns: 2fr 2fr 2fr 2fr;
      }
        @media (max-width: 850px){
          #article{
            display: grid;
            grid-template-columns: 1fr 1fr;
          }
        }
    </style>
  </head>

 

 

 * 별첨

  - <!doctype html>: 이 웹페이지가 HTML(HyperText Markup Language)로서 만들어졌다는 것을 표현하기 위한 코드