Question 1

CSS 필터 함수에는 어떤 것들이 있나요?

Accepted Answer

CSS 필터 함수에는 어떤 것들이 있나요? blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), drop-shadow(). 하나의 filter 속성에 임의의 개수를 연결할 수 있습니다.

Question 2

CSS filter는 GPU 가속되나요?

Accepted Answer

CSS filter는 GPU 가속되나요? 네. 대부분의 필터 함수는 GPU에서 실행되어 60fps로 애니메이션됩니다. blur()와 drop-shadow()가 가장 무거우니 큰 요소에서는 절제하세요.

Question 3

filter가 레이아웃에 영향을 주나요?

Accepted Answer

filter가 레이아웃에 영향을 주나요? 아닙니다. 필터는 순수 시각적입니다 — 요소는 문서 흐름에서 원래 크기와 위치를 유지합니다. 크기 변경은 transform을 쓰세요.

Question 4

필터를 애니메이션할 수 있나요?

Accepted Answer

필터를 애니메이션할 수 있나요? 네. filter 속성을 transition이나 keyframes로 애니메이션하세요. 같은 길이의 서로 다른 필터 체인 사이는 부드럽게 보간됩니다.

Question 5

이미지를 흑백으로 만들고 호버 시 컬러로 바꾸려면?

Accepted Answer

이미지를 흑백으로 만들고 호버 시 컬러로 바꾸려면? 두 상태를 쓰세요: img { filter: grayscale(100%); transition: filter .4s; }와 img:hover { filter: grayscale(0); }. 클래식한 포트폴리오 패턴입니다.

CSS 필터 생성기

🎞️ CSS 필터 생성기

CSS 필터 가이드

Pro Tips

Frequently Asked Questions

한국 전통색·오방색