HTML5) Doctype 지정 HTML작성규칙 및 head 설정방법
안녕하세요?
왕소금 입니다.
이번시간에는
저번시간
에 이어
Doctype 지정하는것과
HTML작성규칙
head 부분 설정하는 방법에대해
간략히 알아보도록해요
HTML5 시작하기
1. Doctype 지정하기
1> HTML은 여러 버전이 존재하므로Doctype을 명시해야합니다.
2> 기존 Doctype 은 매우 길고 복잡한 DTD를 명시해야 했었습니다.
3> HTML5의 실용성 원칙으로 인해 짧아졌습니다.
4> <!DOCTYPE html>
2. HTML 작성 규칙
1> HTML의 마크업 명령은 요소라 부릅니다.
2> HTML은 대소문자를 구분하지 않습니다.
3> 요소는 콘텐츠와 구분을 위해서 꺽쇠로 둘러쌉니다. – 태그
<p>, <a>, <div>
4> 시작태그와 마침태그로 요소의 범위를 지정합니다.
<p>이것은 단락 입니다. </p>
5> 마침태그가 없이 단독으로 사용되는 요소도 있습니다.
<br>, <img>, <meta> 등
6> 요소의 속성은 속성명 = “속성값” 형식으로 기술합니다.
<img src=”img/logo.jpg” alt=”Company Logo”>
3. HTML의 구조
<!Doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
1> <html>은 HTML 코드 전체를 감쌉니다.
2> HTML은 <head>와 <body> 부분으로 나뉩니다.
3> <head>는 메타데이터와 스크립, CSS등이 위치합다.
4> <body>부분은 콘텐츠가 담기는 곳으로 웹 브라우저에 표시됩다.
<head> 설정
1. 타이틀 지정
1> HTML 파일의 제목으로 웹 브라우저 타이틀에 나타납니다.
2> <title>웹 페이지 제목</title>
2. 문자 인코딩
1> 사용하는 텍스트 에디터의 문자 인코딩과 HTML의 문자 인코딩과 동일해야
웹 브라우저에서 옳바르게 표시됩니다.
2> 유니코드인 UTF-8로 지정합니다.
3. 메타데이터
1> 메타데이터를 기술 하면 웹 검색에 유리합니다.
2> HTML에 대한 정보를 기록할 수 있습니다.
3> 메타데이터 기술 방법
<meta name="description"content="HTML5 와 Javascript 학습기초용">
<meta name="keywords" content="HTML5, CSS, JavaScript">
<meta name="author"content="Wang so gum">
<meta name=”copyright” content=”©2017 Hong gildong”>
<meta name=”reply-to” content=#######@#####.com>
<meta name=”date” content=”2017-05-25 T12:35:20+09:00”>
외부 파일 연결
1. HTML과 함께 사용되는 CSS와 자바스크립트는 다른 파일로 분리함이 원칙입니다.
2. 외부 CSS 파일 연결
<link rel=”stylesheet” href=”css/style.css”>
3. 외부 자바스크립트 파일 연결
<script src="js/script.js"></script>
지금까지 doctype지정과 heml 작성요령 규칙
그리고 head 설정방법을
간단히 알려드렸는데요
저도 들었던 강의를 더듬어
나름 정리를 했는데
쉽게 설명이 되었는지 모르겠습니다
다음시간에는
구조적 마크업의 이해
html5 섹션요소
그리고 그룹 콘텐츠 요소에 대해
알아보도록 할께요
제가 올린글들은
큰틀을 배우기 위한
아주 기초적인것에 불과해서
좀더 깊이있는 공부를 원하시면
좋은 교재를 참고로 하시면
좋겠습니다.
'배움터 > HTML5기초' 카테고리의 다른 글
| HTML5 기초 탄생과 의미 및 특징 (1) | 2017.05.26 |
|---|