HTML문서에서
HTML기본구조는 작업중인 페이지에 필수로 들어가는 요소들 입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
1. Doctype
<!-- HTML5 -->
<!DOCTYPE html>
<!-- HTML 4.01 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- XHTML 1.1 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Document Type Declaration, DTD라고 문서형식선언이라하는데
각 버전마다 Doctype이 다른데 현재는 html5버전을 사용하고
작업중인 html문서에게 htm5버전으로 작업하겠다고 선언하는 것 이다.
2. html, head, body
<!-- 문서의 시작을 알림 -->
<html lang="ko">
<!-- 문서의 머리말 -->
<head>
<title>문서의 제목</title>
</head>
<!-- 문서의 본문: 브라우저에 보이는 부분 -->
<body>
</body>
</html>- html - 문서의 시작
lang속성을 적용하여 문서를 ko (한국어) 형식으로 선언한다 - head - 문서의 말머리
문서에 필요한 정보를 넣는다
meta요소, title요소, 외부스타일시트, 외부스크립트, style요소, script요소등을 넣을 수 있다. - title - 문서의 제목
브라우저 탭 위치에 제목형태로 보인다. - body - 문서의 본문
브라우저에서 보이는 부분이다. html의 meta요소를 제외하곤 모든 요소를 넣을 수 있다.
3. charset
<meta charset="UTF-8">html문서에 인코딩 하는 요소
알기 쉽게 설명한 블로그가 있어서 링크 걸어봅니다.
<meta charset="utf-8"> 의미와 필요성
html을 작성하시다 보면 영역에서 을 보셨을 거예요. 대부분 꼭 넣어야 하는 태그라고 명시를 해요. 그런데 왜 꼭 넣어야 하고 무엇을 의미할까요? 란?
antstudy.tistory.com
4. viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">뷰포트는 웹페이지에서 사용자가 볼 수 있는 영역으로 데스크탑, 태블릿pc, 모바일에서도 같은 배율로 화면에 보여질 수 있게 하는 꼭 필요한 요소입니다.
위 그림처럼 왼쪽은 viewport가 없는 경우이고 오른쪽은 viewport가 적용된 형태입니다
그림 출처
HTML meta tag
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'WEB > HTML기초' 카테고리의 다른 글
| HTML 인라인 요소: <strong>, <em>, <mark>를 통한 텍스트 강조 방법 (0) | 2023.09.07 |
|---|---|
| HTML <blockquote>, <q>, <cite>요소 (1) | 2023.09.05 |
| HTML문단요소 <P>요소 (1) | 2023.08.31 |
| HTML 제목요소 <h1>-<h6> (0) | 2023.08.30 |
| og:title과 twitter:title (0) | 2023.08.28 |