WEB UIUX/HTML
[HTML]html문서의 기본구조
카이아
2022. 8. 24. 22:45
html의 기본 문서구조를 알아보자
문서를 만들기전 알아야 할것
반드시 확장명은 .html로!
꺽쇠(<>)가 붙은것 하나하나가 태그(Tag)
작성한 태그를 닫을땐 </태그명> 으로 닫아주기! ex. <div></div>
vs code에 들어가 새 문서를 만들고
! + TAB 또는 ENTER를 누르면
<!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>짜잔! 이런 기본 구조가 생성이 된다.
문서구조를 하나씩 뜯어보자
<!DOCTYPE html>
웹 브라우저에게 '이제부터 우리가 처리할 문서는 HTML5문서야!' 라고 알려주는 것이다.
<html lang="en">
웹 문서 시작을 알리는태그로 작성할 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그이다.
lang옆의 en은 문서의 언어가 영어라는뜻, 우리는 한글문서를 주로 작성하니 보통 ko로 수정해준다.
<head>
브라우저에서는 보이지는 않으나 페이지제목 및 디자인을 담당하는 CSS스타일 이나 여러가지 동적기능을 수행하는 스크립트등을 넣어주는 머릿말영역이다.
<title>
브라우저의 제목표시줄에 표시될 내용이다.
<body>
실제적으로 브라우저에 출력될 내용이다.
<meta>
문자 인코딩 방법과 문서의 키워드와 요약정보를 지정한다.