티스토리 뷰
HTML5의 특징
기존 HTML과의 호환성 유지
실용적 설계 : 느슨한 문법, 효율적인 추가 요소, 안전한 보안
표현과 내용의 완벽한 분리
플러그인이 없이 각종 미디어 처리 및 동적인 작동 : 캔버스
최신 웹 기술 수용 : 지오로케이션, 웹소켓, 웹스토리지, 웹워커 등
HTML 작성 방법
- DOCTYPE 지정하기
HTML은 여러 버전이 존재하므로 Doctype을 명시해야 한다.
기존 Doctype은 매우 길고 복잡한 DTD를 명시해야 했었다.
HTML5의 실용성 원칙으로 인해 짧아졌다.
<!DOCTYPE html>
- HTML 작성규칙
HTML의 마크업 명령은 요소라 부른다.
HTML은 대소문자를 구분하지 않는다.
요소는 컨텐츠와의 구분을 위해서 꺽쇠로 둘러싼다 - 태그 (ex: <p>, <a>, <div>...)
시작태그와 마침 태그로 요서의 범위를 지정한다. (ex: <p>이것은 단락입니다.</p>)
마침태그 없이 단독으로 사용되는 요소도 있다. (ex: <br>, <img>, <meta>...등 )
요소의 속성은 속성명 = "속성 값" 형식으로 기술한다. (ex: <img src="img/logo.jpg" alt="Company Logo">)
- HTML 의 구조
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html><html>은 HTML 코드 전체를 감싼다.
HTML은 <head> 와 <body> 부분으로 나뉜다.
<head>는 메타데이터와 스크립트, CSS등이 위치한다.
<body>는 컨텐츠가 담기는 곳으로 웹 브라우저에 표시된다.
<head> 설정
- 타이틀 지정
HTML 파일의 제목으로 웹브라우저 타이틀에 나타난다.
<title>웹 페이지 제목</title>
- 문자 인코딩
사용하는 텍스트 에디터의 문자 인코딩과 HTML의 문자 인코딩과 동일해야 웹 브라우저에서 올바르게 표시된다. (ex: euc-kr, UTF-8 ....등이 있다.)
- 메타데이터
메타데이터를 기술하면 웹 검색에 유리하다
HTML에 대한 정보를 기록할 수 있다.
(ex: 기술 방법 예)
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content=""/>
<meta name="copyright" content=""/>
<meta name="reply-to" content=""/>
<meta name="date" content=""/>외부파일연결
HTML과 함께 사용되는 CSS와 자바스크립트는 다른 파일로 분리함이 원칙이다.
외부 CSS 파일 연결 (ex: <link rel = "stylesheet" href = "css/style.css">)
외부 자바스크립트 파일 연결 (ex: <script src = "js/script.js"></script>)
'HTML5' 카테고리의 다른 글
| [HTML5] DATA 속성 사용법 (0) | 2019.01.26 |
|---|---|
| 그룹 컨텐츠 요소 (0) | 2018.10.27 |
| HTML5의 섹션요소 (0) | 2018.10.27 |
- Total
- Today
- Yesterday