[tistory] 이미지 테두리 / 이미지 그림자 넣기

글을 작성하면서 흰바탕 이미지를 넣을때 아래와 같이 너무 가독성이 떨어지는 것 같다.

무엇이 글이고 무엇이 이미지인가... 조치가 필요하다.

 

산만해 산만해

 

 

 

조치방법

몇분 서치해 본 결과 html 과 css 설정을 건드리는 것이라, 사용자 마음대로 여러가지 방법이 있는 듯하다.

이것 저것 복잡한건 싫어서 css만 추가해 주면 적용 되는 방법을 선택했다.

 

나는 테두리도 있고 그림자도 약간 있게 하고 싶어서 아래 처럼 설정했다.

아래 css 속성을 추가만 해 주면 반영 된다. 값을 이리저리 변경해 보고 적절한 값으로 조정하면 된다.

/* 이미지 테두리 선 추가 */
figure.imageblock img {
border: 1px solid #D3D3D3;
}

/* 이미지 그림자 추가 */
div.entry-content img {
    box-shadow: 4px 4px 4px 2px #B8B8B8;
}

 

블로그관리 -> [꾸미기] 스킨편집 -> CSS 탭

 

 

조치결과

썩 예쁜것 같진 않지만 이미지가 구분 되니 읽기도 편하고 깔끔해진 느낌이다.