티스토리에서 포스트를 작성하다가 이미지를 첨부하게 되면 이미지가 글이나 광고와 너무 가까이 붙어서 보기 안좋은 경우가 생길 수 있습니다.
엔터를 눌러서 한칸을 더 띄어주거나 하는 방법으로 글과 이미지를 분리시켜 줄 수는 있지만 광고와 이미지가 딱 붙은 경우에는 어쩔 수가 없죠. 자동으로 광고가 이미지 와 인접하게 송출 되기 때문인데요.
글 작성시에 이미지와 딱 붙여서 글을 작성해도 CSS를 이용해서 여백을 주는 방법을 소개해드리도록 하겠습니다.
자동으로 생성되는 span객체 imageblock
티스토리에서 이미지를 첨부하면 발행 완료 후 포스트를 관람했을 때 span 두개로 img 객체가 감싸져 있는것을 보실 수 있습니다.
CSS 편집부분에 단 한줄의 코드만 삽입해 줍니다.
.article .imageblock { padding : 10px 0; }
본문 영역의 imageblock 클래스에 상, 하로 10px의 여백을 준다는 의미의 코드입니다.
이렇게 한줄만 작성해 놓으면 이미지와 딱 붙게 글을 작성해도 보기좋게 떨어져있는 모습을 확인 하실 수 있습니다.
본문 내 삽입되어있는 상단 광고와도 적당히 떨어져 있는 모습입니다.
너무 붙거나 너무 떨어지지 않게 10px의 값을 조절해주시면 됩니다.
문의사항이 있으시면 댓글 부탁드립니다. 감사합니다.
