HTML5 기본 개념
HTML5는?
HTML5는 차세대 웹 언어 규격으로 웹 문서를 만들기 위한 기본 프로그래밍 언어 HTML의 최신규격이다.
특히 현재 많이 사용되고 있는 엑티브X(Active X)나 플래시와 같은 플러그인 기반의 각종 프로그램을 설치하지 않아도 동일한 기능을 구현할 수 있고, 모바일 환경에서도 모두 호환된다.
HTML5는 2009년 구글의 웹 개발자 콘퍼런스인 구글 I/O 에서 HTML5를 데모로 시연하면서 차세대 웹 기술로 지원하겠다는 천명을 하면서 알려지기 시작했는데, 특히 스티븐 잡스가 애플 아이폰에 플래시 탑재를 거부하면서 대응 기술로 HTML5를 홍보하기 시작하기도 했다.
HTML5 기본문장구조와 기본태그
HTML5 기본문장구조와 기본태그는 우선 첫 시작에 <!doctype html>을 선언함으로서 시작하는데, HTML5로 작성된 것이라고 알려주는 역할을 한다. 이것을 DTD문이라고 하며, HTML5 문서로 인식할 수 있게 한다.
<html lan="ko">
<head>
<meta charset="UTF-8" />
<title>HTML5 기본개념</title>
</head>
<body>
<p>HTML5 기본문장구조와 기본태그</p>
<hr>
<h1>해딩태그 숫자가 작을수록 큰 글씨</h1>
<ol>숫자가 있는 목착>
<li>목차안의 하위 리스트</li>
</ol>
<ul>숫자없는 목차
<li>목차안의 하위 리스트</li>
</ul>
</body>
</html>
HTML4 VS HTML5
HTML4에서는 div로 묶어 id나 class명을 주었으나 HTML5에서는 div로 따로 묶지 않아도 되는 구조화된 마크업을 사용할 수 있게 되었다.
문서 구조에 적합하게 header, footer, nav, section 과 같은 구조화 된 마크업을 사용할 수 있다.
레이아웃 태그
<header>
보통 페이지나 해당 섹션의 가장 위에 위치하는데, <head> 태그와 혼돈하기 쉽다. 페이지 맨 위에 사용할 경우 일반적으로 사이트의 제목이 들어가고, 상단바나 검색창 등이 그 안으로 들어갈 수 있다. section이나 article, aside 등으로 묶어놓은 섹션 안의 헤더 용도로 사용할 수도 있다.
<nav>
navigation(내비게이션)의 약자로, 상단바 등 사이트를 안내하는 역활을 한다. <ul>을 넣어 목록 형태로 사용하기도 한다.
<main>
<main>은 두 개 이상 사용해서는 안 된다. 주로 문서의 주된 콘텐츠를 표시한다.
<article>
웹 페이지의 내용에 사용하는 태그로, 문서나 페이지, 사이트에서 독립적으로 배포 혹은 재사용 할 수 있는 섹션에 사용한다.
<section>
웹 페이지의 섹션에 사용하는 태그로, 웹 페이지를 각각의 파트로 구분하기 위해 쓰는 태그이다.
<aside>
<aside> 태그는 본문의 주요 부분을 표시하고 남은 부분을 설명하는 태그이다. 사이드바나 광고창 등 중요하지 않은 부분에 사용된다.
<footer>
페이지나 해당 파트의 가장 아랫부분에 위치하는 태그로, 사이트의 라이센스나 주소, 연락처 등을 넣을 때 주로 사용된다.
레이아웃 태그 예시
<html lang="ko">
<head>
<meta charset="utf-8">
<title>레이아웃 태그 예시</title>
</head>
<body>
<header>
<h1>사이트 제목</h1>
<h2>사이트 부제목</h2>
<nav>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</nav>
</header>
<main>
<article>
<p>본문 내용</p>
</article>
</main>
<aside>
사이드바 내용
</aside>
<footer>
<address>주소 내용</address>
</footer>
</body>
</html>
'홈페이지 Tip > HTML,CSS' 카테고리의 다른 글
| 주소검색 API를 활용하여 주소 검색 기능 구현하기(팝업 API) (0) | 2019.07.24 |
|---|---|
| html css 태그, div 중앙정렬 방법 6가지 (0) | 2016.11.16 |
