CSS 팟캐스트 - 023: 필터
이미지 위에 약간 불투명한 불투명 유리 효과가 있는 요소를 빌드해야 한다고 가정해 보겠습니다. 텍스트는 이미지가 아닌 라이브 텍스트여야 합니다. 그 방법은 무엇일까요?
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 필터와 매우 유사하며 동일한 인수(숫자 또는 백분율)를 허용합니다.
밝기 효과를 높이거나 낮추는 대신 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, 블러, 색상 값을 포함하는 그림자 매개변수를 사용합니다.
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() 필터 함수를 사용하면