웹 사이트를 디자인할 때 특정 이미지에 흐림 효과를 추가하기로 결정할 수 있습니다. 예를 들어, 커피 하우스용 웹사이트를 디자인하는 경우 사용자가 읽을 수 있도록 이미지 앞에 텍스트를 배치할 수 있도록 이미지를 흐리게 처리할 수 있습니다.
이것이 CSS 흐림 기능이 필요한 곳입니다. 흐림 기능은 지정된 입력 이미지에 흐림 효과를 적용한 다음 "필터" 속성과 함께 사용하여 이미지를 흐리게 할 수 있습니다.
이 자습서에서는 CSS 흐림 기능의 기본 사항과 이를 사용하여 코드의 이미지에 흐림 효과를 적용하는 방법에 대해 설명합니다. 이 튜토리얼을 끝까지 읽으면 CSS 흐림 기능 사용의 전문가가 될 것입니다.
CSS 필터
CSS 필터 속성을 사용하면 웹 페이지의 요소에 그래픽 효과를 적용할 수 있습니다. 종종 filter 속성은 웹 페이지의 이미지와 배경에 필터를 적용하는 데 사용됩니다.
CSS에서 제공하는 다양한 필터가 있습니다. 예를 들어 불투명 필터를 사용하면 요소를 더 많이 또는 덜 보이게 할 수 있고 그림자 효과 필터를 사용하면 웹 페이지에서 요소 아래에 그림자를 추가할 수 있습니다.
필터를 적용하는 구문은 다음과 같습니다.
filter: filterName(arguments);
이 튜토리얼에서는 이미지에 흐림 효과를 추가하는 CSS 흐림 기능에 중점을 둘 것입니다.
CSS 흐림 효과
CSS 흐림 필터는 이미지에 흐림 효과를 추가하는 필터 기능입니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
블러 필터를 사용하는 구문은 다음과 같습니다.
filter: blur(radius);
이 구문에서 "반경"은 적용해야 하는 흐림 효과의 반경을 나타냅니다. 지정한 반경 값이 클수록 이미지 요소에 추가되는 흐림 효과가 더 강해집니다. 값을 "0"으로 지정하면 스타일이 적용된 이미지 요소에 블러가 추가되지 않습니다.
지정한 반지름 값은 em, px, rem 및 cm와 같은 모든 길이 값을 사용할 수 있습니다.
이 기능이 어떻게 작동하는지 설명하기 위해 예제를 살펴보겠습니다. 우리가 지역 커피 하우스를 위한 웹사이트를 디자인한다고 가정해 봅시다. 그들은 커피 하우스의 홈페이지에 커피의 스톡 이미지를 표시하기를 원합니다. 그러나 그들은 그 이미지가 반경 2px의 흐림 효과와 함께 나타나길 원합니다.
블러 기능과 필터 속성을 사용하여 이 작업을 수행할 수 있습니다. 다음은 흐림 기능으로 이러한 이미지를 만드는 데 사용할 수 있는 코드입니다.
<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/CSS 코드의 출력을 확인하세요.
HTML 파일에서 태그를 사용하여 웹 페이지에 이미지를 추가했습니다. 이 이미지는 커피 재고 이미지로 연결됩니다. "height" 및 "width" 매개변수를 사용하여 이미지의 높이와 너비를 각각 400px 및 600px로 설정합니다.
CSS 코드에서 filter 속성과 blur 기능을 사용하여 웹 페이지의 모든 태그에 흐림 효과를 적용합니다. 이 경우 이미지에 약간의 흐림 효과를 추가하는 2px의 흐림 반경을 지정합니다. 위에서 볼 수 있듯이 우리가 사용하는 커피 컵의 이미지는 흐림 효과를 사용했기 때문에 약간 흐리게 나타납니다.
또는 다른 측정 단위를 사용하여 흐림 반경을 지정하려는 경우 "2px"를 사용하려는 값으로 바꾸면 됩니다. 따라서 이미지에 1.15em 흐림 반경을 가진 흐림 효과를 원하면 위에서 지정한 "2px" 흐림 반경을 교체하면 됩니다.
결론
CSS 흐림 기능을 사용하면 웹 페이지의 이미지 요소에 대해 흐림 효과를 만들 수 있습니다. 이 기능은 필터 속성과 함께 사용하여 이미지에 흐림 효과를 적용합니다.
이 자습서에서는 CSS 필터의 기본 사항과 흐림 기능을 사용하여 웹 페이지의 이미지에 흐림 효과를 추가하는 방법에 대해 설명했습니다. 이제 전문가처럼 이미지에 흐림 효과를 추가하는 데 필요한 지식을 갖추게 되었습니다!