CSS

CSS 이미지 필터 효과: filter 속성과 transition으로 부드러운 애니메이션 만들기

by mystee
포스트 썸네일 이미지

지난 포스트에서는 배경을 다채롭게 꾸미는 법을 배웠다.

이번에는 이미지나 요소에 직접 시각적 효과를 주는 filter 속성을 살펴보겠다.

포토샵 같은 외부 프로그램 없이도 웹브라우저상에서 흑백, 흐림, 대비 등을 조절할 수 있는 이 속성을 transition과 함께 사용해 생동감 있는 웹페이지로 만드는 방법을 알아보겠다.




이전 포스트

CSS 배경 background 속성 정리, 단축 속성 활용법까지

웹사이트의 분위기를 좌우하는 CSS 배경 속성을 정리했습니다. 배경 색상, 이미지 경로 설정은 물론 반복, 고정, 크기 조절 등 실무에서 자주 쓰이는 옵션들을 상세히 설명합니다. 특히 복잡한 배경 설정 코드를 단 한 줄로 줄여주는 단축 속성 작성법까지 정리해 드립니다.




생활코딩 CSS 수업 영상: filter


아쉽지만 지금은 영상 속에서 소개하는 CSS Filters Playground라는 페이지가 없다.





<!DOCTYPE html>
<html>
<head>
    <style>
        img {
            transition: all 1s;
        }
        img:hover {
            filter: grayscale(50%);
        }
        h3 {
            filter: blur(1px);
        }
    </style>
</head>
<body>
    <h3>The Holly Fairy</h3>
    <img src="The_Holly_Fairy.jpg" alt="The Holly Fairy">
</body>
</html>

위의 생활코딩 수업 영상에서 사용한 코드다.

-webkit-filter나 -o-filter는 제외했다.


2026년 현재, 대부분의 브라우저는 filter라는 속성을 완벽하게 지원한다.

그러니 영상처럼 -webkit-filter나 -o-filter는 넣을 필요가 없다.


transition: all 1s;는 요소의 스타일이 변할 때 갑자기 확 바뀌는 게 아니라, 부드럽게 '스르륵' 변하게 만드는 코드다.


  • all: 애니메이션을 적용할 대상을 정한다. 색상, 크기, 위치, 투명도 등 변화가 가능한 모든 CSS 속성에 애니메이션을 주겠다는 뜻이다.
  • 1s: 변화가 완료되기까지 걸리는 시간이다. 1s는 1초를 의미하며, 0.5s나 300ms처럼 세밀하게 조절할 수 있다.




CSS 가상 클래스 선택자

마우스를 올렸을 때, 클릭했을 때 등 요소의 '상태'에 따라 스타일을 주는 가상 클래스 선택자를 정리했습니다. 순서가 틀리면 작동하지 않는 아주 중요한 LVHA 규칙부터 웹 접근성을 위한 :focus의 중요성까지 확인해 보세요. 선택자 게임 정답 영상도 있습니다.

img:hover는 가상 클래스 선택자다.

이전에 작성한 이 포스트를 참고하자.




CSS filter Property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com

영상에서 소개한 CSS Filters Playground라는 페이지가 없으니 대신 이 페이지를 통해서 filter 속성의 여러 가지 효과들을 확인해 보자.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
Tags

작성자: mystee

이전

댓글 쓰기

0 Comments

댓글 쓰기

🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩

문의하기 양식