구글 블로그에서 이미지가 깨지거나 작게 보일 때 해결하는 방법
구글 블로그에서는 이미지를 삽입할 때 편집기에서 자동으로 크기를 설정할 수 있습니다. 그러나 기본 설정만으로는 모바일과 데스크탑 환경에서 이미지가 깨지거나 비율이 맞지 않는 경우가 자주 발생합니다.
특히 본문 너비보다 이미지가 작게 보이거나, 모바일에서는 화면 밖으로 튀어나가는 문제가 발생할 수 있습니다. 이 경우에는 HTML 태그와 스타일을 직접 지정해주는 방식이 가장 안정적입니다.
1. 이미지 업로드는 에디터 기능을 사용
구글 블로그에는 이미지 삽입 버튼이 기본으로 제공됩니다. 여기서 이미지를 업로드하면 자동으로 HTML 코드가 생성됩니다. 이 코드를 기반으로 너비와 정렬을 직접 설정할 수 있습니다.
단, 삽입 후 편집기 상에서 ‘원본 크기’ 또는 ‘아주 큰 크기’를 선택하면 레이아웃이 비정상적으로 출력될 수 있으므로, 직접 크기를 지정하는 것이 더 정확합니다.
2. HTML 모드에서 스타일 지정하기
작성 중인 글의 편집기를 HTML 모드로 전환합니다. 업로드된 이미지는 다음과 같은 형태로 표시됩니다.
<img src="이미지주소" />이 구조에 아래와 같이 스타일 속성을 추가해줍니다.
<img src="이미지주소" style="width:100%; height:auto; max-width:800px; display:block; margin:auto;" />이 설정은 데스크탑과 모바일에서 동일하게 작동하며, 레이아웃 오류를 줄여줍니다.
3. 모바일 환경에서도 비율 유지
`height:auto`를 지정해주면 이미지의 세로 비율이 자동으로 유지되므로 찌그러지거나 늘어나는 현상을 방지할 수 있습니다.
또한, 템플릿 자체에 강제 스타일이 지정된 경우를 대비해 `!important`를 옵션으로 추가할 수도 있습니다.
<img src="이미지주소" style="width:100% !important; height:auto !important;" />
4. 이미지가 너무 흐리게 보일 때
블로거 자체에서 자동으로 리사이즈된 버전의 이미지를 불러오는 경우, 이미지 품질이 낮아질 수 있습니다.
이때는 이미지 주소 끝의 `/s320/` 등의 파라미터를 삭제하거나 `s1600`으로 수정해 고해상도로 출력할 수 있습니다.
5. 정렬 문제는 margin으로 해결
아래는 정렬별 스타일 코드입니다.
왼쪽 정렬:
<img src="이미지주소" style="width:100%; height:auto; margin:0;" />가운데 정렬:
<img src="이미지주소" style="width:100%; height:auto; display:block; margin:auto;" />오른쪽 정렬:
<img src="이미지주소" style="width:100%; height:auto; display:block; margin-left:auto;" />
6. 반복 사용을 위한 기본 형식 저장
HTML 모드로 매번 입력하는 것이 번거롭다면 자주 사용하는 형식을 별도 저장해 두는 방식이 효율적입니다.
댓글 쓰기