포토샵에 버금가는 스타일 시트 필터효과 적용하기

Home Search

익스플로러에서는 멀티미디어 효과를 낼 수 있는 필터가 제공됩니다. 필터에는 어떤 종류가 있으며 어떤 효과를 표현할 수 있는지 살펴봅니다. 앞으로 사용해 보면 알겠지만 필터는 아주 간단한 설정으로 다양한 효과를 볼 수 있습니다. 단순한 그림에 필터만 지정하면 포토샵이나 페이트샵과 같은 그래픽 제작 툴에서 제공하는 다양하고 화려한 효과를 볼 수 있습니다. 하지만 filter는 익스플로러 4.0 이상에서만 제공됩니다. 특정이미지에 스타일 시트를 적용하면 원하는 형태의 필터효과를 적용할 수 있습니다. 이것은 이미지 원본은 전혀 손상이 되지 않는 브라우저의 변형기술입니다. 단, 익스플로러에서만 적용됩니다.

{ Filter : 필터종류이름지정(속성값지정) }

필터는 효과를 적용할 그림이나 글씨에 필터의 효과를 알리는 속성을 적어줍니다. filter 다음에 콜론(:)으로 연결한 후 효과를 주고 싶은 필터 종류의 이름을 기술한 후 해당 속성 값을 지정합니다. 이제 직접 필터의 종류와 그에 따른 효과들을 예를 들어서 살펴보도록 합니다.

Alpha 필터의 투명효과

Alpha효과를 이용하여 그림의 투명정도를 설정해 줄 수 있습니다. 투명도는 그림을 흐리게 하는 것이 아니라 그림의 외곽을 자연스럽게 사라지게 하는 효과입니다.

{ Filter : Alpha(속성) }

Alpha의 속성값
속성값	설명
opacity	흐림 정도를 %값으로 설정합니다. 단 숫자가 클수록 불투명하게 설정됩니다.
FinishOpacity	증감의 끝부분의 흐림 정도를 설정합니다.
style	흐림 정도 모양 스타일을 설정합니다(1:선형,2:원형,3:사각형).
StartX / StartY	흐림 정도 증감의 시작 x, y 좌표
FinishX / FinishY	흐림 정도 증감의 끝 x, y 좌표

그림의 투명 정도를 설정해주는 필터로 Alpha 속성에 위 표의 값들을 지정하여 글이나 그림에 투명도를 다양하게 조절할 수 있습니다.

Blur 필터의 번짐 효과

Blur 효과는 그림의 번짐(뿌옇게 흐려지도록 왜곡시킴) 정도를 설정해주는 속성으로서 포토샵 필터 중 모션블러와 같은 효과라고 할 수 있습니다.

{ Filter : Blur(속성) }

Blur의 속성값
속성값	설명
add	본 그림과 효과가 적용된 그림을 겹치는 속성을 설정합니다. add값을 0을 주면 블러 효과가 그림 전체에 적용되어 strength 속성값에 따라 없어집니다.
direction	번짐 방향을 각도로 설정합니다.
strength	번지게 될 개수를 지정합니다.

FlipH, FlipY 태그로 대칭 효과 만들기

FilpH 필터는 선택한 글이나 그림을 좌우로 대칭 이동합니다. FlipY필터는 선택한 글이나 그림을 상하로 대칭 이동 합니다.

{ Filter : FlipH(속성) } - - - - - 이미지가 좌우대칭 됩니다.
{ Filter : FlipY(속성) } - - - - - 이미지가 상하대칭 됩니다.

Wave 필터를 이용한 물결 효과

Wave필터를 적용한 그림이나 글자를 물결 형태로 변형해서 보여줍니다. 다음은 Wave필터를 사용하는 형식입니다.

{ Filter : Wave(속성) }

Wave의 속성값
속성값	설명
add	효과를 적용한 요소를 원본 요소와 겹치게 만들지를 설정합니다.
freq	웨이브의 개수를 입력합니다.
lightstrength	웨이브 효과의 빛의 강도를 퍼센트 단위로 입력합니다.
phase	사인 웨이브 효과의 시작 위치를 설정합니다.
strength	물결의 흰 정도를 퍼센트 단위로 입력합니다.

입체효과와 네온효과 만들기

dropshadow와 shadow 필터를 이용하여 특정 방향으로 그림자가 드리워진 글자를 만들 수 있고, grow 필터를 적용하여 네온 글자를 만들 수 있습니다. 사용할 때 주의할 사항은 스타일 시트 속성 중에서 width와 height를 함께 지정해야 한다는 것입니다.

{ Filter : dropshadow(속성) }

dropshadow의 속성값
속성값	설명
color	드롭 쉐도우 효과 색 #RRGGBB를 지정합니다.
offX	그림과 그림자와의 X축의 거리를 지정합니다.
offY	그림과 그림자와의 Y축의 거리를 지정합니다.
positive	dropshadow 효과를 적용할 곳을 설정합니다(입력값: true/false).

※아이디어

아이디어

HTML5 캔버스를 이용한 그림, 도형, 애니메이션, 게임.

HTML5 canvas를 이용한 게임

HTML5 canvas 게임

HTML5 canvas 게임 기획서

※교육,광고,동향

교육, 광고, 동향

클라우드형 애플리케이션 개발자는 게임기나 스마트폰, 울트라 모바일 PC, 넷북, 노트북 컴퓨터, 데스크톱 컴퓨터 같은 단말기는 물론, 앞으로 등장할 각종 단말기에 대응하는 서비스를 제공해야 할 것이다

교육

교육문의 및 신청

반응형웹 교육 - 연락주세요

2012.9.10(월) 2hr
장소 : 토즈 (스터디 모임 공간) 레슨 : 레슨올(1대1 레슨), 레슨비 3만원/1hr, 6만원/3hr)

동향

최신동향

최신 버전