구글 블로거 다루기 #이미지 최대 크기 조절하기

구글 블로거 다루기

구글 블로거는 기능이 여러모로 부족한데, 그중 하나는 본문에 들어가는 이미지의 크기 조절이 어렵다는 것 입니다.

이미지의 크기 조절은 작게, 중간, 크게, 아주 크게, 원본 이렇게 5가지의 선택 옵션이 있지만 부족하기 이전에 불편합니다.

큰 사이즈의 이미지를 첨부한 뒤, 원본 크기로 설정합니다.

이미지의 원본이 상당히 큰 편이기에, 화면에 전부 나오지 않습니다.

게시물을 확인해보면 이미지가 본문 영역을 뚫고 밖으로 나가버렸습니다.

이미지의 크기 조절은 CSS를 이용하기 때문에, 본문 영역의 클래스 또는 아이디를 확인합니다.

구글 블로거의 본문 클래스는 .post-body를 사용하고, 아이디는 post-body-[ 고유번호 ] 를 사용합니다. 특정 게시물에만 적용할 경우 아이디를 사용하면 되겠지만, 이미지는 모든 게시물에 일괄적용 되야하므로 클래스를 사용합니다.

블로그 관리자 화면 → 테마 → 맞춤설정을 클릭합니다.

블로거 테마 디자이너에서 고급 → CSS 추가를 선택하고 코드를 추가합니다.

.post-body img {
  max-width:90%;
}

클래스가 .post-body이며 하위로 img 태그에 대한 스타일을 지정합니다. max-width는 말그대로 최대 넓이입니다. 이때 최대 넓이의 기준은 부모 요소를 따라갑니다. .post-body의 넓이가 800px이라면, max-width의 최대값은 800px가 되는 식입니다.

그러므로, 만약 이미지의 가로 크기가 800px, 즉 블로그 본문(.post-body)보다 작은 크기라면 이미지 크기대로 설정이 되고, 블로그 본문보다 큰 크기라면 블로그 본문 크기로 조절됩니다.

이때 90%는 최대 넓이의 90%의 넓이를 가진다는것이며 반드시 90%로 할 필요는 없습니다.
만약 이미지를 블로그 본문의 가로 크기만큼 하려면 100%로 설정해주시면 됩니다.

CSS가 적용되면 이미지의 크기가 적당한 크기로 수정되었습니다.