'html5'에 해당되는 글 11건

html 파일, css 파일, js 파일 상호간의 연관관계를 이해하고 예제를 실행볼려고 합니다.

뒤의 두파일 css 파일은 웹화면의 비쥬얼을 담당하고 js 파일은 행동대원이 되겠네요.

웹화면의 한페이지를 장식할 내용을 정하고 나면 구조적인 문제가 대두 됩니다.

어떻게 배치를 할지에 대한 디자인을 그려 봐야 합니다.

디자인이 완성되면 각 위치에 해당하는 태그가 결정되어서 영역을 형성하게 될겁니다.

이때 이 태그에 대한 각각에 대한 스타일리스트를 붙이고 이 스타일리스트들을 묶어 놓은것인 css 파일입니다.

사용법도 경우에 따라서 다양하게 사용할수 있기 때문에 어렵게 느껴집니다.

id 를 지정할때는 #id { } 로 스타일 지정해 줍니다. 일반적으로 tag { } 로 지정합니다.

만들어 놓은 css 파일을 html 파일과 연계하는 작업이 있습니다.

Head 태그에 <link> 태그의 속성값으로 지정해야 합니다.  <link href=" " rel="stylesheet">로 하면됩니다.

다른방식은 생각하지 않을려고 합니다.

js파일도 공통사항으로 적용되는 경우에는 Head태그에 <script src=" "></script>로 행동대원을 호출하면 됩니다.

화면의 특정한 위치에 해당하는 이벤트가 필요한 경우에는 따로 js 파일을 만들어서 

그 태그 뒤나 앞에서 <script src=" "></script> 에 지정해 주면 됩니다.

태그의 속성값이나 상태를 눈으로 확인하기 위한 프레임워크를 만들어보고자 합니다.

화면에 원하는 정보가 보여지고 그 하단에 showArea 라는 id 로 표시공간을 형성하고자 합니다.

순서와 상관없는 리스트형태의 공간으로  <ul id=showArea></ul> 라고 지정합니다.

그리고 이 태그에 스타일을 지정해 줘야 겠지요

#showArea { list-stype: none; margin: 0; padding: 0; }

이렇게 하면 보여줄 공간과 어떻게 보여줘야 하는지를 정했습니다.

행동대원을 교육시켜야 하겠네요

함수를 지정합니다. var show = function(title, value) { }

우리가 약속한 공간에 들어갈 리스트를 작성합니다.

var node = document.createElement('li');

공간을 showArea 라는 id 로 찾아서 그곳에 들어갈 태그를 추가시켜줍니다.

document.getElementById('showArea').appendChild(node);

다음으로 들어갈 내용을 텍스트 노드를 만들어 줍니다.

var result = document.createTextNode(title + ' : ' + value);

마지막으로 태그노드에 텍스트 노드를 붙여주면 됩니다.

node.appendChild(result);

각 화면에서 위에서 만들어 놓은 show 라는 함수를 호출하면 화면에 보여집니다.

var element = document.getElementById('cssElement');

show('id',element.id);

html5 문서의 시작은 동일하다. !DOCTYPE HTML, html, head 태그를 기입한다.

이 예제는 head 태그내에 style 과 script 를 기입한다.

style type="text/css"

#div1, #div2

{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}

스타일시트 를 지정하는데 스타일을 적용할 영역을 선택해주고( div1, div2 ) 속성을 지정한다.

요소를 Drag할수 있도록 만들기 위해서는 draggable 속성을 true 로 설정해야 한다.

그 다음으로 요소가 드래그되어질때 무슨일이 일어나야 하는지를 정해야 한다.

요소의 ondragstart 속성이 drag(event) 함수를 호출하는데 이 함수는 어떤 요소가 드래그 되어지는지를 지정한다.

드래그되어진 데이타가 드랍되어 지는 곳에 ondragover 이벤트가 호출되어 있어야 한다.

기본적으로 요소나 데이타는 다른 요소에 드랍되어 질수 없다. 드랍될수 있도록 하기 위해서는 요소의 기본적인 흐름을 차단해야 한다. ondragover 이벤트를 위한 event.preventDefault() 메소드를 호출함으로써 만들수 있다.

드래그된 데이타가 놓여 질때 drop(event) 이벤트가 발생한다.

드랍되어지는 요소의 ondrop 속성에서 drop 이벤트를 호출한다.

script type="text/javascript"

function allowDrop(ev)

{

ev.preventDefault();

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id); //이벤트가 발생하는 객체의 파라미터명을 텍스트로 해서 해당객체의 id값을 부여

}

function drop(ev)

{

var data=ev.dataTransfer.getData("Text"); // 드래그된 데이타를 얻어온다.

ev.target.appendChild(document.getElementById(data)); // 드래그된 데이타의 ID 값을 얻어서 드래그되어진 요소에 추가한다.

ev.preventDefault(); // 브라우저의 기본적인 데이타처리를 막기위해 호출한다.

}

body 태그를 기입한다.

div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"

// 요소를 Drag할수 있도록 만들기 위해서는 draggable 속성을 true 로 설정해야 한다.

<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31" />

div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"

HTML5의 문장구조는 간단하다.

!DOCTYPE html 로 지정하고 html 태그, body 태그로 입력한다.

audio controls="controls" 태그를 사용하여 객체를 입력한다.

source src="song.ogg" type="audio/ogg" 

source src="song.mp3" type="audio/mpeg"

지정된 소스를 시작할수 없을때 띄우는 메시지 Your browser does not support the audio element.

html 태그, body 태그로 닫아주면 된다.

그림처럼 웹페이지에 디자인을 하고자 한다.

어떻게 시나리오를 잡아서 진행해야 할까?

동영상 화면은 <VIDEO> 태그로 영역이 표시될 것이고 그 위에 버튼이 4개 있다. Play/Pause, Big, Small, Normal

화면밑에 Video courtesy of 텍스트가 있고 Big Buck Bunny 가 링크로 연결되어 있는 구조이다.

!DOCTYPE html 로 시작 html, body 영역을 설정한다.

영역설정 div를 지정하고 형태는 style="text-align:center" 로 해야 화면중앙에 버튼이 정열된다.

button onclick="playPause()" Play/Pause

button onclick="makeBig()" Big

button onclick="makeSmall()" Small

button onclick="makeNormal()" Normal

라인 줄을 띄우고 (BR사용)

video 태그로 id, width 를 설정한다. source 를 지정한다.

자바스크립트로 버튼의 클릭이벤트를 처리하도록 한다.

script type="text/javascript"

var myVideo=document.getElementById("video1") // Dom구조에서 video1 객체를 변수로 가져온다.

function playPause() // 객체에 대한 pause(), play() 함수를 호출한다. if myVideo.paused 속성 사용

function makeBig() // width : 560, function makeSmall() // width : 360, function makeNormal() // width : 420

텍스트에 대한 링크를 걸어준다.

Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>

웹페이지에서 HTML5 와 자바스크립트가 만나서 화려한 그래프를 보여줄수 있다.

그래프를 웹페이지에 표현하고 싶다면 이 친구를 써보는것도 괜찮을듯...

사이트 : http://www.rgraph.net/

html5 형식에서 동영상을 볼수 있도록 해주는 기능

<div>, <video> 태그를 사용하여 화면상의 동영상 위치를 지정한다.

<script> 로 /jwplayer/jwplayer.js 를 연결시킨다.

참조사이트 : http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/15995/jw-embedder-reference-guide