CSS 그레이스케일(Gray) 필터란?
그레이스케일 효과를 사용하면 객체의 색상을 256단계의 회색 음영으로 변환할 수 있습니다. 이 필터는 이미지뿐 아니라 텍스트 등 다양한 요소에 적용할 수 있어, 컬러 콘텐츠를 흑백으로 표현해야 할 때 유용하게 활용됩니다.
그레이스케일 필터에서 사용되는 매개변수는 다음과 같습니다.
| 매개변수 | 설명 |
|---|---|
| Gray | 객체의 색상을 256단계의 회색 음영으로 변환합니다. |
예제
다음 코드를 실행하면 이미지와 텍스트 요소에 그레이스케일 효과가 적용되는 것을 확인할 수 있습니다. 이미지 태그와 div 요소 모두에 Filter: Gray 스타일을 지정했습니다.
<html>
<head>
</head>
<body>
<img src="/css/images/logo.png" alt="CSS 로고" style="Filter: Gray">
<p>텍스트 예시:</p>
<div style="width: 357px;
height: 50px;
font-size: 30pt;
font-family: Arial Black;
color: red;
Filter: Gray">CSS 튜토리얼</div>
</body>
</html>
참고: 최신 브라우저에서의 대체 방법
위에서 사용한 Filter: Gray는 구버전 Internet Explorer에서만 동작하는 비표준 필터입니다. 최신 브라우저에서는 CSS3 표준 속성인 filter의 grayscale() 함수를 사용하는 것이 좋습니다.
/* 최신 브라우저용 그레이스케일 적용 */
img {
filter: grayscale(100%); /* 0% ~ 100% 사이의 값으로 조절 가능 */
}