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