[티스토리 꿀팁] 본문 이미지 테두리(그림자) 효과 넣는 방법

---

티스토리 본문 사진 테두리 효과

이미지 그림자효과

글과 이미지 분리하기

---

꿀팁을 쓰다보니까 캡쳐가 많아졌어요.

이미지를 삽입하여 보다 이해력을 높이기 위해 사용하곤 하는데, 제가 직접 찍는 사진과는 다르게 흰색 배경에서는 캡쳐본이 글과 혼동되는 경우가 있더라구요.

글과 이미지가 섞여 글이 어수선해보이기 때문에 이미지에 테두리를 추가하여 가독성을 더 높일 수 있도록 수정해봤어요.

 

수정 전

수정 후

 

수정 전에는 확실히 본문 글 바로 아래에 이미지가 들어가기때문에 띄어쓰기를 한다해도 글이 좀 조잡해보여요.

 

이미지 테두리 적용하기 (북클럽스킨)

이번에도 블로그 관리 메뉴 > 스킨 편집 > HTML 편집 > CSS 로 들어가주세요.

삽입 위치는 아무데나 상관 없기때문에 저는 맨 하단에 입력했어요.

마찬가지로 어떤 코드인지 구분하기 위해서 /* 무효화코드 */ 를 넣어주는 게 좋아요.

 

css ex.

 

코드는 아래 회색박스 처럼 붙여넣어주시면 됩니다. 

/* 이미지 테두리 시작 */
.entry-content figure.imageblock {  
  max-width: 95%;  
  box-shadow: 0 4px 6px 0 rgba(0,0,0,.35);  
}
/* 이미지 테두리 끝 */

 

오늘은 간단한 편집으로 이미지에 테두리 넣는 방법에 대해서 알려드렸어요.

 

도움이 되셨다면 아래 구독하기 버튼도 눌러주세요. 우리 소통해요 ♡