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... 등 수 많은 테그들로 글 및 컨텐츠를 표현한다.