CSS Filter

MyeonghoonNam·2021년 9월 14일
0
post-custom-banner

Filter

CSS filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.

다양한 filter 함수들에 대하여 알아봅시다.


blur

요소의 내용을 흐림 처리를 할 수 있게 해주는 속성입니다. 값이 클수록 이미지가 흐려집니다.

filter: blur(10px)

grayscale

요소의 무채색을 적용하는 속성으로 기본값은 100%이다. 100%일 경우 완전히 흑백 이미지가 되고, 0%일 경우 이미지가 그대로 유지된다.

filter: grayscale(40%)

invert

요소가 가진 색상들을 반전 시키는 효과로 기본값은 100%이다. 100%일 경우 색을 정반대로 바꾸고, 0%일 경우 이미지를 그대로 유지합니다.

filter: invert(80%);

drop-shadow

x, y축으로의 그림자 효과를 지정할 수 있다.

x축 기준점 위치, y축 기준점 위치, 그림자흐림정도, 그림자색상 순으로 값을 입력한다.

주의할 점은 요소의 배경색상이나 배경이미지가 없는 경우에만 내부에 있는 아이템의 경계에 맞게 아이템에 효과가 지정된다.

filter: drop-shadow(10px 20px 10px red);

brightness

기본값은 1으로 요소의 밝기 정도를 나타내며 기본값 보다 작으면 어두워지고 높으면 밝아진다.

0%일 경우 완전히 검은색 이미지가 되고, 100%일 경우 이미지가 그대로 유지됩니다.

filter: brightness(1);

contrast

색상의 대비를 조정해주는 함수로 기본값은 100%이다.

0%일 경우 완전히 회색 이미지가 되고, 100%일 경우 이미지가 그대로 유지됩니다.

filter: contrast(100%);

opacity

요소의 투명도를 지정한다.

opacity 속성과 다른 filter의 함수이며 기본값이 100%로 시작되며 값은 퍼센트 단위로 이루어진다.

filter: opacity(80%);

saturate

요소의 채도를 지정하며 기본값은 100%이다.

0%일 경우 완전히 무채색이 되고, 100%일 경우 이미지를 그대로 유지합니다.

filter: saturate(100%);

sepia

sepia톤은 오래된 사진을 표현하는 톤과 비슷한 느낌의 톤을 지정하는 함수이다. 기본값은 100% 이다.

100%일 경우 완전히 세피아가 되고, 0%에서는 이미지를 그대로 유지합니다.

filter: sepia(0);

hue-rotate

색의 분포가 이루어진 색 원형표를 기준으로 입력 각도에 해당하는 색조를 지정하는 함수이다.

0deg일 경우 이미지가 그대로 유지됩니다.

filter: hue-rotate(320deg);

backdrop-filter

자기 자신에 filter 함수들을 적용하는 것이 아니라 해당하는 요소의 배경에 보여지는 영역에 한하여 filter 함수를 적용하는 속성이다.

backdrop-filter: blur(10px) grayscale();

실습


참고자료

profile
꾸준히 성장하는 개발자를 목표로 합니다.
post-custom-banner

0개의 댓글