반응형
오늘도 어제에 이어서 wiredwiki의 youtube 강좌를 기반으로 공부하고 정리해 보겠습니다.
오늘은 <hgroup> 과 이미지등을 표시하는 <figure> 그리고 HTML5는 아니지만 <iframe> 에 대해서 살펴 보겠습니다.
우선 <hgroup>은 <h1>~<h6> 엘리먼트들을 그룹화 하기때문에 하나 이상의 h 엘리먼트가 있어야 합니다. 이것들은 하나의 섹션으로 그룹화 됩니다.
<figure>는 이미지 등을 표현합니다. 그리고 <iframe>은 브라우저 내에 또 다른 브라우저를 갖을 수 있도록 합니다.
그림도 들어가고 iframe도 들어가고 하니까 한 화면에 다 나오질 않네요.
우선 이 화면엔 이전 글 소스에서 <article> 태그를 모두 지워버리고 <hgroup>을 사용했습니다.
그리고 그 안에 <figure> 태그를 사용했구요.
그리고 이 화면에서는 <iframe>을 사용해서 naver와 yahoo를 불러왔습니다.
아래 코드를 보시죠.
<!doctype html>
<html lang="en">
<head>
<title> Dougy's HTML5 Customized Video Player</title>
<meta charset="utf-8"/>
</head>
<body>
<header>
<span style="color:red;font-style:italic;font-family:verdana;">
Start HTML5 with Dougy </span>
<hr/>
</header>
<aside style="font-size:larger;font-style:italic;color:blue;float:right;width:130px">
Welcome to the world of HTML5 which opens you various possibilities for making
the web more accessible and easy to use.
</aside>
<nav>
<a href="html5syntax.html"> HTML5 syntax </a> |
<a href="html5forms.html"> HTML5 Forms </a> |
<a href="csscheats.html"> Css CheateCodes </a> |
<a href="http://coronasdk.tistory.com"> My Blog </a>
</nav>
<hgroup>
<h1> Sunrise at Sandy Hooks </h1>
<figure>
<img src="depart.jpg" width="200">
</figure>
<h2> Montauk is too far from here. </h2>
<figure>
<img src="drag.jpg" width="100">
</figure>
</hgroup>
<p> This is the dummy website which i have created to show you guys how the new HTML5 elements works</p>
<p> If you want to know for Corona SDK mobile application development tool
then come to <a href="http://coronasdk.tistory.com"> My Blog. </a></p>
<iframe src="http://www.naver.com" width="400" height="150"> </iframe><br>
<iframe src="http://www.yahoo.com" width="400" height="150"> </iframe><br>
<footer>
© 2011 Douglas All Right Reserved
</footer>
</body>
<html>
대 부분 지난 글들과 같습니다.
다른 점은 지난 소스에 있던 <article> 대신 <hgroup>을 사용했는데요. 그것은 <h1>~<h6> 엘리먼트들을 그룹화하기 위해서 입니다.
이 <hgroup> 안에 <figure> 태그가 있는데요. 이것은 그 안에 이미지가 나올거라는 것을 알려 줍니다.
<footer> 바로 위에 보면 <iframe> 태그가 나오죠? 이건 전혀 새로운 건 아닙니다. 10년전에도 사용했었던 기능이니까요. 브라우저 안에 새로운 브라우저를 만들어서 그 안에 웹페이지를 표시할 수 있도록 만든겁니다.
처음것은 naver.com이 나오고 두번째 것은 yahoo.com이 나옵니다.
외부 싸이트뿐만 아니라 내부 웹페이지도 넣을 수 있습니다.
웬일인지 이 iframe은 많이 사용하지 않은 것 같네요.
다음시간에도 HTML5에 집중해서 새로운 태그들을 살펴 보겠습니다.
오늘은 <hgroup> 과 이미지등을 표시하는 <figure> 그리고 HTML5는 아니지만 <iframe> 에 대해서 살펴 보겠습니다.
우선 <hgroup>은 <h1>~<h6> 엘리먼트들을 그룹화 하기때문에 하나 이상의 h 엘리먼트가 있어야 합니다. 이것들은 하나의 섹션으로 그룹화 됩니다.
<figure>는 이미지 등을 표현합니다. 그리고 <iframe>은 브라우저 내에 또 다른 브라우저를 갖을 수 있도록 합니다.
그림도 들어가고 iframe도 들어가고 하니까 한 화면에 다 나오질 않네요.
우선 이 화면엔 이전 글 소스에서 <article> 태그를 모두 지워버리고 <hgroup>을 사용했습니다.
그리고 그 안에 <figure> 태그를 사용했구요.
그리고 이 화면에서는 <iframe>을 사용해서 naver와 yahoo를 불러왔습니다.
아래 코드를 보시죠.
<!doctype html>
<html lang="en">
<head>
<title> Dougy's HTML5 Customized Video Player</title>
<meta charset="utf-8"/>
</head>
<body>
<header>
<span style="color:red;font-style:italic;font-family:verdana;">
Start HTML5 with Dougy </span>
<hr/>
</header>
<aside style="font-size:larger;font-style:italic;color:blue;float:right;width:130px">
Welcome to the world of HTML5 which opens you various possibilities for making
the web more accessible and easy to use.
</aside>
<nav>
<a href="html5syntax.html"> HTML5 syntax </a> |
<a href="html5forms.html"> HTML5 Forms </a> |
<a href="csscheats.html"> Css CheateCodes </a> |
<a href="http://coronasdk.tistory.com"> My Blog </a>
</nav>
<hgroup>
<h1> Sunrise at Sandy Hooks </h1>
<figure>
<img src="depart.jpg" width="200">
</figure>
<h2> Montauk is too far from here. </h2>
<figure>
<img src="drag.jpg" width="100">
</figure>
</hgroup>
<p> This is the dummy website which i have created to show you guys how the new HTML5 elements works</p>
<p> If you want to know for Corona SDK mobile application development tool
then come to <a href="http://coronasdk.tistory.com"> My Blog. </a></p>
<iframe src="http://www.naver.com" width="400" height="150"> </iframe><br>
<iframe src="http://www.yahoo.com" width="400" height="150"> </iframe><br>
<footer>
© 2011 Douglas All Right Reserved
</footer>
</body>
<html>
대 부분 지난 글들과 같습니다.
다른 점은 지난 소스에 있던 <article> 대신 <hgroup>을 사용했는데요. 그것은 <h1>~<h6> 엘리먼트들을 그룹화하기 위해서 입니다.
이 <hgroup> 안에 <figure> 태그가 있는데요. 이것은 그 안에 이미지가 나올거라는 것을 알려 줍니다.
<footer> 바로 위에 보면 <iframe> 태그가 나오죠? 이건 전혀 새로운 건 아닙니다. 10년전에도 사용했었던 기능이니까요. 브라우저 안에 새로운 브라우저를 만들어서 그 안에 웹페이지를 표시할 수 있도록 만든겁니다.
처음것은 naver.com이 나오고 두번째 것은 yahoo.com이 나옵니다.
외부 싸이트뿐만 아니라 내부 웹페이지도 넣을 수 있습니다.
웬일인지 이 iframe은 많이 사용하지 않은 것 같네요.
다음시간에도 HTML5에 집중해서 새로운 태그들을 살펴 보겠습니다.
반응형
'WEB_APP > HTML5' 카테고리의 다른 글
| HTML5 Storage 1 - Web Storage - (2) | 2012.01.10 |
|---|---|
| HTML5로 게임 만들기 워밍업 (0) | 2012.01.08 |
| HTML5 Form 공부하기 -2- (3) | 2012.01.02 |
| HTML5 Form 공부하기 -1- (0) | 2012.01.02 |
| HTML5 기본 Semantic Tag 들 알아보기 -3- (0) | 2012.01.01 |
| HTML5 기본 Semantic Tag 들 알아보기 -1- (1) | 2012.01.01 |
| HTML5 Web Storage -01- (2) | 2011.12.27 |
| HTML5 드래그 앤 드롭 하기 Drag and Drop (0) | 2011.12.26 |
| HTML5 Canvas 이용하기 - 04 - Image/Animation (0) | 2011.12.24 |
| HTML5 Canvas 이용하기 - 03 - (0) | 2011.12.24 |