10. HTML5와 시맨틱 태그
header
nav
section
article
aside
footer
address
iframe
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
/* * {padding: 0; margin: 0;} */
.wrapper {width: 978px; margin: 0 auto;}
/* 공통 상단 */
header {background: url(images/bg.png) no-repeat; background-size: cover; text-align: right;
padding:10px 10px 50px;}
header h1 {color: #ffa;}
header h2 {color: #ed2;}
/* global navigation bar */
nav.gnb ul {list-style: none; background-color: black; height: 55px; margin: 0; padding-left: 50px;}
nav.gnb ul li {width: 150px; float: left; padding: 15px;}
nav.gnb ul li a {text-decoration: none; color: white; font-weight: bold;}
nav.gnb ul li a:hover {color: #ed2;}
article, aside {padding: 15px;}
article {width: 700px; float: left;}
aside {width: 200px; float: right;}
footer {clear: both; text-align: center; background: #222; color: #ddd; padding: 30px;}
</style>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<!-- <script>
//
document.createElement('header');
document.createElement('nav');
</script>
<style>
header, nav {display: block;}
</style> -->
</head>
<body>
<div class="wrapper">
<header>
<h1>Joandork</h1>
<h2>가장 제주다운 수산리집</h2>
</header>
<nav class="gnb">
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법</a></li>
<li><a href="#">예약 하기</a></li>
</ul>
</nav>
<article>
<section class="content">
<h2>요안도라 소개</h2>
<h3>요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다.</h3>
<p>성산의 날씨는 다음주 내내 높은 구름에... ... </p>
<p>오늘은 사진에 보이는 긴 돌담을 따라 ... ... </p>
<p>내일은 두달 여동안 밖거리에서 만든 ... ...</p>
<div class="banner">
<img src="images/banner2.png" width="700" height="233" alt="요안도라">
</div>
</section>
</article>
<aside class="sidebar">
<h3>알립니다</h3>
<p>게스트하우스 예약은 전화 070-###-#### ... ...</p>
<img src="images/2.jpg" alt="">
<img src="images/1.jpg" alt="">
<img src="images/4.jpg" alt="">
</aside>
<footer>
<address>
<p>제주특별자치도 남제주군 성산읍 수산리 000번지 요안도라</p>
<p>yoan##@naver.com</p>
</address>
<p>copyright ©. all reserved.</p>
</footer>
</div>
</body>
</html>
11장. HTML과 멀티미디어
object
audio
video
source
track
window media player
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
</head>
<body>
<audio src="media/bgsound.mp3" controls loop></audio>
<img src="images/bg2.jpg">
<video src="media/Painting.mp4" controls autoplay muted></video>
<video controls>
<source src="media/Painting.mp4" type="video/mp4">
<source src="media/Painting.ogv" type="video/ogv">
<source src="media/Painting.webm" type="video/webm">
<p>이 영상을 위해서는 HTML5를 지원하는 브라우저가 필요합니다.</p>
</video>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
body {background: black;}
h1,h2 {color: white;}
video, .layer {width: 640px; height: 360px; position: absolute; top: 86px; z-index: -1;}
.layer {background-color: #005;}
</style>
</head>
<body>
<h1>밤하늘을 수놓는 불꽃</h1>
<h2>추가적 내용</h2>
<h2>추가적 내용</h2>
<h2>추가적 내용</h2>
<h2>추가적 내용</h2>
<video controls autoplay muted loop>
<source src="media/Fireworks.mp4">
<source src="media/Fireworks.ogv">
<p>이 영상을 보려면 HTML5를 지원하는 브라우저를 사용하세요.</p>
</video>
<div class="layer"></div>
</body>
</html>
'HTML5' 카테고리의 다른 글
| 21. 02. 05. 13장- CSS3와 애니메이션 (0) | 2021.02.05 |
|---|---|
| 21. 02. 04. 12장- 선택자, 가상클래스 (0) | 2021.02.04 |
| 21. 02. 03. 09장 다단 편집, 표 스타일 (0) | 2021.02.03 |
| 21. 02. 02. 09장- CSS 포지셔닝 (0) | 2021.02.02 |
| 21. 02. 02. 08장- 레이아웃을 위한 스타일 (0) | 2021.02.02 |
