구글 블로그 스팟 설정하기 Part 3 - 이미지 크기 조절

구글 블로그 스팟 설정하기 Part 2 - 테이블 사용 방법

구글 블로그 스팟(블로거)은 이미지를 첨부하면 원본 크기로 첨부가 되지 않고 최적화 된 작은 사이즈로 첨부가 됩니다. 그렇기 때문에 본인이 직접 이미지의 크기를 조절해야 하는 불편함(?)이 있는데요, 그래서 이미지를 일일이 수정할 필요 없이 한 번에 적용할 수 있는 방법을 간략하게 소개하려고 합니다.

# 빠른 요약

1. 수동으로 각 이미지 사이즈 조절

2. HTML 태그로 이미지 사이즈 자동 조절

# Reference

- https://kuzuro.blogspot.com/2018/06/blog-post.html

- https://blog.naver.com/reuno21/220474888232

# 수동으로 직접 조절

자 여기 테스트 할 이미지가 있습니다. 이미지 사이즈는 1280 x 720 입니다. 그리고 제가 운영하는 블로거의 페이지 가로 사이즈는 900 입니다.

텍스트 편집창에서 이미지를 첨부하게 되면, 보는 것과 같이 작은 이미지로 첨부가 됩니다. (해당 사이즈는 '중간' 사이즈 입니다.) 이 상태로 글을 게시하게 되면 위에 보이는 사이즈로 게시가 됩니다.

이미지를 클릭하면 아래쪽으로 매뉴가 팝업되어 나타나는데요, 연필 모양의 편집을 누르면 이미지 사이즈를 변경할 수 있는 창이 나타납니다. '중간'으로 되어 있는 사이즈를 '아주 크게'로 바꾸게 되면 화면에 꽉 차는 사이즈로 변경되는 것을 확인할 수 있습니다.

이 상태로 글을 게시하게 되면 화면에 꽉 차는 사이즈로 게시가 되는 것을 확인할 수 있습니다. (만약 이미지를 원본 크기로 하고 게시하게 되면 이미지가 화면 사이즈를 넘어가버려 이상하게 표시가 되는 것도 확인할 수 있습니다.)

추가로 작은 Tip을 드리자면, 추가로 구글 블로그 스팟(블로거)는 이미지를 첨부할 때 테두리 설정을 기본으로 넣습니다. 이것을 없애기 위해서는 편집모드를 HTML로 바꾼다음 이미지 태그로 이동하여 테두리 설정을 바꾸면 되는데요, 위의 이미지처럼 1em로 설정되어 있는 설정을 0em으로 바꾸면 테두리 두께가 0 으로 바꾸면서 화면에 꽉 차는 이미지를 사용할 수 있습니다.

# 자동으로 변경 적용

자동으로 변경하기 위해서는 테마 설정에 이미지를 화면 사이즈에 맞춰서 변경하는 소스를 적용시키면 되는데요, 

"테마 > 맞춤설정 > HTML 편집" 

경로에서 </body> 태그 바로 위쪽에 아래와 같은 태그를 추가해 주면 됩니다.

<script>         var postImg = document.querySelectorAll(".post-body img");        var newImg = new Array();       var imgSize = new Array();       var imgUrl = "";       for (var i = 0; i < postImg.length; i++) {            imgUrl = postImg[i].getAttribute("src");            imgSize = imgUrl.split("/");            newImg[i] = imgUrl.replace(imgSize[7], 's0');              postImg[i].setAttribute("src",  newImg[i]);       }   </script>

이제 이미지가 원하는데로 잘 적용되어서 보이는지 확인해 보시면 됩니다. 만약 원하는대로 되지 않는다면 다시 한 번 오타나 누락된 것이 있는 천천히 확인해 보세요.