[css] 블러 필터

22 Dec 2023

CSS 블러 필터는 이미지를 부드럽게 흐리게 만들어주는 효과를 적용할 수 있습니다. 이것은 웹 디자인에서 매우 유용한 기술입니다. 이 효과를 사용하면 웹 페이지에서 이미지의 세부사항을 숨기거나 중요한 부분을 강조할 수 있습니다.

블러 필터 적용 방법

CSS의 filter 속성을 사용하여 이미지에 블러 효과를 쉽게 적용할 수 있습니다. 아래는 간단한 예제 코드입니다.

.image {
  filter: blur(5px);
}

위의 코드 예제에서 blur(5px)는 이미지에 5px의 블러 효과를 적용하는 것을 의미합니다. 숫자를 조절하여 블러 효과의 강도를 조절할 수 있습니다.

블러 필터 예제

아래는 HTML과 CSS를 이용하여 블러 필터를 적용한 이미지의 예제 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .image {
      filter: blur(5px);
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="블러 효과가 적용된 이미지" class="image">
</body>
</html>

위의 코드를 실행하면 image.jpg에 5px의 블러 효과가 적용된 이미지를 확인할 수 있습니다.

마무리

CSS 블러 필터를 사용하면 이미지에 쉽게 부드러운 효과를 적용할 수 있습니다. 이를 통해 웹 디자인에서 다양한 시각적 효과를 구현할 수 있습니다.

더 많은 CSS 효과에 대한 정보는 MDN web docs를 참고하시기 바랍니다.