구글 블로그 첨부 이미지 사이즈 '중간'이 아닌 '매우 크게'로 삽입하는 방법

▶ 요약: 모든 이미지의 가로 사이즈가 전체 창에 맞게 확장된다. 너무 작은 이미지는 이상하게 노출될 수 있다. 

▶내용

구글 블로그는 글쓰기 에디터가 상당히 불편하다.

그래서 다른 곳에 글을 쓴 후 붙혀넣기 방식으로 글을 포스팅하고 있다.

구글 블로그에 직접 글을 쓰면서, 이미지를 삽입 할 때 이미지의 세로폭은 유지하면서 가로폭을 창의 전체로 노출하고 싶을 때 아래 방법을 사용하면 된다.

실제 적용을 했다가 지금은 원복을 한 상태이다.

그 이유는 너무 작은 이미지는 세로 폭까지 함께 늘려버려서 이미지가 이상하게 노출된다. 

전체적으로 큰 이미지만 사용하는 블로그에 적합한 설정이다. 

1. CSS 코드를 추가해 자동으로 꽉 차게 만들기
구글 블로그 관리자 화면 왼쪽 메뉴에서 테마(Theme)를 클릭합니다.
'맞춤설정(Customize)' 옆의 주황색 화살표(▼) 버튼을 누르고 HTML 편집을 선택합니다.
코드 창 아무 곳이나 클릭한 뒤 Ctrl + F를 눌러 검색창을 띄우고 </skin> 또는 ]]></b:skin>을 검색합니다.
찾은 코드 바로 윗줄에 아래의 CSS 코드를 복사해서 붙여넣습니다.

/* 업로드된 이미지를 본문 가로폭에 강제로 꽉 채우는 설정 */
.post-body img, .post-body .separator img {
  width: 100% !important; /* 가로 크기를 본문 너비에 강제로 맞춤 */
  max-width: 100% !important;
  height: auto !important; /* 세로 비율은 원본 유지 */
  display: block;
  margin: 0 auto 1.5em auto; /* 가운데 정렬 및 아래쪽 여백 */
}

2단계. 구글 에디터에서 '원본 크기'로 설정하기
구글 블로그는 이미지를 업로드하면 내부적으로 여러 크기(작게, 보통, 크게, 매우 크게, 원본)의 이미지 링크를 생성합니다. 

기본값인 '보통'으로 삽입되면 구글 서버에서 애초에 아주 작은 크기(가로 320px 수준)의 압축된 이미지를 불러옵니다.
이 상태에서 1단계 CSS만 적용해 억지로 100%로 늘리면 이미지가 심하게 깨지고 흐려지게 됩니다. 

화질을 지키면서 꽉 차게 만들려면 글을 쓰실 때 딱 한 번 클릭해 주셔야 합니다.

2단계는 이미지를 클릭하고 '원본'을 다시 클릭 해야 함을 의미한다.

이 작업을 하지 않으면 '중간' 크기의 이미지로 전체 확장 된다. 

'매우크게'가 가장 적당한데, 

위 1단계 후 2단계를 필히 해줘야 하기에 이 설정은 권장하지 않는다.

화질이 중요하지 않고 블로그 폭에 모든 이미지가 맞게 노출되어야 하는 블로거에게 적합한 설정이다.