CSS filter 속성은 블러, 밝기, 대비, 색상 조정 등 시각 효과를 요소에 적용합니다. 이미지, 배경, 심지어 비디오에도 동작합니다. 이미지 편집기와 달리 필터는 브라우저에서 실행되므로 어떤 해상도에서도 선명하고, 트랜지션으로 부드럽게 애니메이션할 수 있습니다.
슬라이더를 드래그해 하나의 체인에 여러 필터 함수를 쌓으세요. 샘플 장면이 실시간으로 업데이트되고, 생성된 코드는 모든 것을 하나의 filter 선언으로 합쳐 스타일시트에 바로 붙일 수 있습니다.
Frequently Asked Questions
Q: CSS 필터 함수에는 어떤 것들이 있나요?
CSS 필터 함수에는 어떤 것들이 있나요? blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(), drop-shadow(). 하나의 filter 속성에 임의의 개수를 연결할 수 있습니다.
Q: CSS filter는 GPU 가속되나요?
CSS filter는 GPU 가속되나요? 네. 대부분의 필터 함수는 GPU에서 실행되어 60fps로 애니메이션됩니다. blur()와 drop-shadow()가 가장 무거우니 큰 요소에서는 절제하세요.
Q: filter가 레이아웃에 영향을 주나요?
filter가 레이아웃에 영향을 주나요? 아닙니다. 필터는 순수 시각적입니다 — 요소는 문서 흐름에서 원래 크기와 위치를 유지합니다. 크기 변경은 transform을 쓰세요.
Q: 필터를 애니메이션할 수 있나요?
필터를 애니메이션할 수 있나요? 네. filter 속성을 transition이나 keyframes로 애니메이션하세요. 같은 길이의 서로 다른 필터 체인 사이는 부드럽게 보간됩니다.
Q: 이미지를 흑백으로 만들고 호버 시 컬러로 바꾸려면?
이미지를 흑백으로 만들고 호버 시 컬러로 바꾸려면? 두 상태를 쓰세요: img { filter: grayscale(100%); transition: filter .4s; }와 img:hover { filter: grayscale(0); }. 클래식한 포트폴리오 패턴입니다.
한국 전통색·오방색
오방색은 한국 전통 색채 체계로, 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 가지 기본색이 방위와 계절을 상징합니다. 단청과 한복, 오방장두루마기에 사용되며, 현대 디자인에서도 전통미를 살리는 배색으로 활용됩니다.
청색 #3B5BA5동쪽과 봄을 상징하는 오방색의 파랑
적색 #C12127남쪽과 여름을 상징하는 강렬한 빨강
황색 #EAC102중앙과 대지를 상징하는 노랑
백색 #F5F5F5서쪽과 가을을 상징하는 순백
흑색 #17191C북쪽과 겨울을 상징하는 깊은 검정
쪽빛 #0067A3쪽풀로 물들인 전통 남색. 청바지의 원조
연두색 #81C147새싹의 연한 초록. 단청에 자주 쓰임
살구색 #F7CE68살구 열매를 닮은 부드러운 노란빛
자주색 #583B7E고귀함을 상징하는 전통 보라
단청색 #2E8B8B궁궐과 사찰 단청의 청록색
Q: 오방색이란 무엇인가요?
오방색이란 무엇인가요? 오방색은 한국 전통 색채 체계로 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 색이 방위와 계절을 상징합니다. 단청, 한복, 오방장두루마기에 사용됩니다.
Q: 단청에 쓰이는 색은 무엇인가요?
단청에 쓰이는 색은 무엇인가요? 단청은 궁궐과 사찰의 목조건축을 장식하는 채색 기법으로, 오방색을 기본으로 청록색(#2E8B8B)과 연두색(#81C147) 등을 조화롭게 사용합니다.