본문 바로가기

[ IT ][ PC ][ Mobile ]/팁 & Information

[Tip!] 티스토리 블로그 삽입 이미지 테두리 외곽선 없애기/수정하기

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.


티스토리 블로그에 이미지를 삽입을 하면 이미지 외곽선 테두리가 자동으로 생성이 됩니다. 이는 사용하시는 스킨이 따라 다소 차이가 있을 수 있습니다. 스킨의 설정에 따라서 없는 경우에는 있도록 할 수 있고 이미지 테두리가 있는 경우에는 이미지 테두리를 없앨 수 있습니다. 


좀 더 나아가서 이미지 테두리의 색상이나 두께, 이미지와 테두리 사이의 공백, 그리고 글쓰기 전체폭과 이미지 사이의 여백값을 조절할 수 있습니다.


html/css를 편집하는 부분이지만 생각보다 어렵지 않습니다. 따라하시면 바로 하실 수 있습니다.




위 이미지를 보면 이미지 외곽선 테두리가 있는 걸 볼 수 있습니다. 제 블로그의 경우 글쓰기 폭을 건드리면서 이미지 테두리가 왼쪽은 보이고 오른쪽은 안보이네요.

많이 거슬리는 부분이었습니다. 설정에 있는 줄 알고 설정을 한참 뒤져봐도 없기에 html/css 편집을 통해 이미지 테두리를 수정/편집하였습니다.


이를 통해 편집을 하면 블로그내 모든 이미지에 영향을 주게 됩니다. 


하나하나 개개의 포스트에 대해 수정을 하고자 하시면 글쓰기 내의 html에서 편집을 하셔야 합니다만 저는 전체 블로그 이미지 테두리에 대한 편집/수정 기준으로 설명을 드리겠습니다.


각자의 취향이나 이미지 삽입하는 스타일에 따라 테두리를 유지하는냐 없애느냐가 결정되기 때문에 일괄적으로 하시는 쪽이 많을 거라 생각됩니다.


관리자 모드의 HTML/CSS 편집으로 이동합니다.                                                                                                        




html부분말고 CSS부분으로 ctrl + F를 통해 imageblock를 검색하여 해당 태그로 이동합니다.

위 이미지에서 border : 1px라고 되어 있는 부분이 이미지 테두리의 두께를 수정/편집할 수 있는 부분입니다. 현재 제 경우는 1px로 되어있네요. 이부분을 0으로 바꾸면 테두리 굵기가 0이 되어 사라지게 됩니다.


이미지에 표시를 해둔대로 보더값은 이미지의 두께를 결정하고 두번째 값 solid #ddd부분은 테두리의 색을 결정합니다. 필요에 따라 다른 색을 원하시면 색상코드를 집어 넣으면 됩니다.


세번째 패딩값은 이미지와 테두리 사이의 여백(공백)값이고 네번째 마진값은 전체 글쓰기 폭과 이미지 사이의 여백(공백)값입니다.                                                                                                         


저처럼 테두리를 없애는 것이 아니라 더 강조하고 싶다면 보더값을 늘리고 색상으로 강조를 하면 될 것 같습니다. 




테그를 수정하고 나서 이미지 테두리를 없앤 후의 모습입니다. 좀더 깔끔해지고 이미지가 자연스러워진 느낌이네요. 물론 개인적인 취향입니다. 이미지 테두리를 선호하는 분들도 많이 계십니다.


새로 스킨을 적용했는데 이미지 테두리가 없다면 imageblock에서 border값을 확인해 보시고 수정을 하시면 될 듯합니다.