Rev. 2.73

rel 속성값은 개체와 연결의 목표와의 관계를 나타내는 다음 중 하나의 문자열이다.

Alternate 연결에 포함된 파일의 버전을 대체한다.
Appendix 페이지들의 세트에 페이지를 추가한다.
Bookmark 북마그(Bookmark)를 지정한다.
Chapter 페이지들의 세트에 챕터(chapter) 페이지를 지정한다.
Contents 문서의 목차를 지정한다.
Copyright 문서의 저작권 경고를 제공한다.
Glossary 현재 문서의 용어들의 모음(Glossary)을 제공한다.
Help 문서의 도움말 문서를 제공한다.
Index 현재 문서의 색인을 제공한다.
Next 다음 문서를 지정한다.
Offline 오프라인 즐겨찾기(favorite)에 사용되는 CDF 파일의 경로를 포함하는 href를 제공한다.
Prev 이전 문서를 지정한다.
Section 페이지들의 세트에 섹션(section) 페이지를 지정한다.
Shortcut Icon 즐겨찾기나 연결의 단축 아이콘에 사용되는 아이콘 파일의 경로를 포함한 href를 제공한다.
Start 페이지 세트에서 처음 문서를 지정한다.
Stylesheet 스타일쉬트를 지정한다.
Subsection 페이지들의 세트에 하버섹션(subsection) 페이지를 지정한다.

이 속성은 읽기/쓰기이며 디폴트값은 없다.

Comments

<head>
<script type="text/javascript">
function init(direction) {
  if (direction > 270) {
          direction = 0;
      }
      else {
          direction += 30;
      }
      document.all.shadowText.style.filter = "shadow(color=#000000, direction=" + direction + ")";
      setTimeout("init(" + direction + ")", 100);
  }
</script >
<script type="text/javascript">
<!--

count = 0
function expandText(which, start, finish, step, speed) { 
      
      if (count!=1) {
          document.all(which).style.visibility = "visible" 
          if (start < finish) {      	   
              document.all(which).style.letterSpacing = start + "px";  
	      start = start + step; 
	      setTimeout("expandText('"+which+"',"+start+","+finish+","+step+","+speed+")",speed);
          }	       
         

      }
}
//-->
</script>
<style type="text/css">
  .example {
            width: 150; 
            height: 70;
            line-height:50pt;
            font-size: 40pt; 
            font-family: "Arial Black";
            color: #494910
           } 

  .subject {
           Filter: glow(color=#ffcc00) dropshadow(color=#BDBE92);
           line-height:25pt;
           width: 100%; 
           font-family: arial; 
           color: #503F2F
          }  
body {  font-family: "Tahoma", "굴림"; font-size: 9pt; line-height: 16pt; color: #2f6f75; text-decoration: none; text-align: justify}
</style>
</head>
<body  ONLOAD="init(20, 20, 1)">

Example 1

Text is spread

위의 텍스트에 마우스를 올려보세요. Glow filter랑 Dropshadow filer를 적용하고 자바스크립트로 expand효과를 주었습니다. 요런 css필터효과는 cgi에 적용하면 입력한 값에 따라 바로바로 적용할 수가 있어 꽤 괜찮은 효과를 냅니다. 익스4이상에서만 제대로 보이지만, 넷스4에서는 그냥 일반텍스트로 나타나므로 별 문제는 없는 듯. ^^; Example 2 shadow filter와 자바스크립트를 이용해서 그림자에다 에니메이션 효과를 주는 예 입니다. 일반 그래픽 프로그램으로는 이런 이미지 파일은 좀 만들기가 버겁지 않나 생각됩니다.

Animation Shadow

Filters 일반적으로 css 필터는 style="Filter:필터명(필터속성)"으로 정의하면 됩니다. 한번에 두세가지 필터를 동시에 적용할 수도 있고, 텍스트뿐만아니라 이미지에도 적용이 가능합니다. 백문이 불여일견.. --;; 자세한 활용예는 아래에서 직접 보시고, 이곳에 있는 필터들을 바탕으로 다양하게 응용해 보시기 바랍니다. 백견이 불여일행.. --;;

style="Filter: Blur(Add = 1, Direction = 225, Strength = 4)"
Blur

: style="Filter: DropShadow(color=#777777, offX=3, offY=3, positive=0)"
DropShadow

: style="Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)"
Alpha

style="Filter: shadow(color=#333333,direction=135)"
shadow

style="Filter: glow(color=#ffcc00,strength=5)"
Glow

style="Filter: Wave(Add=0, Freq=2, LightStrength=10, Phase=10, Strength=5)"
Wave

style="Filter: Gray()"
Gray

style="Filter: FlipV()"
FlipV

style="Filter: FlipH()"
FlipH

출처 : xpert.new21.net

Comments

image.jpg

영화 진주만은 미국 우월주의 영화 정도로 머리속에 박혀 있던 영화였다. 최근에 진주만 감독판을 감상하면서 국내에 개봉된 진주만은 삭제된 장면이 정말 많았던 것을 알게 되었다. 특히 사람이 처참하게 죽는 표현이 매우 사실적이었고 분량도 많았다. 이런~ 참 잘 만든 영화였구나....

그런데 난 왜 처음보는 것처럼 느껴지지? 가끔 한번 보았던 영화도 처음 보는 것처럼 느껴질때면 괜시리 나이와 연관짓게되는 것은 왜일까? 음~ 문제야 문제...

Comments