PROGRAM PARK

티스토리 스킨 변경후 이미지 사이즈 자동 조절하기

티스토리 스킨을 변경할때마다 날 귀찮게 하는 것이 한가지 있다. 바로 본문에 삽입된 이미지 사이즈에 대한 것이다. 스킨마다 본문 영역 크기가 다른것에 비해서 이미지 리사이징에 대한 대책도 없이 만들어진 스킨들이 많다. 이런 스킨을 적용한뒤 기존에 작성한 포스트들을 확인해보면 영역을 넘어가는 이미지들은 죄다 한쪽 옆이 짤려있는것을 볼 수 있다.

해결책은 2가지가 있다. 본인처럼 기존 스킨을 하나씩 뜯어고쳐 본인의 취향에 맞게 만들어서 적용하는 무식한 방법 한가지와 이미지 리사이징 코드를 삽입해서 본문 영역 크기에 상관없이 자동으로 크기가 맞춰지도록 하는 방법이 있다. 스킨을 뜯어고치는것이 시간과 노력이 수십배로 들어가지만 대부분의 스킨들은 내가 선호하는 영역이 몇가지씩 빠져있는터라 개인적으론 선호하는 방법이지만 정말 간편하면서도 합리적인 방법은 두번째이다.

적용 방법은 간단하다.

1. 아래 파일을 다운받는다.

imagefix2.js

자바스크립트 출처 : http://oloklir.tistory.com/

2. 위에서 받은 imagefix2.js 파일을 HTML/CSS 편집 -> 파일업로드 항목에서 업로드 한다. 기존 파일을 지우지 않아도 동일 파일명으로 업로드 하면 알아서 덮어쓰기 된다.

3. skin.html 안에 아래 코드 한줄을 삽입한다. 주의할것은 타 코드를 침범하지 않게 < /> 이후에 넣을것.

<script src="./images/imagefix2.js" type="text/javascript"></script>

</div> 와 <div> 사이에 삽입해야 한다. 그것만 지키면 소스의 어디에든지 넣어도 상관없다. 물론 head 와 /head 사이에 위치해야함은 기본이다.