웹 페이지에서 이미지의 시각적 효과를 동적으로 변경해야 하는 경우가 종종 있습니다. JavaScript에서는 CSS의 filter 속성을 활용하면 이미지의 밝기(brightness)와 대비(contrast)를 간단하게 조절할 수 있습니다.
핵심 속성 정리
- brightness(): 이미지의 밝기를 조절합니다. 기본값은 100%이며, 값이 작을수록 어두워지고 클수록 밝아집니다.
- contrast(): 이미지의 명암 대비를 조절합니다. 역시 100%가 기본값이며, 값을 낮추면 흐릿해지고 높이면 선명한 대비 효과가 나타납니다.
예제 코드
다음 코드는 버튼을 클릭하면 이미지의 밝기와 대비가 변경되는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 이미지의 밝기와 대비가 변경됩니다.</p>
<button onclick="display()">이미지 편집</button><br><br>
<img id="myID" src="https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg"
alt="Tutorials Library" width="320" height="320">
<script>
function display() {
document.getElementById("myID").style.filter = "brightness(50%) contrast(50%)";
}
</script>
</body>
</html>코드 설명
버튼을 클릭하면 display() 함수가 실행되어 getElementById()로 이미지 요소를 가져온 뒤, style.filter에 필터 값을 지정합니다.
주의할 점은 filter 속성에 값을 두 번 할당하면 앞선 값이 덮어써진다는 것입니다. 따라서 밝기와 대비를 동시에 적용하려면 위 예제처럼 "brightness(50%) contrast(50%)" 형태로 하나의 문자열에 함께 작성해야 합니다.
응용 팁
밝기와 대비 값은 상황에 맞게 자유롭게 조정할 수 있습니다. 예를 들어 brightness(150%)는 이미지를 훨씬 밝게 만들고, contrast(200%)는 명암 차이를 강조합니다. 이 외에도 saturate(), grayscale(), blur() 등 다양한 필터 함수를 조합하여 풍부한 이미지 효과를 구현할 수 있습니다.