본문 바로가기

블로그ㆍ인터넷/티스토리

티스토리 블로그 이미지 테두리 넣기, 삭제하기 정리

제가 사용하는 티스토리 스킨은 바탕이 하얀색이라서 흰색 바탕의 이미지를 넣으면 본문과 구별하기 힘든점이 있었습니다. 그래서 본문에 들어가는 이미지에 테두리를 구분할 수 있었으면 했는데요, 간단하게 CSS 수정을 통해서 해결했습니다.


어떤 분들은 티스토리 블로그 이미지에 테두리를 삭제하시려는 분들도 있는데요, 방법은 동일합니다. 어렵지 않고 블로그마다 비슷비슷하기 때문에 이미지에 테두리를 넣거나 삭제하는 방법은 매우 쉽습니다. 저는 이미지에 테두리가 있는 것이 가독성이 더 좋아보여서 테두리를 주었는데요, 블로그 스킨 상황이나 개인 취향에 맞춰서 수정해서 사용하시면 될 것 같습니다.


가독성이 좋은 블로그를 위해서 블로그 본문에 삽입되는 이미지에 테두리를 넣었습니다.가독성이 좋은 블로그를 위해서 블로그 본문에 삽입되는 이미지에 테두리를 넣었습니다.


티스토리 블로그 이미지 테두리 넣기 및 삭제하는 방법


현재 블로그에는 이미지에 테두리가 적용되어 있습니다.현재 블로그에는 이미지에 테두리가 적용되어 있습니다.


현재 제 블로그를 살펴보시면 이미지에 테두리가 들어가 있습니다. 어떻게 넣었는지, 그리고 이미지 테두리를 어떻게 삭제하는지 살펴보도록 하겠습니다. ▲



티스토리 블로그 관리자 화면 '꾸미기 - HTML/CSS 편집'을 클릭합니다. ▲


좋은 스킨을 무료로 배포해주신 흉내쟁이님(http://copycatz.tistory.com)님 감사합니다.좋은 스킨을 무료로 배포해주신 흉내쟁이님(http://copycatz.tistory.com)님 감사합니다.


'HTML/CSS 편집'화면입니다. 기본적으로 우측에서 수정을 하게되는데요, HTML 수정화면에서 CSS 수정화면으로 바꿉니다. 그냥 CSS 부분을 클릭하면 바뀝니다. ▲



여기서 .imageblock 을 검색합니다. 키보드로 'Ctrl + F'를 함께 누르면 검색할 수 있는 화면이 나옵니다. 그 곳에 .imageblock 을 적고 찾아봅니다. ▲



저는 찾아보니 .imageblock 와 관련해서 5개의 줄이 나오는데, 맨 마지막 줄에 .imageblock { border:1px solid #ddd;} 이 문구가 바로 이미지 테두리와 관련이 있는 부분입니다.

이미지 테두리에 1px로 #ddd에 맞는 색이 출력이 되는 것입니다. ▲



.imageblock { border:1px solid #ddd;} 부분을 삭제하게 되면 이미지 테두리는 삭제가 됩니다. ▲



티스토리 블로그 이미지 테두리가 삭제가 된 모습입니다. ▲


저는 테두리가 있는 것이 가독성에 더 좋은 것 같아 다시 .imageblock { border:1px solid #ddd;} 를 입력해 이미지에 테두리를 넣었습니다. 각자 블로그 상황에 맞게 수정하면 될 것 같습니다. 그리고 블로그 스킨을 수정할 경우 반드시 백업을 하는 습관을 가집시다.