블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
HTML/HTML5 (4)
XML/XHTML (2)
CSS (22)
WEB2.0 (8)
XForms (3)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

'Publisher/HTML/HTML5'에 해당되는 글 4건

  1. 2013.03.04 [HTML5] Progress Bar CSS입히기 2
  2. 2010.03.09 SVG와 CANVAS사이의 선택 16
  3. 2009.04.10 HTML5 Gallery 4
  4. 2008.08.19 웹페이지 소스보기 금지

[HTML5] Progress Bar CSS입히기

Publisher/HTML/HTML5 / 2013. 3. 4. 17:09





<progress> 요소는 HTML5 에 새로이 추가된 시맨틱 태그입니다.

각 브라우저별로 별도로 디스플레이되는 관계로 디자인 하기가 까다로운것이 사실입니다.

이번에는 이러한 Progress 요소에 CSS를 입히는 방법에 대해서 알아보도록 하겠습니다.


그전에 디자이너라면 알아두어야할 Progress Bar 디자인 35 를 먼저 읽어 보시길 권합니다.



간단한 방법

원본: http://www.hongkiat.com/blog/html5-progress-bar/



마크업

Progress 요소는 다음과 같이 마크업을 작성합니다.


<progress value="10" max="100">

     <strong>Progress : 10% </strong>

</progress>  


일반적으로 위와같이 작성하였을 경우 윈도우와 OS X에서 보이는 화면은 다음과 같이 브라우저 디폴트로 저장됩니다.

굵게 표현된 부분은 Progress Bar의 fall back (대체) 요소로 사용합니다. Progress bar를 지원하지 않는 브라우저를 위한 것인것은 대부분들 다 아시죠?





스타일시트 작성


progress {  

    background-color: #f3f3f3;  

    border: 0;  

    height: 18px;  

    border-radius: 9px;  

}  


그러나 위와 같이 작성하여도 아래와 같이 각 브라우저별로 다르게 화면에 출력됩니다.





파이어폭스에서는 Progress Bar에 스타일은 적용되나 애니메이션이나 Progress Bar의 Value에는 스타일이 적용되지 않으며, 크롬브라우저와 사파리 브라우저는 브라우저의 기본 스타일 및 OS플랫폼의 스타일이 제거되고 Webkit Style이 적용됩니다.


웹킷계열의 브라우저에서는 위의 마크업이 다음과 같이 본연의 요소와 값 요소로 해석됩니다.

<progress>  

    ┗ <div> ::-webkit-progress-bar  

         ┗ <div>::-webkit-progress-value  



따라서 스타일시트도 다음과 같이  Progress 본연의 스타일과 Value값을 별도로 작성해 주셔야 합니다.


progress::-webkit-progress-bar {  

    /* style rules */  

}  

progress::-webkit-progress-value {  

    /* style rules */  

} 



파이어폭스의 경우에는 웹킷계열과 같게 Vendor-prefix 및 가상선택자를 사용하지만 아래와 같이 하나만 쓰는것이 다릅니다.


progress::-moz-progress-bar {  

    /* style rules */  

}   



결론적으로 Progress Bar의 스타일시트를 바꾸시려면 다음과 같이 작성합니다.


progress {  

    /* style rules */  

}  

progress::-webkit-progress-bar {  

    /* style rules */  

}  

progress::-webkit-progress-value {  

    /* style rules */  

}  

progress::-moz-progress-bar {  

    /* style rules */  

}  




애니메이션 처리


애니메이션 처리의 경우 Progress bar의 min 값과 max값을 계산하여 자바스립트로 구현합니다.

jQuery라이브러리를 이용하여 구현할 경우 다음과 같이 마크업을 작성합니다.

0에서 시작하여 max=100 까지 애니메이션을 구현합니다.


<progress id="progressbar" value="0" max="100"></progress>  


스크립트는 setInterval을 이용하여 부드러운 효과를 주기위해 (1000 / max) * 5 ms 마다 구현하도록 합니다.


$(document).ready(function() {  

    var progressbar = $('#progressbar'),  

        max = progressbar.attr('max'),  

        time = (1000/max)*5,      

        value = progressbar.val();  

  

    var loading = function() {  

        value += 1;  

        addValue = progressbar.val(value);  

          

        $('.progress-value').html(value + '%');  

  

        if (value == max) {  

            clearInterval(animate);                      

        }  

    };  

  

    var animate = setInterval(function() {  

        loading();  

    }, time);  

}; 



최종소스 다운로드 : 

source.zip





Progress bar 지원브라우저 현황


 CanIUse.com, 에 따르면 HTML5 progress 요소는 아래 브라우저에서 지원합니다: Firefox 16+, Chrome 8+, Safari 6+ and Opera 11+.









고급 CSS 먹이기

출처: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/




소스다운로드:

progressbar.zip






Reference Site






HTML5의 FileAPI 과 Drag and Drop, XMLHttpRequest 2 를 이용한 파일업로드, 다운로드시 유용하게 사용하시길 바랍니다. ^^*





저작자표시 비영리 변경금지

'Publisher > HTML/HTML5' 카테고리의 다른 글

SVG와 CANVAS사이의 선택  (16) 2010.03.09
HTML5 Gallery  (4) 2009.04.10
웹페이지 소스보기 금지  (0) 2008.08.19
Post by 넥스트리소프트 데꾸벅(techbug)
, |

SVG와 CANVAS사이의 선택

Publisher/HTML/HTML5 / 2010. 3. 9. 21:45



HTML5에 대한 내용을 정리하기로 마음 먹으면서 하나하나씩 정리해 갑니다.
오늘은  오페라개발자센터에서 작성한 <Canvas>와 <SVG>관련 포스트를 참조하여 SVG와 Canvas태그에 대해서 알아보도록 하겠습니다.



새로운 웹기술의 목적은 지원하지 않는 브라우저에서도 동작하게끔 크로스브라우저를 지원합니다. 예를 들면 2010년 03월 현재 나온 브라우저에서 부분적으로만 지원하는 SVG나 CANVAS를 모든 브라우저에서 지원하게끔 대체(Fallback)기술들이 존재합니다. Raphaёl로 구현가능하고 <CANVAS>는 ExCanvasJavascript Library로 구현이 가능합니다. 심지어 MS의 익스프로러도 SVG에 관심을 보이고 있고 향후 폭넓게 지원할 것으로 보입니다.  제목과 같이 새로운 프로젝트에 어떤 기술이 적합할지 선택하는것이 점점 더 어려워 질것입니다.

HTML5 Canvas와 SVG 두 웹기술은 브라우저안에서 풍부한 그래픽을 만들어내는 것이나 이 두개는 근본적으로 서로 다릅니다.  이 포스트에서 서로 다른점에 대해서 밝혀보고, SVG와 Canvas 를 효과적이고 적절하게 사용하기 위해 필요한 지식에 대해 알아보고자 합니다.




SVG (Scalable Vector Graphics)

SVG 는 XML기반 표준 벡터 그래픽 포맷입니다. SVG 컨텐츠는 정적일수 있으며 인터랙티브하고 애니메이션이 가능합니다 즉 매우 유연하다는 뜻이죠. CSS로 SVG 를 스타일링 할수 있고, SVG DOM을 이용하여 동적인 비헤이비어(Behaviour)를 추가할수 도 있습니다. 물론 한개의 파일안에 SVG 텍스트가 있기때문에 상대적으로 접근 또한 가능합니다. 그리고 <object>태그를 이용하여 표준 (X)HTML안에 SVG  컨텐츠를 추가할 수도 있습니다.

좌측 이미지와 같이 SVG를 이용한 원형 샘플이 있습니다 (소스는 아래에..). 간단히 확대/축소 애니메이션을 구현한 것이다. 오페라와 Webkit기반의 웹브라우저에서 동작합니다 (아래 소스로는 FF 와 IE에서는 애니메이션이 작동하지 않습니다.)

SVG를 이용하면 간단한 벡터 그래픽과 애니메이션이상으로 많은 것들을 할 수 있으며  스크립트를 사용하여 좀더 인터랙티브한 웹애플리케이션을 개발할 수도 있습니다. SVG 에 대해서 좀더 자세히 알고자 한다면 오페라 개발자센터의 " SVG:Evlolution, Not Revolution"을 참조하세요.



<svg style="margin:10px" version="1.1" width="320" height="320" xmlns="http://www.w3.org/2000/svg"> 
  <defs> 
    <radialGradient id="circleGrad"> 
      <stop offset="0%"   stop-color="rgb(255, 255, 0)" /> 
      <stop offset="100%" stop-color="rgb(  0, 255, 0)" /> 
    </radialGradient> 
  </defs> 
 
  <ellipse fill="url(#circleGrad)" stroke="#000" cx="50%" cy="50%" rx="50%" ry="50%"> 
    <animate attributeName="rx" values="0%;50%;0%" dur="2s"  repeatCount="indefinite" /> 
    <animate attributeName="ry" values="0%;50%;0%" dur="2s"  repeatCount="indefinite" /> 
  </ellipse> 
</svg> 




HTML5 Cavas

HTML5 Cavas스펙에서는 다양한 자바스크립트 드로잉 API 들을 제공합니다. <canvas>태그요소만으로 HTML페이지에 원하는 그래픽을 드로잉 할 수 있습니다. 실제로 드로잉하기 위해서는 다른 옵션을 사용합니다.
전자인 2D드로잉 컨텍스트는 IE를 제외한 최근 웹브라우저에서 지원가능합니다.  후자인 3D드로잉 컨텍스트는 아직 표준화 작업중이며 손을 봐야 할 부분들이 남아있습니다.

좀더 폭넓게 지원되는 2D드로잉 컨텍스트에 대해서 살펴보자면, 2D 비트맵을 빠르게 드로잉 연산을 수행하기 위해 간단하고도 막강한  API들을 제공합니다. 파일포맷이 아니라 단지 스크립트를 이용하는 것입니다. 

소스다운로드 : 
canvas.html

HTML5로 구현한 canvas
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Canvas animation example</title>
    <script type="text/javascript">
    <!--
    window.addEventListener('load', function () {
    
        // canvas엘리먼트 찾기
        var canvas = document.getElementById('myCanvas'),
        w = 4,
        h = 4,
        zoompx = 6,
        step = 'zoomin';
        
        if (!canvas || !canvas.getContext) {
            return;
        }
        
        // canvas 2d context 가져오기.
        var ctx = canvas.getContext('2d');
        if (!ctx) {
            return;
        }
        
        var K = 4*((Math.SQRT2-1)/3);


        //줌인,줌아웃처리
        setInterval(function () {
            if (step == 'zoomin') {
                w += zoompx;
                h += zoompx;
            } else if (step == 'zoomout') {
                w -= zoompx;
                h -= zoompx;
            }
        
            if (w > canvas.width) {
                w = canvas.width;
                step = 'zoomout';
            } else if (w < 4) {
                w = 4;
                step = 'zoomin';
            }
        
            if (h > canvas.height) {
                h = canvas.height;
                step = 'zoomout';
            } else if (h < 4) {
                h = 4;
                step = 'zoomin';
            }
    
    
            // radial gradient 생성: x0, y0, r0, x1, y1, r1.
            // That's the start circle (x0,y0) coordinates and r0 radius,
            // followed by the end circle (x1,y1) coordinates and r1 radius.
            var gradient = ctx.createRadialGradient(
                Math.round(w/2), Math.round(h/2), 0, Math.round(w/2), Math.round(h/2), 
                Math.round(Math.min(w, h)/2)
            );
        
            gradient.addColorStop(0, "#ff0");
            gradient.addColorStop(1, "#0f0");
        
            // 그라디언트 속성 입히기
            ctx.fillStyle = gradient;
        
            // Ellipse radius and center.
            var cx = w/2,
            cy = h/2,
    
            // Ellipse radius*Kappa, for the Bezier curve control points
            rx = cx*K,
            ry = cy*K;
        
            ctx.setTransform(1, 0, 0, 1, 0, 0); 
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        
            ctx.setTransform(1, 0, 0, 1, Math.round((canvas.width - w) / 2), 
            Math.round((canvas.height - h) / 2));
            ctx.beginPath();
    
            // startX, startY
            ctx.moveTo(cx, 0);
        
            // Control points: cp1x, cp1y, cp2x, cp2y, destx, desty
            // go clockwise: top-middle, right-middle, bottom-middle, then left-middle
            ctx.bezierCurveTo(cx + rx, 0, w, cy - ry, w, cy);
            ctx.bezierCurveTo(w, cy + ry, cx + rx, h, cx, h);
            ctx.bezierCurveTo(cx - rx, h, 0, cy + ry, 0, cy);
            ctx.bezierCurveTo(0, cy - ry, cx - rx, 0, cx, 0);
        
            ctx.fill();
            ctx.stroke();
            ctx.closePath();
        }, 20); //end of setInterval

    }, false);
    // -->
</script>
</head>
<body>
    <canvas id="myCanvas" width="320" height="320">당신의 브라우저는 Canvas를 지원하지 않습니다.</canvas>
</body>
</html>


canvas 영역안에서는 이미지필터와 같이 pixel-manipluation 연산들을 수행할 수 있으면 png, jpg,등 브라우저가 로드할수 있는 이미지들을 삽입할 수도 있습니다. 또한 canvas 결과물을 일반 이미지로 export하거나 저장할 수도 있습니다. 아래소스는 Canvas 태그로 구성한 윈도우즈 그림판 소스입니다.

Canvas태그로 만든 이미지 저장 및 구현 :
기본적인 Canvas 를 배우시려면 오페라 개발자센터의 "HTML5 Canvas"를 참조하세요


여기서 제공한 canvas 예제는  좋은 사용예가 아닙니다. 왜냐하면 여러분은 SVG를 이용하면 더 적은 코드로 같은 기능을 구현할 수 있기 때문입니다. 좀더 좋은 canvas 사용예는 인터랙티브한 그래프와 이미지분석과 같은 동적인 정보를 표현하는 것입니다.  좋은 canvas예제로써 아래 그림과 같은 예제는 canvas 2D Context API를 이용하여 이미지 히스토그램을 표현하고 계산하는 예제입니다.

왼쪽의 이미지 히스토그램 예제 코드에서는 <img>태그로 이미지를 로드합니다.  그리고 이미지가 로드되는 순간 Canvas 2D Context API를 이용하여 이미지에 사용된 모든 픽섹들을 카운트하여 분석합니다.

사용자가 선택한 칼라값들(CMYKm HIV, RGB)에 따라 픽섹들이 카운트되고 분석됩니다. 오른쪽에 표시된 두번째 canvas태그에서는 각 픽셀에서 수집한 데이타를 바탕으로 이미지 히스토그램을 드로잉 합니다.







데꾸벅이 자주가는 canvas관련 사이트


이미지 히스토그램 소스 : 

Canvas 3D Context는 어디에 적합한가?
보통 3D 컨텍스트는 개체들, 텍스쳐, 음영값들, 그리고 상업적 애니메이션에 사용됩니다. 쿼크(Quake)같은 3D 게임을 만들수도 있고 3D 모델링 툴들을 제작할 수도 있습니다. 웹브라우저는 하드웨어 가속기를 이용하여 장면들을 드로잉 합니다. 물론 가능하다는 전제하에 말이죠!!





SVG와 Canvas 비교

아래 표는 svg와 canvas를 사용했을때의 장점과 단점을 표기한 것입니다. 뭐, 물로 데꾸벅이 한게 아니라 오페라 개발자센터에서 한거지만요.. ㅡ.,ㅡ;

장점
 Canvas  SVG
  • 높은 퍼포먼스의 2D영역으로 원하는 어떤것이라고 드로잉능함
  • 지속적인 수행 - 모든것이 픽셀이므로 이미지 해상도가 높을 경우에만 수행능력이 떨어짐
  • .png나 .jpg로 저장할수 있음.
  • 래스터방식(점-dotted방식)의 그래픽에 적합하여 게임이나 도형처리가 용이, 이미지 편집과 같이 픽셀수준의 처리가 용이하다
  •  해상도에 독립적이다 - 어떤 화면 해상도에서도 처리가능하기때문(벡터방식)에 SVG 를 크로스플랫폼 UI 에 적합하게 하였음. 
  • 애니메이션에 대한 지원이 좋음 - 엘리멘트들은 명확한 태그나 스크립트로 구현이 가능
  • 자바스크립트로 SVG DOM API 를 이용한 모든 엘리먼트들을 자유자재로 컨트롤한다.
  • SVG는 XML 파일포맷이므로 모든 웹브라우저에 지원하고 웹애플리케이션 UI에 좀더 좋은 솔루션으로 사용된다. UI 시맨틱은 ARIA로 향상시킬수 있다.


단점
 Canvas SVG 
  •  드로잉할 DOM노드가 없고 픽셀로만 컨트롤가능하다
  • 애니메이션에 대한 API가 없으므로 필요할때마다 이벤트를 업데이트하거나 타이머를 작동시켜야 한다.
  • 텍스트 렌더링에 약한다.
  • canvas를 지원하지 않는 브라우저가 존재하기 때문에 적절한 선택이 아닐지도 모른다.
  • 웹사이트나 애플리케이션 UI에 적합하지 않다. 왜냐하면 전통적으로 UI는 동적이고 인터랙티브하나 canvas는 다시 렌더링 해야 한다. 다른 이유로는 지원하는 애니메이션 API가 부족하다.
  •  문서 복잡도가 증가할수록 렌더링이 느리다. 즉 DOM이 많을수록 느리다
  • 게임같은 곳에서는 적합하지 않다.  아마도 가장좋은 방법은 Canvas + SVG 조합이 아닐까 한다.



어떤것을 선택할 것인가?

각 기술마다 자신만의 이용법이 있어 어떤것이 좋고 어떤것이 나쁜것인지 가늠할 수 없습니다.

Canvas가 적합한 예
  • 인터랙티브한 이미지 편집 : 자르기, 리사이징, 필터적용
  • 래스터 그래픽 생성 : 데이타 표현, 데이터 플롯, 챠트등
  • 이미지 분석 
  • 게임 그래픽 등

SVG가 적합한 예
  • 해상도 독립적인 웹애플리케이션 사용자 인터페이스
  • 매우 인터랙티브하고 애니메이션 되는 사용자 인터페이스
  • 데이타 챠트
  • 벡터 이미지 편집

간단하게 말하자면 두가지 기술을 모두 사용해야 합니다. 래스터 그래픽같이 동적으로 렌더링을 원한다면 canvas를 사용하고 그것들을 애니메이션 하려면 svg를 사용합니다.

언제 이런 기술들을 사용하죠?
순수하게 HTML + CSS기반으로 둥근 모서리펴현이나 CSS transition, 음영표현, 투명처리를 하려면 jquery와 같은 자바스크립트를 고려할 겁니다. 만약 여러분의 프로젝트가 순수 HTML과 CSS만으로 개발가능한지, 정말로 SVG, canvas가 필요한지 자신에게 반문해 보세요.   SVG는 가장 프리젠이션에 능한 마크업이고 HTML보다 일반적이지도 않는 전문성을 필요로 합니다.  프리젠테이션을 하기 위해 HTML과 CSS뿐만아니라 SVG를 선택하는 것은 그리 바람직 하지 않습니다.




요약 

이 포스트에서는 같지만 서로다른 두가지 기술들(SVG와 HTML5 Canvas)의 차이점에 대해 알아봤습니다.  각각의 기술의 강점과 단점을 있으므로 여러분은 적절하게 잘 사용하셔야 겠죠. 종종 이러한  하나의 웹애플리케이션에 두개의 기술을 적절히 혼합하면 좋은 결과를 수확할수도 있습니다.























저작자표시 비영리 변경금지

'Publisher > HTML/HTML5' 카테고리의 다른 글

[HTML5] Progress Bar CSS입히기  (2) 2013.03.04
HTML5 Gallery  (4) 2009.04.10
웹페이지 소스보기 금지  (0) 2008.08.19
Post by 넥스트리소프트 데꾸벅(techbug)
, |

HTML5 Gallery

Publisher/HTML/HTML5 / 2009. 4. 10. 20:18


아직 Editors Draft (2009년 4 월 8일) 중인 HTML5로 된 사이트를 한곳에 모아둔 사이트가 있어서 소개한다.
(데꾸벅 주: 헉 아직 Working Draft상태인줄 알았는데 이 포스트를 작성하다가 링크를 걸기위해 찾아갔더니만 Editor's Draft 상태이다. W3C의 고무줄 스케줄:로드맵 에 따르면 이미 권고안으로 확정되어야 하지만 최소한 Working Draft상태가 올해안에 안끝날줄 알았는데....  조만간.. HTML5로 또 한번 IT쪽이 떠들썩 하겠군~~~)

사이트 주소 : http://html5gallery.com/






구글크롬, IE8, 7, Firefox3, Opera 에서도 깨짐없이 잘 보이고 있다.
HTML소스를 열어보니 <section>, <nav>, <header> 태그들이 보이고 CSS는 3.0 스펙으로 처리되어 있다.
한가해 질때 각각의 사이트 소스를 분석해 보는것도 괜찮을듯 하다.




아래사이트는 HTML5 스펙으로 구성된 사이트들이다... 즐감 하시길...
http://www.tableless.com.br/
http://jacobrask.net/
http://willworkforart.net/
http://a.deveria.com/
http://www.codedread.com
http://www.thatstandardsguy.co.uk/
http://openscriptures.org/
http://www.thewatchmakerproject.com
http://theccaa.net
http://rebathoregon.com/
http://shepherd-interactive.com/
http://weston.ruter.net/
http://richclarkdesign.com
http://chipbarm.com
http://camendesign.com/
http://www.aneventapart.com/
http://www.uxlondon.com/
http://intertwingly.net/blog/

가까운 시일내에 데꾸벅 블로그도 HTML5 + CSS3로 도배를.. 크크~








저작자표시 비영리 동일조건

'Publisher > HTML/HTML5' 카테고리의 다른 글

[HTML5] Progress Bar CSS입히기  (2) 2013.03.04
SVG와 CANVAS사이의 선택  (16) 2010.03.09
웹페이지 소스보기 금지  (0) 2008.08.19
Post by 넥스트리소프트 데꾸벅(techbug)
, |

웹페이지 소스보기 금지

Publisher/HTML/HTML5 / 2008. 8. 19. 15:22








소스보기를 막는 코드는 여러가지가 있습니다.

하지만 소스보기를 막는 코드가 있다고 하더라도 조금만 관심을 가지면 소스는 100%볼 수가 있습니다. 그 어떤 HTML이던 소스보기는 100%차단할 수 없으며(100% 볼수 있음) 소스보기를 번거럽게 할 뿐(소스보기를 까다롭게)입니다.

인터넷의 특성상 소스는 100%오픈되어 있습니다.

네이버카페 역시 모든 소스를 볼수가 있습니다.

아래문서는 소스보기를 막는 코드들로써 어느정도 소스보기를 번거럽게 할 수 있지만 100%차단을 할 수 는 없습니다.

 

 

1. 마우스 오른쪽메뉴, 드래그, 선택복사 금지하기

<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>

oncontextmenu='return false' : 마우스 오른쪽 메뉴 금지
ondragstart=return false : 드래그 금지
onselectstart='return false' : 선택복사 금지

참고 onkeydown="return false" 키보드 완전 금지


 

2. 마우스 오른쪽 버튼 클릭시 경고 메세지
<script language=JavaScript>function click() {if ((event.button==2) || (event.button==2)) {alert('죄송합니다. 오른쪽 마우스 금지입니다. - 태그인넷 ');}}document.onmousedown=click// --></script>

 

 

3. 프레임 소스보기 막기

<script language="JavaScript">
if(parent.frames.length <= 0) { top.location.href="http://tagin.net"; }
</script>

프레임을 쓰는 홈페이지에서 프레임 페이지가 아닌 하위 프레임으로 직접 들어갔을 때 http://tagin.net으로 이동하는 예제입니다
head에 넣어주세요

 

4. 새로고침(F5), 전체창(F11) 막기

<SCRIPT LANGUAGE="JavaScript">
<!-- www.tagin.net
function processKey()
{
        if( (event.ctrlKey == true && (event.keyCode == 78 || event.keyCode == 82)) ||
        (event.keyCode >= 112 && event.keyCode <= 123) || event.keyCode == 8)
            {
        event.keyCode = 0;
        event.cancelBubble = true;
        event.returnValue = false;
            }
}
document.onkeydown = processKey;
-->
</script>

 

 

5. shift, ctrl (쉬프트, 컨트롤)키 클릭하면 경고메세지 띄우기

<script language="JavaScript">
<!-- www.tagin.net
function click() {
     if((event.ctrlKey) || (event.shiftKey)) {
       alert('키를 사용할 수 없습니다.');
     }
   }
document.onmousedown=click;
document.onkeydown=click;
-->
</script>

 
6. 동영상 마우스 오른쪽 버튼 막기

<embed src="http://tagin.net/js/1.wmv" EnableContextMenu="false" >

<object classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95' id='MediaPlayer1' width="580" height="387">
  <param name='AudioStream' value='-1'>
  <param name='AutoSize' value='false'>
  <param name='AutoStart' value='true'>
  <param name='AnimationAtStart' value='true'>
  <param name='AllowChangeDisplaySize' value='true'>
  <param name='BufferingTime' value='5'>
  <param name='DisplayBackColor' value='0'>
  <param name='DisplayForeColor' value='16777215'>
  <param name='Enabled' value='true'>
  <param name='EnableContextMenu' value='false'>
  <param name='EnableTracker' value='true'>
  <param name='Mute' value='false'>
  <param name='PlayCount' value='1'>
  <param name='Rate' value='1'>
  <param name='ShowCaptioning' value='1'>
  <param name='ShowControls' value='true'>
  <param name='ShowAudioControls' value='true'>
  <param name='ShowDisplay' value='false'>
  <param name='ShowGotoBar' value='false'>
  <param name='ShowPositionControls' value='true'>
  <param name='ShowStatusBar' value='false'>
  <param name='ShowTracker' value='true'>
  <param name='TransparentAtStart' value='false'>
  <param name='Volume' value='-110'>
  <param name="FileName" value="http://tagin.net/js/1.wmv">
  <param NAME="SAMIFileName" VALUE="자막주소">
</object>

동영상 태그(embed, object) 자세히 보기
 
7. 상태바의 링크 주소 감추기

<script language=JavaScript>
setInterval("x()",1);
function x(){window.status="태그인넷"}
</script>
 <A href="http://tagin.net">태그인넷</a>

다른 소스

<a href="http://tagin.net" onmouseover="self.status='태그인넷';return true" onmouseout="self.status=' 태그인넷';return true">링크 </a>

<head>
<script language="JavaScript">
<!--

function hidestatus()
{
window.status='태그인넷'
return true
}
if (document.layers)
document.captureEvents(Event.mouseover | Event.mouseout)
document.onmouseover=hidestatus
document.onmouseout=hidestatus

// -->
</script>
</head>

 
8. 익스플로러 6의 이미지 도구모음(저장버튼 등) 뜨는 것 막기.
<HEAD><META http-equiv="imagetoolbar" content="no"></HEAD>
 
9. 무단링크 금지 스크립트
<script language='JavaScript'>
//link1 과 link2 지정해 넣은 홈을 통해서 들어오지 않으면 무단링크 취급 기본홈페이지로 열리는 소스
var home_url="http://www.tagin.net";   // 기본 홈페이지
var link1="http://tagin.net/";
var link2="http://www.naver.com/";
if (document.referrer.indexOf(home_url)==-1 && document.referrer.indexOf(link1)==-1 && document.referrer.indexOf(link2)==-1) {
        if (document.referrer) {
           alert("무단링크 하셨습니다.!");  // 무단링크시 에러 메세지
                window.location=home_url;  // 기본 홈으로 이동
        } else {
           alert("무단링크 하셨습니다. ");  // 무단링크시 에러 메세지
        window.location=home_url;  // 기본 홈으로 이동
        }
}
</script>

 출처 : 태그인넷










'Publisher > HTML/HTML5' 카테고리의 다른 글

[HTML5] Progress Bar CSS입히기  (2) 2013.03.04
SVG와 CANVAS사이의 선택  (16) 2010.03.09
HTML5 Gallery  (4) 2009.04.10
Post by 넥스트리소프트 데꾸벅(techbug)
, |

티스토리툴바