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
와 마찬가지로 invert()
함수에 1
또는 0
를 전달하여 사용 설정 또는 사용 중지할 수 있습니다. 사용 설정하면 요소의 색상이 완전히 반전됩니다.
백분율 또는 소수점 값을 사용하여 색상의 부분 반전만 적용할 수도 있습니다.
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
Photoshop과 같은 디자인 도구에서와 같이 곡선을 따라 드롭섀도를 적용할 수 있습니다(drop-shadow
사용).
이 그림자는 알파 마스크에 적용되므로 잘라낸 이미지에 그림자를 추가하는 데 매우 유용합니다.
drop-shadow
필터는 공백으로 구분된 offset-x, offset-y, blur, color 값이 포함된 shadow 매개변수를 사용합니다.
box-shadow
와 거의 동일하지만 inset
키워드와 스프레드 값은 지원되지 않습니다.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
shadows 모듈에서 다양한 유형의 그림자에 대해 자세히 알아보세요.
url
url
필터를 사용하면 연결된 SVG 요소 또는 파일의 SVG 필터를 적용할 수 있습니다.
SVG 필터에 대해 자세히 알아보려면 여기를 참고하세요.
배경 필터
backdrop-filter 속성은 filter
와 동일한 필터 함수 값을 모두 허용합니다.
backdrop-filter
과 filter
의 차이점은 backdrop-filter
속성은 필터를 백그라운드에만 적용하는 반면 filter
속성은 전체 요소에 적용한다는 점입니다.
이 섹션의 시작 부분에 있는 예가 좋은 예입니다. 텍스트가 흐리게 표시되지 않아야 하며 HTML 요소를 추가하지 않는 것이 좋습니다. 배경에만 필터를 적용하면 됩니다.
이해도 확인
필터에 대한 지식 테스트
다음 중 CSS 필터 함수는 무엇인가요?
brightness()
grayscale()
multiply()
flip()
blur()
invert()
CSS에서 SVG 필터를 사용할 수 있나요?