[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
댓글 남기기