티스토리 스퀘어 스킨, 새 글 new 아이콘 이미지 찌그러짐 해결하기 (Square Final 1.1.1)

티스토리 스퀘어 스킨 구버전을 사용할 때 새 글 작성 시 뜨는 new 아이콘 이미지를 아래의 방법을 이용해 회색에서 주황색으로 바꾸어 사용해 오고 있었다.

CSS
img[src*="new_ico_1"]{filter: sepia(100%) hue-rotate(-45deg) saturate(1000%) contrast(100%);}
(출처 : 링크 깨짐 rudalskim.tistory.com/215)

그러던 중 스킨을 스퀘어 Final 1.1.1으로 바꾸게 되었는데, new 아이콘의 주황색은 여전히 잘 나왔지만 전체 글 목록 상에서의 new 아이콘은 좌우로 찌그러져서 형상을 알아보기 힘들었다. 그래서 크롬 브라우저 개발자 모드(F12)를 이리저리 돌려 보다가 padding-left 속성이 어디선가 굴러와 붙는 바람에 발생한 문제로 확인되었다. 다만 이쪽 전문가가 아니다 보니 여백을 주는 padding-left 속성이 왜 이미지를 찌그러뜨리는 결과를 주게 되었는지는 잘 모르겠다. 이미지가 들어갈 공간이 이미지의 정사이즈로 설정되어 있는데 안쪽 여백을 주는 바람에 그만큼 이미지가 찌그러져 버린 건가 추정할 뿐.

아무튼, 스킨에서 new_ico_1.gif에 padding-left 속성을 부여한 곳을 확인해 지우려 하였으나 티스토리가 자체 부여하는 설정이라 그런지 찾지는 못했다.

결국 해결책으로 script를 이용해 해당 속성을 변경하는 쪽으로 선회하였다. 겸사겸사 이미지 파일을 new_ico_5.gif으로 바꿈으로써 기존에 사용 중인 색 변경 CSS 없이도 주황색 이미지가 나오게 했다.

새로운 스크립트로 인해 이제는 필요 없어진 (본 글 상단에서 언급한) 기존 CSS의 img filter 항목을 지우고 아래 스크립트만 HTML의 body안 아래쪽에 넣어줘 보니 의도한 대로 찌그러지지 않은 주황색 N 이미지가 잘 나와주었다.

HTML
<script>
$('img[src="https://tistory1.daumcdn.net/tistory_admin/blogs/image/category/new_ico_1.gif"]').each(function() { $(this).replaceWith('<img src="https://t1.daumcdn.net/tistory_admin/blogs/image/category/new_ico_5.gif" style="vertical-align:middle; margin-left:2px; width:10px; height:10px;" alt="N"/>') });
</script>