웹사이트를 디자인하다 보면 특정 이미지에 블러(흐림) 효과를 적용하고 싶은 순간이 찾아옵니다. 예를 들어 커피숍 웹사이트를 제작할 때, 배경 이미지를 살짝 흐리게 처리한 뒤 그 위에 텍스트를 얹으면 방문자가 내용을 훨씬 쉽게 읽을 수 있습니다.
이럴 때 유용하게 쓰이는 것이 바로 CSS 블러(blur) 함수입니다. blur 함수는 지정된 입력 이미지에 블러 효과를 적용하며, filter 속성과 함께 사용하면 이미지를 원하는 만큼 부드럽게 흐릿하게 만들 수 있습니다.
이 글에서는 CSS blur 함수의 기본 개념과 실제 코드에 블러 효과를 적용하는 방법을 예제와 함께 살펴봅니다. 끝까지 읽고 나면 프로처럼 CSS 블러 효과를 자유롭게 활용할 수 있게 될 것입니다.
CSS filter 속성이란?
CSS의 filter 속성은 웹 페이지의 요소에 다양한 그래픽 효과를 적용할 수 있게 해주는 기능입니다. 주로 웹 페이지의 이미지나 배경에 필터를 거는 용도로 널리 사용됩니다.
CSS는 여러 종류의 필터를 제공합니다. 예를 들어 opacity 필터는 요소의 투명도를 조절해 더 또렷하거나 흐릿하게 보이게 할 수 있고, drop-shadow 필터는 요소 아래에 그림자 효과를 추가해 입체감을 더해줍니다.
필터를 적용하는 기본 문법은 다음과 같습니다:
filter: filterName(arguments);
이번 글에서는 이 중에서 이미지에 블러 효과를 추가하는 CSS blur 함수에 집중해 보겠습니다.
CSS blur 함수 사용법
blur 필터는 이미지에 블러 효과를 더해주는 필터 함수입니다.
blur 필터의 문법은 아래와 같습니다:
filter: blur(radius);
여기서 radius(반경)는 적용할 블러 효과의 강도를 의미합니다. 반경 값이 클수록 이미지에 적용되는 흐림 효과도 강해집니다. 반대로 값을 0으로 지정하면 블러 효과가 전혀 적용되지 않습니다.
radius 값에는 em, px, rem, cm 등 모든 길이 단위를 사용할 수 있습니다.
실전 예제: 커피숍 홈페이지 이미지에 블러 적용하기
그럼 실제 예제를 통해 이 함수가 어떻게 동작하는지 확인해 보겠습니다. 동네 커피숍 웹사이트를 디자인한다고 가정해 봅시다. 홈페이지에는 커피 스톡 이미지가 등장하는데, 이 이미지에 반경 2px의 블러 효과를 적용하고 싶다고 합시다.
filter 속성과 blur 함수를 조합하면 이 작업을 간단히 처리할 수 있습니다. 아래는 해당 이미지에 블러 효과를 적용하는 코드입니다:
<html>
<img src="https://images.unsplash.com/photo-1489533119213-66a5cd877091?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1051&q=80" height="400" width="600" />
</html>
<style>
img {
filter: blur(2px);
}
</style>
HTML 파일에서는 <img> 태그를 사용해 웹 페이지에 이미지를 추가했습니다. 이 이미지는 커피 스톡 사진으로 연결되며, height와 width 속성으로 각각 400px, 600px 크기를 지정했습니다.
CSS 코드에서는 filter 속성과 blur 함수를 사용해 웹 페이지의 모든 <img> 태그에 블러 효과를 적용했습니다. 여기서는 블러 반경을 2px로 지정했기 때문에 이미지에 은은한 흐림 효과가 생깁니다. 실행 결과에서 커피잔 사진이 살짝 흐릿하게 보이는 것을 확인할 수 있습니다.
만약 다른 단위로 블러 반경을 지정하고 싶다면 "2px" 대신 원하는 값으로 바꿔주기만 하면 됩니다. 예를 들어 1.15em의 블러 반경을 적용하고 싶다면 위 코드의 "2px"를 "1.15em"으로 변경하면 됩니다.
마무리
CSS blur 함수를 사용하면 웹 페이지의 이미지 요소에 블러 효과를 손쉽게 만들 수 있습니다. 이 함수는 filter 속성과 함께 사용되어 이미지에 흐림 효과를 적용합니다.
이번 글에서는 CSS 필터의 기본 개념과 blur 함수를 활용해 웹 페이지 이미지에 블러 효과를 추가하는 방법을 알아보았습니다. 이제 여러분도 프로처럼 이미지에 블러 효과를 적용할 준비가 되었습니다!