html 구조

h.yeon·2023년 6월 3일
0

html에 대해 알아보자!

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
  
</body>
</html>

위 코드는 VSstudio나 온라인 에디터에서 ! + tab 을 눌렀을 때 나오는 코드들이다. 코드들을 하나 하나 들여다보자.

<html lang="en">

이 사이트가 주로 어떤 언어로 사용되는지 표시하는 영역이다.
코딩하면서 그동안 이부분에 깊게 생각한 적은 없었지만, 아래
글을 읽고 lang태그의 언어에 따라 스크린리더기가 읽히는걸 알게되었다.
(https://nuli.navercorp.com/community/article/1132824)

<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>
</head>

코드를 하나 하나 분석해보자. !!!
1. head로 감싼 부위는 웹 브라우저 내용에 노출되지 않는 부분이다.
2. meta charset="UTF-8" 우리가 가끔 웹이나 메모장 보면, 퀅?꽔가 뜰 때있는데 이부분이 html의 body부분의 한글을 읽을 수 있게 인코딩하는 기능을 한다.
3. title 웹 브라우저를 킬 때 주소창 위에 표시되는 이름이다.
4.meta http-equiv="X-UA-Compatible" 부분은 IE 버전 여러 버전 중 가장 최신버전으로 동일한 화면을 보여주는 기능이다.
5. meta name="viewport" 사용자의 화면 아이폰이면 아이폰
안드로이드면 안드로이드처럼 그 크기에 맞게 화면을 보여주겠다는 의미이다.

<body>
  <p>안녕하세요</p>
</body>

//출력: 안녕하세요

body 테크는 화면에 보이는 모든 컨텐츠,글귀,이미지 등을 보여주는 집합소같은 곳이다.
body tag 안에는 span,div, h1,h2... 등 수 많은 테그들로 글 및 컨텐츠를 표현한다.

profile
배운 내용을 기록으로

0개의 댓글