HTML DOM의 Style filter 속성은 요소에 다양한 시각 효과(visual effects)를 정의할 때 사용됩니다. 흐림(blur), 밝기(brightness), 명암(contrast), 그림자(drop-shadow) 등 여러 필터 함수를 조합해 이미지나 요소의 모습을 자유롭게 변형할 수 있습니다.
문법(Syntax)
filter 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
속성 값 설명
filter 속성에 사용할 수 있는 주요 값들은 아래와 같습니다.
| 필터(Filter) | 설명(Description) |
|---|---|
| none | 아무 효과도 적용하지 않습니다. (기본값) |
| blur(px) | 요소에 흐림 효과를 적용합니다. 픽셀(px) 값이 클수록 더 많이 흐려집니다. |
| brightness(%) | 이미지의 밝기를 조절합니다. 100%가 원본 이미지이며, 그 이상의 값은 더 밝게 만듭니다. |
| contrast(%) | 이미지의 명암 대비를 조절합니다. 0%는 완전히 검은색, 100%는 원본 이미지이며, 100% 이상에서는 대비가 줄어듭니다. |
| drop-shadow(h-shadow v-shadow blur spread color) | 이미지에 드롭 섀도우(그림자) 효과를 적용합니다. |
| grayscale(%) | 이미지를 회색조로 변환합니다. 0%는 원본 이미지, 100%는 완전한 회색을 의미합니다. |
| hue-rotate(deg) | 매개변수로 지정한 각도만큼 색상(hue)을 회전시킵니다. 기본값은 0도(원본 이미지)이며 최대 360deg까지 지정할 수 있습니다. |
| invert(%) | 이미지의 색상을 반전시킵니다. |
| opacity(%) | 이미지의 불투명도를 설정합니다. 0%(완전히 투명)부터 100%(원본 이미지, 기본값)까지 지정할 수 있습니다. |
| saturate(%) | 이미지의 채도를 높이거나 낮춥니다. |
| sepia(%) | 이미지를 세피아(갈색빛 빈티지) 톤으로 변환합니다. |
예제(Example)
다음 예제는 filter 속성을 사용해 이미지의 색상 회전(hue-rotate) 효과를 설정하고, 버튼 클릭 시 세피아(sepia) 필터로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#one {
filter: hue-rotate(90deg);
}
</style>
<script>
function changeFilter() {
document.getElementById("one").style.filter ="sepia(40%)";
document.getElementById("Sample").innerHTML="위 이미지에 grayscale 필터가 적용되었습니다";
}
</script>
</head>
<body>
<img id="one" src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics-mini-logo.jpg">
<p>아래 버튼을 클릭하면 위 이미지의 filter 속성이 변경됩니다</p>
<button onclick="changeFilter()">Change Filter</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
페이지를 처음 열면 hue-rotate(90deg) 효과가 적용된 이미지가 표시됩니다.
“Change Filter” 버튼을 클릭하면 −
버튼을 클릭하는 순간 자바스크립트의 changeFilter() 함수가 실행되어 이미지에 sepia(40%) 필터가 동적으로 적용되고, 결과 메시지가 화면에 출력되는 것을 확인할 수 있습니다. 이처럼 filter 속성을 활용하면 CSS와 JavaScript만으로 다양한 이미지 효과를 손쉽게 구현할 수 있습니다.