'Programming Languages/HTML5'에 해당되는 글 5건

  1. 2015.01.30 유투브 영상을 바로 나오게 태그하기
  2. 2010.11.08 드디어 HTML5..
  3. 2010.10.25 text/css , style 속성
  4. 2010.10.04 html로 포토샵 효과 주기
  5. 2010.09.06 신기술.. HTML5

유투브 영상을 바로 나오게 태그하기

Programming Languages/HTML5 2015. 1. 30. 13:46
옵션 등 설명은 생략한다.  

 

<iframe width="560" height="315" src="//www.youtube.com/embed/VuNIsY6JdUw" frameborder="0" allowfullscreen></iframe>

저작자표시

'Programming Languages > HTML5' 카테고리의 다른 글

드디어 HTML5..  (0) 2010.11.08
text/css , style 속성  (0) 2010.10.25
html로 포토샵 효과 주기  (0) 2010.10.04
신기술.. HTML5  (0) 2010.09.06
Posted by 독뽀
,

드디어 HTML5..

Programming Languages/HTML5 2010. 11. 8. 10:50


시작은 canvas를 이용한 입체 사각형 그리기!
이대로 하면 현재(2010. 11. 08)는 IE 8 에서 안돌아간다 ~_~
크롬에서는 정상 작동함.

"rectangle.js"

element = document.getElementById('idCanvas');
canvas = element.getContext('2d');

var x = 30, y = 30, width = 200, height = 100, alpha = 1;
var r = 224, g = 255, b = 255;

canvas.strokeRect(x, y, width, height);

for(i=0; i<4; i++) {
 x += 10, y += 10, width -= 20, height -= 20, alpha -= 0.1;
 r -= 30, g -= 30, b -= 30;

 canvas.globalAlpha = alpha;
 canvas.fillStyle = '#' + r.toString(16) + g.toString(16) + b.toString(16);
 canvas.fillRect(x, y, width, height);
}

"rectangle.htm"

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="utf-8">
 <title>Canvas 2D Context</title>
 <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head>
<body>
<canvas id="idCanvas" width=300 height=150></canvas>
<script src="rectangle.js"></script>
</body>
</html>




"circle.js"

var arcFill = function(canvas, x, y, r, g, b, radius) {
 canvas.beginPath();
 canvas.fillStyle = 'rgba(' + r + ', ' + g + ', ' + b + ', 0.8)';
 canvas.arc(x, y, radius, 0, Math.PI*2, false);
 canvas.fill();
}

var canvas = document.getElementById('idCanvas').getContext('2d');
arcFill(canvas, 50, 40, 255, 130, 130, 30);
arcFill(canvas, 50, 90, 43, 255, 40, 30);
arcFill(canvas, 100, 40, 64, 161, 255, 30);
arcFill(canvas, 100, 90, 158, 64, 255, 30);
arcFill(canvas, 75, 65, 255, 255, 223, 25);

"circle.htm"

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="utf-8">
 <title>Circle 2D Context</title>
 <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head>
<body>
<canvas id="idCanvas" width=300 height=150></canvas>
<script src="circle.js"></script>
</body>
</html>


dl : 용어와 설명을 나타내는 정의형 목록
dt : 용어를 나타내는 요소
dd : 설명을 나타내는 요소
저작자표시

'Programming Languages > HTML5' 카테고리의 다른 글

유투브 영상을 바로 나오게 태그하기  (0) 2015.01.30
text/css , style 속성  (0) 2010.10.25
html로 포토샵 효과 주기  (0) 2010.10.04
신기술.. HTML5  (0) 2010.09.06
Posted by 독뽀
,

text/css , style 속성

Programming Languages/HTML5 2010. 10. 25. 08:07


재미 없게도 아직 HTML4다.. 오래된..

<head> 와 </head> 사이에 넣어준다. <title> ~ </title> 위든 아래든 상관 없다. head 안이면 된다.

<style type="text/css">
   a:link {font-size:3; text-decoration:none; color:#000000}
   a:visited {font-size:3; text-decoration:none; color:#000000}
   a:hover {font-size:3; text-decoration:none; color:#000000}
   a:active {font-size:3; text-decoration:none; color:#000000}
</style>

...

<a href="http://www.google.com" target="_blank">조냉 구글!</a>

head 내에 선언하면 그 페이지는 자동으로 우리가 선언한 text/css를 따르게 된다.
link는 첫 로드 시 모양
visited는 방문 한 후의 모양
hover는 마우스를 갖다 댔을 때의 모양
active는 선택된 상태(tab 등으로)의 모양

간단한 스크립트를 이용한 배경색 바꾸기도 가능하다.

<a href="http://www.google.com" target="_blank" onmouseover="this.style.backgroundColor='#ececec'" onmouseout="this.style.backgroundColor='#ffffff'">조냉 구글!</a>

마우스 올리면 #ececec (옅은 회색)으로, 마우스가 벗어나면 원래 배경색(흰색)으로 바뀐다.

이거 말고도 또 한가지 스킬도 추가..
자바스크립트를 이요해서 즐겨찾기를 추가하는 링크를 만들기다.

<script language="javascript">
var favoriteURL="http://www.google.com";
var favoriteTitle="Google";
function addMySiteToFavorite() {
   if (document.all) {
      window.external.AddFavorite(favoriteURL, favoriteTitle);
   }
}
</script>

이제 위 스크립트에서 생성한 함수를 사용할 수 있다.(addMySiteToFavorite())

<a href="javascript:addMySiteToFavorite()">즐겨찾기!</a>

뭐 요기까지..

저작자표시

'Programming Languages > HTML5' 카테고리의 다른 글

유투브 영상을 바로 나오게 태그하기  (0) 2015.01.30
드디어 HTML5..  (0) 2010.11.08
html로 포토샵 효과 주기  (0) 2010.10.04
신기술.. HTML5  (0) 2010.09.06
Posted by 독뽀
,

html로 포토샵 효과 주기

Programming Languages/HTML5 2010. 10. 4. 11:43


<html>

<head>
<title>실습 2010-10-04</title>
</head>

<body>

<img src="https://t1.daumcdn.net/cfile/tistory/166BD10B4BAAAB187A" width=300 height=200 alt="원본">
<img src="https://t1.daumcdn.net/cfile/tistory/166BD10B4BAAAB187A" width=300 height=200 alt="포토샵 효과(Alpha) 주기" border=5 style="filter:alpha(opacity=70, style=2, finishopacity=1)"><br><br>
<img src="https://t1.daumcdn.net/cfile/tistory/166BD10B4BAAAB187A" width=300 height=200 alt="xray()" border=5 style="filter:xray()">
<img src="https://t1.daumcdn.net/cfile/tistory/166BD10B4BAAAB187A" width=300 height=200 alt="blur(direction=160, strength=50)" border=10 style="filter:blur(direction=160, strength=50)"><br><br>

</body>

</html>

참고로 저장해봤자 원본으로만 저장된다.. 스샷을 찍는게 현명.

원본

포토샵 효과(Alpha) 주기

포토샵 효과(Blur) 주기

저작자표시

'Programming Languages > HTML5' 카테고리의 다른 글

유투브 영상을 바로 나오게 태그하기  (0) 2015.01.30
드디어 HTML5..  (0) 2010.11.08
text/css , style 속성  (0) 2010.10.25
신기술.. HTML5  (0) 2010.09.06
Posted by 독뽀
,

신기술.. HTML5

Programming Languages/HTML5 2010. 9. 6. 17:42
아.. HTML 중딩 이후 접었는데 이 나이 먹고 다시 하게 될줄이야..

물론 신기술인데다가 이전과는 비교도 안되는 퍼포먼스 하며 스킬들이 있지만..

뭐랄까.. DHTML 등 귀찮은 것 투성이들이 나오면서 자바스크립트와 플래쉬의 짜증들까지 더해져서 웹은 멀리하게 됐는데..

어쩌다가 HTML5를 공부하게 되었다.. (다음 주 부터..)

책은 그리 많지 않은듯..

HTML5 차세대 웹 표준. 기술   



라는 책이고..

가격이 좀 부담.. -_-;; (원가 거금 \35,000)

하지만 저자 분께서 친절하게도 까페를 만들어서 스터디도 도와주고 질답도 활발히 이루어지는듯..

이건 아마도 찬찬히 올릴듯..
저작자표시

'Programming Languages > HTML5' 카테고리의 다른 글

유투브 영상을 바로 나오게 태그하기  (0) 2015.01.30
드디어 HTML5..  (0) 2010.11.08
text/css , style 속성  (0) 2010.10.25
html로 포토샵 효과 주기  (0) 2010.10.04
Posted by 독뽀
,

티스토리툴바