CSS3에서는 filter 속성에 sepia() 함수를 사용하면 이미지에 간단하게 세피아 효과를 적용할 수 있습니다. 세피아 효과는 이미지를 따뜻한 갈색 톤으로 변환해 주는 필터로, 오래된 빈티지 사진 같은 분위기를 연출하고 싶을 때 유용하게 활용됩니다.
예제
다음은 CSS3의 filter 속성을 활용해 이미지에 세피아 효과를 적용하는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: sepia(100%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째 이미지는 원본 그대로 표시되고, demo 클래스가 적용된 두 번째 이미지에는 100% 세피아 효과가 적용되어 갈색빛 톤으로 변환됩니다.
참고 사항
sepia() 함수의 값은 0%부터 100% 사이에서 자유롭게 조절할 수 있습니다. 값이 커질수록 세피아 효과가 강해지며, 0%를 지정하면 원본 이미지가 그대로 유지됩니다. 상황에 맞는 수치를 조정해 자연스러운 톤을 찾아보세요.