반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

HTML5 기본 Semantic Tag 들 알아보기 -2-

2011. 12. 31. 09:45 | Posted by 솔웅


오늘도 어제에 이어서 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>
        &copy; 2011 Douglas All Right Reserved
    </footer>
</body>
<html>

대 부분 지난 글들과 같습니다.
다른 점은 지난 소스에 있던 <article> 대신 <hgroup>을 사용했는데요. 그것은 <h1>~<h6> 엘리먼트들을 그룹화하기 위해서 입니다.

이 <hgroup> 안에 <figure> 태그가 있는데요. 이것은 그 안에 이미지가 나올거라는 것을 알려 줍니다.

<footer> 바로 위에 보면 <iframe> 태그가 나오죠? 이건 전혀 새로운 건 아닙니다. 10년전에도 사용했었던 기능이니까요. 브라우저 안에 새로운 브라우저를 만들어서 그 안에 웹페이지를 표시할 수 있도록 만든겁니다.
처음것은 naver.com이 나오고 두번째 것은 yahoo.com이 나옵니다.
외부 싸이트뿐만 아니라 내부 웹페이지도 넣을 수 있습니다.

웬일인지 이 iframe은 많이 사용하지 않은 것 같네요.

다음시간에도 HTML5에 집중해서 새로운 태그들을 살펴 보겠습니다.
반응형

Comment