Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS3 필터 기능 완벽 가이드: 대비, 드롭 섀도우, 세피아 효과 적용하기

CSS3의 filter 속성은 이미지나 요소에 시각적 효과를 손쉽게 적용할 수 있는 강력한 도구입니다. 대비(contrast), 밝기(brightness), 색조 회전(hue-rotate), 불투명도(opacity) 등 다양한 필터 함수를 활용하면 별도의 이미지 편집 없이도 CSS만으로 화면을 꾸밀 수 있습니다.

이 글에서는 자주 사용되는 대표적인 필터 함수인 대비(Contrast), 드롭 섀도우(Drop Shadow), 세피아(Sepia) 효과를 예제와 함께 자세히 살펴보겠습니다.

1. 대비(Contrast) 조절하기

이미지의 대비를 조절하려면 filter: contrast(%)를 사용합니다. 값에 따른 결과는 다음과 같습니다.

  • 0% − 이미지가 완전히 검정색으로 표현됩니다.
  • 100% − 원본 이미지 그대로 유지되며, 기본값입니다.
  • 100% 초과 − 값이 클수록 대비가 더 강한 이미지가 됩니다.

예제

아래 예제는 CSS3로 이미지의 밝기와 대비를 동시에 높이는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
    filter: brightness(120%) contrast(120%);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<p>아래 이미지는 위의 원본 이미지보다 더 밝고 대비가 강합니다.</p>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

2. 드롭 섀도우(Drop Shadow) 추가하기

이미지에 그림자 효과를 주려면 filter 속성에 drop-shadow() 값을 사용합니다. 각 인수의 의미는 다음과 같습니다.

  • h-shadow − 가로 방향 그림자의 픽셀 값을 지정합니다.
  • v-shadow − 세로 방향 그림자의 픽셀 값을 지정합니다. 음수를 입력하면 그림자가 이미지 위쪽에 배치됩니다.
  • blur − 그림자에 흐림(blur) 효과를 추가합니다.
  • spread − 양수는 그림자를 확장하고, 음수는 축소합니다.
  • color − 그림자의 색상을 지정합니다.

예제

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
    filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<p>아래 이미지에는 녹색 드롭 섀도우가 적용되었습니다.</p>
<img class="demo" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

💡 참고: 여러 필터를 함께 적용하려면 filter: brightness(120%) contrast(120%) drop-shadow(10px 10px 10px green);처럼 하나의 선언 안에 공백으로 구분해 나열해야 합니다. filter 속성을 여러 번 작성하면 마지막 선언만 적용되므로 주의하세요.

3. 세피아(Sepia) 효과 적용하기

이미지에 빈티지한 갈색빛 세피아 효과를 주려면 sepia() 값을 사용합니다. 0%는 원본, 100%는 완전한 세피아 톤을 의미합니다.

예제

<!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">
<p>아래 이미지에는 100% 세피아 효과가 적용되었습니다.</p>
<img class="demo" src="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>

마무리

CSS3 필터 함수를 활용하면 JavaScript나 이미지 편집 도구 없이도 순수 CSS만으로 다양한 시각 효과를 구현할 수 있습니다. 대비, 밝기, 그림자, 세피아 외에도 grayscale(), invert(), saturate(), hue-rotate(), blur() 등의 함수를 조합하면 더욱 풍부한 표현이 가능하니 프로젝트에 적극적으로 활용해 보세요.