Question 1

사용 가능한 CSS filter 함수는 무엇인가요?

Accepted Answer

CSS filter는 blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia를 지원합니다. 하나의 filter 속성에 여러 필터를 결합할 수 있으며 나열된 순서대로 적용됩니다.

Question 2

CSS filter 속성이 성능에 영향을 미치나요?

Accepted Answer

CSS 필터는 현대 브라우저에서 GPU 가속을 지원하지만, 강한 blur나 여러 필터를 중첩하면 특히 모바일에서 렌더링 성능에 영향을 줄 수 있습니다. 애니메이션에서는 will-change: filter를 사용하여 브라우저 최적화를 유도하세요.

Question 3

배경에만 CSS 필터를 적용할 수 있나요(자식 요소 제외)?

Accepted Answer

아니요, filter 속성은 자식 요소를 포함한 전체 요소에 적용됩니다. 배경만 필터링하려면 glassmorphism 효과를 위한 backdrop-filter를 사용하거나 별도의 가상 요소에 배경을 격리하세요.

Question 4

filter: opacity()와 opacity 속성의 차이는 무엇인가요?

Accepted Answer

둘 다 투명도를 제어하지만, filter: opacity()는 하드웨어 가속을 사용하며 다른 filter 함수와 결합할 수 있습니다. opacity 속성은 더 단순하고 새로운 쌓임 맥락을 만듭니다. 단독 투명도에는 일반적으로 opacity 속성이 선호됩니다.

Question 5

CSS 필터를 SVG 요소에도 사용할 수 있나요?

Accepted Answer

네. CSS 필터는 HTML 요소와 마찬가지로 SVG 요소에도 적용됩니다. 또한 SVG에는 CSS filter 단축키보다 더 세밀한 제어를 제공하는 자체 필터 프리미티브(feBlur, feColorMatrix 등)가 있습니다.

CSS 필터 생성기

필터

자주 묻는 질문

Comments & Feedback