[CSS] 글자나 이미지를 흑백으로 만드는 방법(grayscale)

웹페이지를 만들면서 특정 글자나 그림을 흑백으로 만들고 싶은 경우가 있습니다.

문제

예를 들어서 웹페이지에 어떤 이모지(Emoji)를 사용하는데, 그 이모지가 흑백이었으면 좋겠다거나, 어떤 이미지가 흑백으로 보이다가 사용자가 커서를 올리면(hover 상태가 되면) 컬러로 보이게 하고 싶다거나 등 그런 경우가 한번 씩은 있을거에요. 잘 생각 해보시면 한번 쯤은 있었을겁니다.

어쨌든 이런 경우에 사용할 수 있는 CSS 구문이 있는데 그게 바로 filter 속성에 grayscale 로 값을 넣어 주는거죠.

해결

filter 속성에 grayscale 을 넣는 방법은 아래와 같습니다.

img { filter: grayscale(1); }

위 CSS 코드를 보면 img 태그에 흑백(grayscale) 필터(filter)를 걸어주는데, 그 흑백의 정도를 1, 그러니까 100% 즉, 완전히 흑백으로 만들라는 뜻입니다. 만약 grayscale 의 값이 0 이면, 흑백으로 바꾸지 말고 원래 색으로 보이도록 grayscale 을 적용하지 않는 것입니다.

간단하죠?

예제

위에서 말했던 예시를 구현해 봅시다.

어떤 이미지가 평소에는 흑백으로 보이는데, 사용자가 마우스를 올리면 원래의 색상으로 표현하는 것입니다.

img       { filter: grayscale(1); }
img:hover { filter: grayscale(0); }

간단하죠? 사용자가 마우스를 올리면(hover), 해당 이미지가 컬러로 보일 것입니다.

조금 더 다이나믹하게 색상을 흑백에서 컬러로 바꾸고 싶다면? transition 과 같은 속성을 사용 하면 되겠네요.

끝.

참고자료

• CSS filters, mdn web dogs
• CSS filter Property, W3 School