티스토리 헤더 이미지에 Blur 효과 적용하기: CSS 설정 방법

티스토리 블로그를 운영하면서 헤더 이미지를 더욱 매력적으로 꾸미고 싶다면, Blur 효과를 적용해 보는 것이 좋습니다. 이번 글에서는 티스토리 헤더 이미지에 Blur 효과를 추가하는 방법을 단계별로 설명하겠습니다. 이 방법을 통해 블로그의 시각적 매력을 높이고, 방문자들의 관심을 끌 수 있습니다.

Blur 효과란?

Blur 효과는 이미지의 경계를 흐리게 만들어 부드러운 느낌을 주는 시각적 효과입니다. 이 효과는 주로 배경 이미지에 사용되어, 텍스트나 다른 요소들이 더 돋보이게 하는 데 도움을 줍니다. 특히, 블로그의 헤더 이미지에 적용하면 전체적인 디자인이 세련되게 변모할 수 있습니다.

필요한 HTML 구조

헤더 이미지에 Blur 효과를 적용하기 위해서는 HTML 구조를 이해하는 것이 중요합니다. 아래는 기본적인 HTML 구조의 예시입니다.

<div class="s_list_image">
    <div class="thumbnail">
        <img src="header-image.jpg" alt="헤더 이미지" class="absolute">
    </div>
</div>

위의 구조에서 ~~div class="thumbnail"~~과 ~~img class="absolute"~~에 cover-blur 클래스를 추가할 것입니다.

CSS 클래스 추가하기

이제 HTML 구조에 cover-blur 클래스를 추가해 보겠습니다. 아래와 같이 수정합니다.

<div class="s_list_image">
    <div class="thumbnail cover-blur">
        <img src="header-image.jpg" alt="헤더 이미지" class="absolute cover-blur">
    </div>
</div>

CSS 스타일 설정

이제 cover-blur 클래스를 CSS에 추가하여 Blur 효과를 적용합니다. 아래의 CSS 코드를 스타일 시트에 추가하세요.

div.cover-blur {
    overflow: hidden; /* 이미지가 지정된 영역을 넘지 않도록 설정 */
}

img.cover-blur {
    filter: blur(20px); /* 20px의 Blur 효과 적용 */
}

1. CSS 코드 설명

overflow: hidden;: 이 속성은 이미지가 지정된 영역을 넘지 않도록 합니다. Blur 효과로 인해 이미지의 경계가 흐려지기 때문에, 이 속성을 사용하여 지정한 사이즈 부분만 표시되도록 합니다.
filter: blur(20px);: 이 속성은 이미지에 20px의 Blur 효과를 적용합니다. 필요에 따라 이 값을 조정하여 원하는 흐림 정도를 설정할 수 있습니다.