| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- 반응형홈페이지
- 크롬개발자도구
- bootstrap4
- Alert
- bootstrap
- 부트스트랩 badge
- 불교예절
- Bootstrap badge
- 반응형
- 부트스트랩구성요소
- bootstrap component
- 탁주
- 부트스트랩
- 부트스트랩 구성요소
- bootstrap 구성요소
- 반응형레이아웃
- html5
- 격자형레이아웃
- 부트스트랩4
- 반응형테스트
- 검색엔진봇
- bootstrap breafcrumb
- bootstrap alert
- 절하는법
- html5r기본구조
- Boowser width
- 개발자도구
- developertool
- Chrome
- 반응형웹
- Today
- Total
모래알 반응형웹
[HTML] HTML5 파일의 기본구조 본문
반응형웹 뿐만 아니라 최신 HTML 기능을 모두 사용하기 위해서는 HTML5 를 사용해야 한다.
<!-- -->는 주석을 달기 위해 사용. 이 태그 안에 있는 내용은 웹에서는 나타나지 않고 소스보기해야 볼 수 있다.
1. HTML 파일의 기본 구조
HTML 파일은 "DOCTYPE 선언"/ html / head / body"로 구성된다.
- DOCTYPE : (Document Type) HTML5를 사용할 지 HTML4를 사용할 지 선언.
- html : 이 페이지가 HTML 페이지라는 것과 언어 선언 / </html> 로 끝.
- head : 페이지에 대한 설명 / 스타일(CSS) / 자바스크립트 등이 포함 / <head>로 시작 ....</head>로 끝.
- body: 웹페이지의 컨텐츠 / <body>로 시작 ....</body>로 끝.
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
</body>
</html>
2. HTML 구조에 들어가는 주요 내용
<!DOCTYPE html>
- HMTL5를 사용한다는 선언
- html4의 경우 DOCTYPE 선언이 아래와 같음
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ko" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ko">
- 어떤 언어를 사용할지 지정 / 영문의 경우 <html lang="en">
<head>
- head 부분 시작
<meta charset="utf-8">
- 언어구조는 "utf-8" / 무조건 이것만 사용 / 예전에는 euc-kr 사용
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- 인터넷 익스플로러의 경우 최신버젼에 맞게 적용
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no">
- 화면크기 조절관련 / 모바일과 상관있음
- initial-scale=1.0 : 초기화면 scale 1:1
- minimum-scale=1.0 : 최소 scale: 1:1 / 1:1 이하로 줄여볼 수 없음
- maximum-scale=2.0 : 최대 scale 2배까지 키워 볼 수 있음
- user-scalable=no : 방문자가 스케일조절을 할 수 없음 / 있게 하려면 "yes"
<title>html5 연습</title>
- 브라우저 왼쪽 위에 나타나는 이 페이지의 제목 / 검색엔진이 체크하는 것 / 반드시 입력해야
<meta name="description" content="HTML5를 연습하는 페이지입니다.">
<meta name="author" content="모래알">
<meta name="keywords" content="모래알, 홈페이지제작, "/>
- description: 이 페이지에 대한 설명 / 검색엔진이 체크하는 것 / 반드시 입력해야
- author: 이 페이지 저작권자 / 검색엔진이 체크하는 것 / 반드시 입력해야
- keyword: 검색어 / 검색엔진이 체크하는 것 / 반드시 입력해야
<link rel="stylesheet" href="style.css">
- 이 페이지에 적용되는 css 파일 / 없으면 안들어가도 됨
<script src="plugins.min.js"></script>
- 이 페이지에 적용되는 자바스크립트 구문 / 없으면 안들어가도 됨
</head>
- head 부분 끝
<body>
- 홈페이지 컨텐츠가 들어가는 body 시작
<div>
홈페이지 내용
</div>
<script src="plugins.min.js"></script>
- 이 페이지에 적용되는 자바스크립트 구문 / 없으면 안들어가도 됨
- 자바스크립트 구문은 head 부분과 body 하단에 들어간다
</body>
</html>
[정리하면 아래의 내용만 들어가도 웹페이지 완성]
- 각 항목별 들여쓰기 (tab 사용)를 하면 작업 편함
<!DOCTYPE html>
<html lang="ko">
<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, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>html5 연습</title>
<meta name="description" content="HTML5를 연습하는 페이지입니다.">
<meta name="author" content="모래알">
<meta name="keywords" content="모래알, 홈페이지제작, "/>
</head>
<body>
<div>
홈페이지 내용
</div>
</body>
</html>
'HTML5' 카테고리의 다른 글
| [HTML] favicon(파비콘) 만들기 / 적용 (0) | 2018.03.28 |
|---|
