이미지에 테두리 효과처럼 그림자를 넣어보기

구글 블로그, 티스토리, 워드프레스 모두 이미지를 넣었을 때 이미지를 꾸미는 것은 적용이 안 되어 있는 것 같습니다.

일반적인 이미지는 괜찮은데, 캡쳐 이미지를 사용하는 경우 주변에 테두리가 없으면 이게 본문 내용하고 잘 구분이 안 되는 경우가 많습니다.

생각보다 구분이 잘 안 되네요. 가장 최근에 작성한 글을 보니 그렇게 보입니다. 그런데 이리저리 돌아다녀 보니 이미지 옆에 그림자 효과를 살짝 주면서 구분될 수 있게 하는 방법이 보이더군요?

그래서 구글 블로그에도 적용할 방법을 찾아봅니다.

이미지에 테두리 효과 적용하기

우선 해당 포스트에서 F12를 눌러서 개발자 도구를 열고 이미지를 찾아 클릭해 봤더니 아래와 같이 나옵니다.

CSS를 조정해 줘야겠군요. 레이아웃 -> 테마디자이너로 가서 CSS 추가로 갑니다.

그리고 아래와 같이 CSS를 입력해 주었습니다. 

.item-post .post-body img { box-shadow: 10px 10px 10px grey; }

박스쉐도우라는 것이 그림자 효과를 적용시켜주는 것이거든요. 순서에 따라 어떻게 적용되는지까지 아직 연구를 다 해 보지는 못했습니다.

저기 입력한 값에 따라 우측 하단에 그림자가 지기도 하고, 왼쪽으로 지게 할 수도 있고 그렇습니다. 테두리는 border: 1px solid grey; 를 하나 더 추가해 주면 됩니다.

이제는 이미지와 본문의 구분이 조금 더 쉬워졌습니다.