CSS 팟캐스트 - 2023: 필터
이미지 위에 표시되는 약간 불투명한 불투명 유리 효과가 있는 요소를 빌드해야 한다고 가정해 보겠습니다. 텍스트는 이미지가 아닌 라이브 텍스트여야 합니다. 그 방법은 무엇일까요?
CSS 필터와 backdrop-filter를 함께 사용하면 실시간으로 효과를 적용하고 필요한 항목을 흐리게 처리할 수 있습니다.
블러와 불투명도는 사용 가능한 필터 중 두 가지입니다.
이 필터의 기능과 사용 방법을 빠르게 살펴보겠습니다.
filter 속성
다음 필터 중 하나 이상을 filter 값으로 적용할 수 있습니다.
필터를 잘못 적용하면 filter에 정의된 나머지 필터가 작동하지 않습니다.
blur
이렇게 하면 가우시안 블러가 적용되며 전달할 수 있는 유일한 인수는 흐리게 적용되는 정도인 radius입니다.
10px와 같은 길이 단위여야 합니다. 비율은 허용되지 않습니다.
.my-element {
filter: blur(0.2em);
}
brightness
요소의 밝기를 늘리거나 줄이려면 밝기 기능을 사용합니다. 밝기 값은 백분율로 표시되며 변경되지 않은 이미지는 100%의 값으로 표시됩니다. 0% 로 설정하면 이미지가 완전히 검은색으로 바뀌므로 0% 에서 100% 사이의 값은 이미지의 밝기를 낮춥니다. 밝기를 높이려면 100% 가 넘는 값을 사용합니다.
.my-element {
filter: brightness(80%);
}
contrast
대비를 줄이거나 늘리려면 0% 에서 100% 사이의 값을 각각 설정하세요.
.my-element {
filter: contrast(160%);
}
grayscale
1을 grayscale() 값으로 사용하거나 0를 사용하여 완전한 채도의 요소를 갖도록 하여 완전한 그레이 스케일 효과를 적용할 수 있습니다.
백분율 또는 소수점 값을 사용하여 부분적인 그레이 스케일 효과만 적용할 수도 있습니다.
인수를 전달하지 않으면 요소가 완전히 회색이 됩니다.
100%보다 큰 값을 전달하면 100%로 제한됩니다.
.my-element {
filter: grayscale(80%);
}
invert
grayscale와 마찬가지로 1 또는 0를 invert() 함수에 전달하여 사용 설정하거나 사용 중지할 수 있습니다. 이 기능이 사용 설정되어 있으면 요소의 색상이 완전히 반전됩니다.
백분율 또는 소수점 값을 사용하여 색상의 부분 반전만 적용할 수도 있습니다.
invert() 함수에 인수를 전달하지 않으면 요소가 완전히 반전됩니다.
.my-element {
filter: invert(1);
}
opacity
opacity() 필터는 opacity 속성과 마찬가지로 작동하며 숫자 또는 백분율을 전달하여 불투명도를 늘리거나 줄일 수 있습니다.
인수를 전달하지 않으면 요소가 완전히 표시됩니다.
.my-element {
filter: opacity(0.3);
}
saturate
채도 필터는 brightness 필터와 매우 비슷하며 동일한 인수(number 또는 백분율)를 허용합니다.
saturate는 밝기 효과를 늘리거나 줄이는 대신 색 채도를 높이거나 낮춥니다.
.my-element {
filter: saturate(155%);
}
sepia
grayscale()처럼 작동하는 이 필터를 사용하면 세피아 톤 효과를 추가할 수 있습니다.
세피아 톤은 검은색 톤을 갈색 톤으로 바꿔 따뜻하게 하는 사진 인화 기술입니다.
숫자 또는 백분율을 sepia()의 인수로 전달하여 효과를 높이거나 낮출 수 있습니다.
인수를 전달하지 않으면 완전한 세피아 효과 (sepia(100%)와 같음)가 추가됩니다.
.my-element {
filter: sepia(70%);
}
hue-rotate
hsl의 색조가 색상환의 회전을 참조하는 방법은 색상 강의에서 배웠으며 이 필터도 비슷한 방식으로 작동합니다.
각도 또는 회전과 같은 각도를 전달하면 모든 요소의 색상의 색조가 바뀌고 참조하는 색상환의 부분이 변경됩니다. 인수를 전달하지 않으면 아무 작업도 하지 않습니다.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
drop-shadow를 사용하여 Photoshop과 같은 디자인 도구에서와 같이 곡선을 포함하는 그림자를 적용할 수 있습니다.
이 그림자는 알파 마스크에 적용되므로 컷아웃 이미지에 그림자를 추가하는 데 매우 유용합니다.
drop-shadow 필터는 공백으로 구분된 offset-x, offset-y, blur, color 값을 포함하는 그림자 매개변수를 사용합니다.
box-shadow와 거의 동일하지만 inset 키워드와 스프레드 값은 지원되지 않습니다.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
그림자 모듈에서 다양한 유형의 그림자에 관해 자세히 알아보세요.
url
url 필터를 사용하면 연결된 SVG 요소 또는 파일에서 SVG 필터를 적용할 수 있습니다.
SVG 필터에 대해 자세히 알아보기
배경화면 필터
backdrop-filter 속성은 filter과 동일한 필터 함수 값을 모두 허용합니다.
backdrop-filter와 filter의 차이점은 backdrop-filter 속성은 백그라운드에만 필터를 적용하며, filter 속성은 전체 요소에 필터를 적용한다는 것입니다.
이 과정의 시작 부분에 있는 예제가 완벽한 예입니다. 텍스트를 흐리게 처리하고 싶지 않고 추가 HTML 요소를 추가하지 않아도 되기 때문입니다. 배경화면에만 필터를 적용할 수 있으면 가능합니다.
이해도 확인
필터에 대한 지식 테스트
다음 중 CSS 필터 함수는 무엇인가요?
grayscale()invert()flip()multiply()blur()brightness()CSS에서 SVG 필터를 사용할 수 있나요?
url() 필터 함수를 사용하면 이 작업을 할 수 있습니다.