HTML 기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <script src="app.js"></script>
</body>
</html>
  • 위 HTML 기본 양식은 !, Enter로 불러올 수 있다.

    • <!doctype html>

  • 이 document가 html의 형식으로 되어있다는 것을 알려주는 것이다.

    • <head>

  • 태그 안에는 해당 웹페이지의 환경설정과 같은 것들을 작성한다.
  • 이는 메타 데이터(데이터를 위한 데이터)를 포함하기 위한 태그이다.
  • <body> 태그를 읽기 위한 정보를 표기한다.

    • <meta>

  • <meta charset="UTF-8">은 해당 코드들을 UTF-8(유니코드)의 인코딩 방식으로 읽어달라는 이야기이다. 이 코드를 작성하지 않으면 한글이 깨져서 나올 수 있다.
  • <meta>에 http-equiv는 해당 페이지에서 사용하는 HTTP 통신에 대한 정보를 나타낼 때 사용.
  • <meta>에 name과 content는 해당 페이지의 정보가 정의된 것으로 저자, 설명, 키워드, 뷰포트 등에 사용된다. 검색엔진에 적용된다.
  • viewport라는 것은 실제로 화면에 보여지는 영역을 의미한다. 여기서 뷰포트 크기를 기기 크기에 맞추고 scale을 1.0으로 조정하고 있다. 이 코드가 기기에 맞게 크기를 변환해준다. 해당 코드를 주석처리 후 검사창에서 스마트폰 화면을 보게 되면 크기 변환이 제대로 되지 않는 것을 볼 수 있다.

    • <title>

  • <title>과 </title>사이에는 브라우저 탭에 나타나는 제목을 적는다.
  • 검색엔진이 해당 웹페이지를 찾아낼 때 이를 토대로 하므로 검색엔진에 잘 검색되려면 중요하다.

    • <body>

  • <body> 태그 안에는 본문 내용이 들어간다. 이곳에 글을 쓰면 웹페이지에 그대로 나타난다.

    • [참고] Semantic Web

  • 태그 자체로 컨텐츠에 대한 의미를 명확화게 설명할 수 있는 것
  • 검색 엔진이 웹 페이지를 검색할 때, Semantic요소를 검색하게 된다.
  • 시멘틱 웹의 목표는 인터넷 데이터를 기계가 읽을 수 있게 만드는 것