HTML5

Article

컴포넌트 설명

요약

HTML5의 Article과 동일.

Aside

$r_title(Aside)
<aside id="aside1" 
	style="position: 
		relative;width: 100px;
		height: 100%;
		float:left;
		clear:none;
		background-color:#FFFF80;">
	<w2:textbox id="textbox1" 
		style="position: relative;
			width: 150px;
			height: 23px;" 
			label="aside Contents">
	</w2:textbox>
</aside>
<xf:group id="group1" class=""
	style="position: relative;
		width:616px;
		height:100.0%;
		float:left;
		clear:none;
		background-color:#80FF80;">
	<w2:textbox id="textbox2" 
			style="position: relative;
				width: 150px;
				height: 23px;" 
			label="main Contents">
	</w2:textbox>
</xf:group>
<aside> 태그를 지원하는 브라우저 버전

브라우저

버전

Chrome

6.0

Internet Explorer

9.0

Firefox

4.0

Safari

5.0

Operea

11.1

속성

속성

설명

class

컴포넌트 class

id

컴포넌트 id

Audio

컴포넌트 설명

요약

Audio 사용을 지원.

주요 API

API

설명

autoplay

오디오를 자동 재생.

controls

오디오 컴포넌를 제어 - 재생, 정지, 탐색, 소리 등.

loop

오디오를 반복 재생.

muted

음소거.

preload

오디오 버퍼링을 정의.

  • auto: 페이지가 로딩되면서 오디오 전체를 로딩.

  • metadata: 페이지가 로딩되면서 메타데이터만 로딩.

  • none: 페이지가 로딩되면서 오디오 파일을 로딩하지 않음.

Audio 컴포넌트를 더블클릭하여 Audio 파일의 경로와 종류를 설정합니다. 경로는 절대경로를 입력해야 합니다.

파일 경로 주소

예) 프로젝트명 HTML5

--HMLT5

--------Audio.xml

--------audio.mp3


audo.mp3의 경로는 "/HTML5/audio.mp3" 입니다.

컴포넌트를 더블클릭하면 음원 파일의 위치를 지정할 수 있는 대화창이 열립니다.

Audio

MP3, Wav, Ogg 지원 브라우저

Browser

MP3

Wav

Ogg

Internet Explorer

YES

NO

NO

Chrome

YES

YES

YES

Firefox

YES

YES

YES

Safari

YES

YES

NO

Opera

YES

YES

YES

오디오 포멧 MIME Types

Format

MIME-type

MP3

audio/mpeg

Ogg

audio/ogg

Wav

audio/wav

<audio> 태그를 지원하는 브라우저 버전

브라우저

버전

Chrome

4.0

Internet Explorer

9.0

Firefox

3.5

Safari

4.0

Operea

10.5

Canvas

$r_title(Canvas)
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns:w2="http://www.inswave.com/websquare" xmlns:xf="http://www.w3.org/2002/xforms">
    <head>
        <w2:buildDate/>
        <xf:model>
            <xf:instance>
                <data xmlns=""/>
            </xf:instance>
            <w2:dataCollection baseNode="map">
            </w2:dataCollection>
        </xf:model>
        <script type="javascript"><![CDATA[
	        var c = document.getElementById("canvas1");
			var ctx = c.getContext("2d");
			ctx.fillStyle = "#FF0000";
			ctx.fillRect(0, 0, 300, 300);
        
         ]]></script>
    </head>
    <body>
    	<canvas id="canvas1" 
			style="position: relative;
				width:300px;
				height:300px;">
		</canvas>
    </body>
</html>
<canvas> 태그를 지원하는 브라우저 버전

브라우저

버전

Chrome

4.0

Internet Explorer

9.0

Firefox

2.0

Safari

3.1

Operea

9.0

Footer

$r_title(Footer)
<footer id="footer1" style="position: relative;
			width: 100%;
			height: 100px;
			border-top:1pt solid #000000;
			border-bottom:1pt solid #000000;
			border-left:1pt solid #000000;
			border-right:1pt solid #000000;">
	<xf:output id="output1" label=""
		style="position: relative;
		width: 150px;
		height:18px;
		padding-top:5px;
		padding-bottom:0px;">
		<xf:label><![CDATA[WebSquare5]]></xf:label>
	</xf:output>
	<xf:group id="group1" 
		style="height:23px;
		border-top:1pt solid #000000;
		border-bottom:1pt solid #000000;
		border-left:1pt solid #000000;
		border-right:1pt solid #000000;">
		
		<xf:output id="output2" label=""
			style="position: relative;
			width: 150px;
			height:18px;
			float:left;
			clear:none;
			padding-top:5px;
			padding-bottom:0px;">
			<xf:label><![CDATA[Contact Information]]></xf:label>
		</xf:output>

		<w2:anchor id="anchor1" outerDiv="false"
			style="position: relative;
			width: 100px;
			line-height: 23px;">
			<xf:label><![CDATA[support@inswave.com]]></xf:label>
		</w2:anchor>
	</xf:group>
</footer>
<footer> 태그를 지원하는 브라우저 버전

브라우저

버전

Chrome

6.0

Internet Explorer

9.0

Firefox

4.0

Safari

5.0

Operea

11.1

Header

소개 컨텐츠 또는 네비게이션에 사용되며 Header 컴포넌트는 <footer>, <address> 태그에서 사용할 수 없으며 <header> 태그 내에 또 다른 <header> 태그를 사용할 수 없습니다.

$r_title(Header)

<header id="header1" style="position: relative;width:371px;height:100px;">
  	 <h1>Internet Explorer 9</h1>
     <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
  	</header>
<header> 태그를 지원하는 브라우저 버전

브라우저

버전

Chrome

6.0

Internet Explorer

9.0

Firefox

4.0

Safari

5.0

Operea

11.1

Navigation

$r_title(Navigation)
<nav id="nav1" 
	style="position: relative;
		width:54.343365%;
		height:16px;
		margin: auto;
		margin-top: 10px;
		border-top:1pt solid #000000;
		border-bottom:1pt solid #000000;
		border-left:1pt solid #000000;
		border-right:1pt solid #000000;
		padding-top:4px;
		padding-bottom:0px;">
	<w2:anchor id="anchor1" outerDiv="false" class="left5"
		style="position: relative;
			width: 100px;
			height: 23px;
			float:left;
			clear:none;">
		<xf:label><![CDATA[Inswave Systems]]></xf:label>
	</w2:anchor>
	<w2:span id="span5"  label="|" class="left5" 
		style="position: relative ;
		float : left;">
	</w2:span>
	<w2:anchor id="anchor1" outerDiv="false" class="left5"
		style="position: relative;
			width: 100px;
			height: 23px;
			float:left;
			clear:none;">
		<xf:label><![CDATA[WebSquare5]]></xf:label>
	</w2:anchor>
	<w2:span id="span6"  label="|" class="left5" 
		style="position: relative ;
		float : left;">
	</w2:span>
	<w2:anchor id="anchor1" outerDiv="false" class="left5"
		style="position: relative;
			width: 100px;
			height: 23px;
			float:left;
			clear:none;">
		<xf:label><![CDATA[HTML5]]></xf:label>
	</w2:anchor>
	<w2:span id="span7"  label="|" class="left5" 
		style="position: relative ;
		float : left;">
	</w2:span>
	<w2:anchor id="anchor1" outerDiv="false" class="left5"
		style="position: relative;
			width: 100px;
			height: 23px;
			float:left;
			clear:none;">
		<xf:label><![CDATA[CSS3]]></xf:label>
	</w2:anchor>
	<w2:span id="span8"  label="|" class="left5" 
		style="position: relative ;
		float : left;">
	</w2:span>
	<w2:anchor id="anchor1" outerDiv="false" class="left5"
		style="position: relative;
			width: 100px;
			height: 23px;
			float:left;
			clear:none;">
		<xf:label><![CDATA[JavaScript]]></xf:label>
	</w2:anchor>r>
</nav>
<nav> 태그를 지원하는 브라우저 버전

브라우저

버전

Chrome

6.0

Internet Explorer

9.0

Firefox

4.0

Safari

5.0

Operea

11.1

Section

컴포넌트 설명

요약

HTML5의 WFrame과 유사.

Video

컴포넌트 설명

요약

Video 사용을 지원.