티스토리 뷰
728x90
반응형
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
728x90
반응형
'WEB > HTML기초' 카테고리의 다른 글
| 강조 <strong>요소와 <em>요소 (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 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- JavaScriptTips
- 코딩교육
- uiux
- 디자인팁
- padding
- Slick
- 반응형웹
- UI디자인
- css4
- 슬라이드플러그인
- boxmodel
- 포토샵합성
- 웹접근성
- slickAPI
- margin
- 피그마플러그인
- uxdesign
- CSS3
- 크로스브라우징
- uidesign
- 웹디자인
- JavaScript
- 프로그래밍기초
- 시멘틱마크업
- 스마트폰해상도
- Border
- 웹표준
- 자바스크립트숫자카운트
- css그리드
- css
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
글 보관함