회색조(Grayscale) 효과란?
회색조 효과는 객체의 색상을 256단계의 회색 음영으로 변환하는 CSS 필터입니다. 이 효과를 적용하면 컬러 이미지나 텍스트가 흑백 사진처럼 표현되며, 주로 이미지에 마우스를 올렸을 때 색상을 되돌리는 인터랙션이나 세련된 흑백 디자인을 구현할 때 활용됩니다.
회색조 필터에서 사용되는 매개변수는 다음과 같습니다.
| 매개변수 | 설명 |
|---|---|
| Gray | 객체의 색상을 256단계의 회색 음영으로 변환합니다. |
예제 코드
다음 코드를 실행하면 이미지와 텍스트에 회색조 효과를 적용한 결과를 확인할 수 있습니다.
<html>
<head>
</head>
<body>
<img src = "/css/images/logo.png" alt = "CSS Logo" style = "Filter: Gray">
<p>텍스트 예제:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
Filter: Gray">
CSS Tutorials
</div>
</body>
</html>
참고: 최신 브라우저에서의 회색조 효과
위 예제의 Filter: Gray는 구형 Internet Explorer에서만 지원되던 레거시 방식입니다. 최신 브라우저에서는 CSS3의 filter 속성을 사용하는 것이 좋습니다.
img {
filter: grayscale(100%); /* 완전한 흑백 */
}
img:hover {
filter: grayscale(0%); /* 마우스 오버 시 원래 색상 복원 */
}grayscale() 함수는 0%부터 100%까지의 값을 받아 회색조 강도를 조절할 수 있어, 부분적으로 채도를 낮춘 효과도 손쉽게 구현할 수 있습니다.