구글 블로그 이미지 테두리 넣기

구글 블로그에 사진을 넣는 기능이 참 불편하기는 합니다만, 일단 사진을 넣었을 때 본문과 구분이 잘 되지 않는 단점이 있습니다. 이것은 비단 구글 블로그 문제는 아닙니다.

저는 개인적으로 이렇게 들어간 사진이 본문과 구분이 잘 안 되는 것이 별로라고 생각합니다.

그래서 이미지에 테두리 또는 그림자 효과를 넣게 됩니다.

구글 블로그 이미지 테두리 넣기

구글 블로그 이미지에 테두리를 넣기 위해서는 지난 글에서 언급했던 개발자도구를 활용해야 합니다.

이미지를 찾아서 클릭을 해 보면 이미지 역시 .item-post .post-body 영역에서 고쳐주면 되는 것 같군요. 이것 역시 여려번 반복됩니다만 실제 효과가 나오는 것은 1980번 행 근처에서 나오게 됩니다.

이밎에 그림자 효과를 주는 것은 여러 방법이 있는데 box-shadow가 있고 drop-shadow가 있다고 합니다. 

투명한 부분이 있는 이미지는 이미지 자체에 그림자를 넣을 수 있다는 filter:drop-shadow가 좋아보이네요.

그래서 아래와 같이 CSS에 추가를 해 줍니다.

filter라고 시작하는 한 행을 넣었습니다. 이렇게 해 놓으면 이미지 뒤에 그림자가 생겨서 본문과 약간의 구분이 되게 됩니다.

이 방식으로 이미지를 보다 돋보이게 해 볼 수 있겠죠?