[CSS] 흑백 효과 만들기 - GrayScale

사진을 일부러 흑백사진으로 만들지 않아도 CSS를 이용하여 흑백사진으로 만들 수 있는 방법이 있습니다.

CSS 속성 중 filter 속성이 있고, 이 속성에 grayscale을 조절할 수 있습니다.

 

grayscale을 100%로 하면 완전한 흑백사진으로 만들 수 있습니다.

예시는 다음과 같습니다.

.gray-scale {
  filter: grayscale(100%);
}

간단하죠?

 

See the Pen Grayscale by wooncloud (@wooncloud) on CodePen.