[티스토리] 북클럽 스킨 이미지 테두리 적용 방법

이미지의 사용은 독자로 하여금 블로그 포스트를 읽을 때 이해력을 높여줍니다. 말로만 설명하는 것이 아닌 실제 사례 등을 이미지로 업로드해서 설명하면 잘 못 이해하는 경우를 많이 줄일 수 있습니다.

다만 화면 캡쳐 같은 이미지를 업로드하게 되면 흰색 배경에 텍스트만 있는 이미지를 업로드하게 되는 경우가 있는데, 이 때 이미지의 테두리가 없으면 어디까지가 배경이고 어디서부터가 이미지인지 구분이 잘 가지 않습니다. 따라서 전반적으로 글이 조잡해 보일 수 있습니다.

블로그 포스트의 가독성을 위해서는 이미지에 테두리를 입혀서 블로그 배경과 구분하는 것이 좋은데요. 매번 이미지를 편집하기엔 시간이 너무 많이 듭니다. 따라서 블로그 스킨의 CSS를 편집해서 이미지에 테두리를 입히도록 하는 방법이 제일 효과적인 방법입니다.

우선 관리모드에서 꾸미기-스킨편집 페이지로 들어갑니다. 오른쪽 상단에 있는 'html 편집' 버튼을 눌러 CSS 편집창으로 갑니다.

스킨의 HTML과 CSS 그리고 스킨에 필요한 사진같은 리소스 파일을 업로드할 수 있는 메뉴를 볼 수 있습니다. 가운데 있는 CSS 항목을 클릭해주면 스킨의 CSS 편집을 할 수 있는 메뉴가 나옵니다.

CSS 편집 항목 중간에 다음 CSS 코드를 붙여 넣어주면 됩니다.

.entry-content figure.imageblock {  
  max-width: 95%;  
  box-shadow: 0 4px 6px 0 rgba(0,0,0,.35);  
}

저장하고 다시 블로그 포스트로 돌아가보면

캡쳐한 이미지에 자연스러운 테두리가 추가되어 있는 것을 볼 수 있습니다. 이제 이미지가 추가되어 블로그 포스트가 조잡해보이지는 않고 가독성이 올라갔습니다.

A+ 테크 리포트