Chapter 14
오브젝트에 그래픽 효과를~! filter
자아~~
님들은 이제 자주 쓰이는 스타일 시트들을 모두 구현 하실 만큼의 실력을 가지신 중급자 입니다.
여기 까지 오시느라 수고 하셨구요...
님들이 좀 더 어렵지만 쓸만한 스타일 시트 속성을 배우는 것이 이번 고급 과정의 목표 입니다.
겁먹지 마시구.. 그럼.. 시작 할까요?
이번 Intro 부터 화려합니다.
filter...
아마 처음 보시는 님들이 많으실줄로 압니다.
그건... 왠만한 CSS책이나 사이트 에서도 찾아 보기가 힘들기 때문이겠죠.
그러나 아주 유용한 속성이 바로 이 filter인 것입니다.
참고루 익스에서만 주로 통하구요..
같은 box(사각형의 형태를 띈 오브젝트)에서만 적용 됩니다.
box가 아닌 다른 오브젝트에 적용시킬 경우,
오류가 발생하여, filter효과가 제대로 적용되지 않습니다.
대신 box안에 box가 아닌 오브젝트를 넣었을 경우에는 그 box의 영향으로 인해 filter 효과가 적용 됩니다.
대표 속성은 필자도 모릅니다.
공식적인게 아닌 모양이예요.
그리고 이것을 쓰면 글자라 하더라도 마치 그림 이미지같은 느낌이 드는것이 특징입니다.
filter속성에서 필자가 알아낸건 원래 2가지 였죠..
하나는 shadow(그림자 효과), 또 하나는 alpha(투명 효과) 였답니다.
근데 최근에 하나 알아낸 것이 Glow(번짐 효과)입니다.
셋 다 잼있죠 ^^*
혹시나 님들이 이것 말고도 또 아시는게 있다면 필자에게 좀 알려주세요 ^^*
공유 합시다~! >.<ㅁ
그럼 잘 보시구 따라 하시길 바랍니다.
▶filter:shadow
▶filter:shadow
<html>
<head>
<title>background-color</title>
<style type="text/css">
.shadow {filter:shadow(direction:45, color=red)}
</style>
</head>
<body>
<table border="0" class="shadow">
<tr>
<td>
그림자 효과 입니다.
</td>
</tr>
</table>
</body>
</html>예제보기 1st ← Click !
어때요? 멋지지 않으세요?
보시다 시피 그림자는 빨강색 입니다.
filter:shadow에는 2가지 옵션이 있습니다.
하나는 방향을 결정하는 direction이고, 또 하나는 색상을 결정하는 color인 것입니다.
사용법은 아래와 같습니다.
filter:shadow(direction=0~360, color=영문 컬러, RGB코드)멋진 효과에 비해 사용법은 비교적 간단함을 느끼실 수 있을겁니다.
color 사용법은 너무나 쉽기 때문에 생략하구요..
direction은 그림자의 각도 0˚~360˚까지 인데,
웹브라우저는 직각과 대각선 그림자만을 인식하므로 실제론,
0, 45, 90, 135, 180, 225, 270, 315, 360(0과 같음)이 되는 것이죠.
그럼 실습 꼭 하시구요.. 다음으로 넘어 가겠습니다.
▶filter:alpha
▶filter:alpha
<html>
<head>
<title>background-color</title>
<style type="text/css">
.alpha {filter:alpha(opacity=40)}
body {background-image:url(
</style>
</head>
<body>
<table border="0" width="500" height="240" bgcolor="orange" class="alpha">
<tr>
<td>
<font size="7">
<b>
투명 효과 입니다.
</b>
</font>
</td>
</tr>
</table>
</body>
</html>filter:alpha(opacity=0~100)alpha에는 옵션이 딱 1가지 있는데요..
opacity라는것 입니다.
이것은 box의 투명도를 조절 하는 옵션 입죠.
기본값은 100 이니까..
100 이라면 투명도가 없다는 뜻이 되겠지요?
그럼 투명도를 절반정도로 하려면?
넵~ 당연히 50이져 ^^
alpha는 그래픽 용어에서 아주 많이많이 쓰이는 것인데엽..
그래픽 공부중이신 님이 보시면 아하~ 하시며 손뼉을 치실 거예요.
그쵸? 그쵸? *^^*
그리구.. 음, 이거 외우기 힘들땐 이렇게 외우세요.
오빠시티(opacity)
이러면 아무래도 외우기 쉬우실 겁니다.
저두 이렇게 외우고 다닙니다 *^^*
▶filter:glow
▶filter:glow
<html>
<head>
<title>Glow Effect</title>
<style type="text/css">
.glow {filter:glow(color=skyblue)}
</style>
</head>
<body>
<table border="0" width="500" height="240" class="glow">
<tr>
<td>
<font size="7">
<b>
번짐 효과 입니다.
</b>
</font>
</td>
</tr>
</table>
</body>
</html>예제보기 3rd ← Click !
어때요? 이것도 꽤 멋있죠? ^_^
넵. 파이어 웍스나 포토샵의 번짐 효과랑 동일합니다.
근데 자세히 보니 번지는 그 색상안이 그냥 글자 따라 단순하게 번지는게 아니라..
약간의 희미한 점으로된 무늬가 보이는군요.
뭐 이건 상관없고..
어쨌건 Glow의 첫번째 옵션은 color 입니다.
뭔진 뻔할 뻔자겠죠?
그럼 이제 두번째~
<html>
<head>
<title>Glow Effect</title>
<style type="text/css">
.glow2 {filter:glow(color=gray, strangth=7)}
</style>
</head>
<body>
<table border="0" width="500" height="240" class="glow2">
<tr>
<td>
<font size="7">
<b>
번짐 효과 두번째 입니다.
</b>
</font>
</td>
</tr>
</table>
</body>
</html>예제보기 4th ← Click !
두번째는 strength입니다.
말 그대로 번지는 세기를 말하는 것이겠죠?
기본 값은 5 이고..
단위는 픽셀(px)단위 인 것같습니다.
그림판에서 스샷을 직접 가져 와서 세어 봤거든요 ㅡ.ㅡㆀ
strength 수치는 1~무한대 ..인 것같습니다만..
그 수치를 너무 크게 주시면 이상(?)하니까..
(잘 모르시겠다면 직접 시험 해 보시길 ^^;)
1~10정도가 무난할 것같군요.
그럼 Glow 정리 입니다.
filter:glow(color=영문 or RGB코드, strength=1~∞)오늘은 filter에 대해 배워 보았습니다.
재미있죠? 신기하기도 하구..
이게 스타일 시트의 장점 아니겠어요? ^^
그럼.. 잘 쓰시구요..
다음 강좌때 뵙겠습니다.
님들~ 건강하세요 ^.^
- End -