CSS로 색 농도를 평탄화하기
색 농도(color depth)를 평평하게 만들려면 X-Ray 필터를 적용해야 합니다. X-Ray 필터는 요소를 마치 엑스레이 촬영한 것처럼 회색조(grayscale)로 변환하고, 색의 깊이를 평탄화하여 단색 느낌으로 바꿔 줍니다.
매개변수
X-Ray 필터에서 사용되는 매개변수는 다음과 같습니다.
| 번호 | 매개변수 및 설명 |
|---|---|
| 1 | Xray 요소를 그레이스케일로 변환하고 색 농도를 평탄화합니다. |
예제
다음 코드를 실행하면 이미지와 텍스트에 X-Ray 효과가 적용된 모습을 확인할 수 있습니다.
<html>
<head>
</head>
<body>
<img src = "/css/images/logo.png" alt = "CSS Logo" style = "Filter: Xray"">
<p>Text Example:</p>
<div style = "width: 357; height: 50; font-size: 30pt; font-family: Arial Black; color: red; style = "Filter: Xray">CSS Tutorials</div>
</body>
</html>
참고: 최신 브라우저에서의 대체 방법
위 예제의 Filter: Xray 구문은 과거 Internet Explorer에서만 지원되던 비표준 필터로, 현재는 더 이상 권장되지 않습니다. 최신 브라우저에서는 표준 CSS filter 속성을 사용하여 유사한 효과를 구현하는 것이 좋습니다.
img {
filter: grayscale(100%) contrast(1.2);
}grayscale() 함수만으로도 색을 제거한 흑백 효과를 얻을 수 있으며, 여기에 invert()나 contrast()를 조합하면 실제 X-Ray 사진과 비슷한 음화(negative) 느낌까지 연출할 수 있습니다.