구글 블로그(블로그스팟) 이미지 넘침 현상 해결하기

Essential 테마 기준으로, PC에서는 멀쩡하게 보이던 이미지가 모바일 화면에서는 너무 커서 화면 밖으로 넘어가거나, 이 때문에 가로 스크롤이 생기는 현상이 있습니다.

다행히 이 문제는 아주 간단한 CSS 코드 추가만으로 해결할 수 있습니다. 복잡한 스크립트나 플러그인 없이, 블로그 테마의 HTML 편집 기능만 이용하면 됩니다.

문제 해결을 위한 CSS 코드

아래의 CSS 코드를 여러분의 블로그 스킨에 추가하면 모바일 환경에서도 이미지가 화면 크기에 맞게 자동으로 조절됩니다.

]]></b:skin> 태그 위에 다음 CSS 코드를 삽입하세요.

/*이미지 크기 조정*/
.post-body iframe,.post-body img{
	max-width:100%
	height: auto;
	display: block;
	margin: 0 auto;
}

코드 설명

이 코드가 어떤 역할을 하는지 간단히 알아볼까요?

1. /*이미지 크기 조정*/

   • 이 줄은 주석입니다. 코드에 대한 설명을 적어 놓은 것으로, 실제 기능에는 영향을 주지 않습니다. 나중에 코드를 다시 봤을 때 어떤 목적으로 추가했는지 쉽게 알 수 있게 해줍니다.

2. .post-body iframe, .post-body img { ... }

   • 이 부분은 CSS 규칙이 적용될 대상을 지정합니다.
   • .post-body: 블로그스팟 게시물 본문 영역을 의미합니다.
   • iframe: 게시물 본문 안에 삽입된 아이프레임(예: 유튜브 동영상)을 의미합니다.
   • img: 게시물 본문 안에 삽입된 이미지를 의미합니다.
   • 즉, "게시물 본문 안의 아이프레임과 이미지 모두에게" 중괄호 {} 안의 스타일을 적용하라는 뜻입니다.

3. max-width: 100%;

   • 이미지(또는 아이프레임)의 최대 너비를 부모 요소(게시물 본문 영역) 너비의 100%로 제한합니다.
   • 예를 들어, 모바일 화면의 너비가 360px이라면, 이미지는 아무리 커도 360px을 넘지 않게 됩니다. 화면보다 큰 이미지는 화면 너비에 맞춰 자동으로 줄어듭니다.

4. height: auto;

   • 이미지의 높이를 너비 비율에 맞춰 자동으로 조절합니다.
   • max-width 때문에 너비가 줄어들면, 높이도 같은 비율로 줄어들어 이미지의 원래 가로세로 비율이 유지됩니다. 이미지가 찌그러지지 않게 해줍니다.

5. display: block;

   • 이미지를 블록(block) 요소로 만듭니다. 기본적으로 이미지는 인라인(inline) 요소처럼 취급될 때가 있는데, 블록 요소로 만들면 이미지 앞뒤로 줄 바꿈이 들어가고, 너비와 높이 값을 더 명확하게 제어할 수 있으며, 특히 다음에 설명할 margin: 0 auto; 속성을 이용한 가운데 정렬이 가능해집니다.

6. margin: 0 auto;

   • 이미지의 상하 마진(여백)은 0으로 설정하고, 좌우 마진은 자동으로 계산하여 양쪽 여백을 동일하게 만듭니다.
   • 결과적으로 이미지가 자신이 속한 영역(게시물 본문) 내에서 가운데 정렬됩니다. display: block; 속성이 있어야 제대로 작동합니다.

코드 적용 방법

이제 이 코드를 어디에, 어떻게 넣어야 하는지 알려드리겠습니다.

1. 블로그 대시보드에 접속합니다.

2. 왼쪽 메뉴에서 [테마]를 클릭합니다.

3. 현재 사용 중인 테마 아래의 [맞춤설정] 버튼 옆 아래 화살표(▼)를 클릭합니다.

4. [HTML 편집]을 선택합니다.

5. HTML 코드 편집 창이 나타나면, 코드 편집 영역 안쪽을 클릭한 후 Ctrl + F (Mac에서는 Cmd + F)를 눌러 검색창을 엽니다.

6. 검색창에 ]]></b:skin> 를 입력하고 엔터를 눌러 해당 코드를 찾습니다.

7. 찾은 ]]></b:skin> 태그 바로 위에 (이 태그를 닫기 직전에) 위에서 알려드린 CSS 코드를 그대로 복사하여 붙여넣습니다.

8. 코드 붙여넣기가 완료되면, 오른쪽 상단의 [저장] 아이콘 (💾)을 클릭하여 변경사항을 저장합니다.

확인하기

이제 스마트폰으로 블로그에 접속하거나, PC 브라우저의 개발자 도구(F12 키)를 이용해 모바일 화면 미리보기 모드로 변경하여 확인해보세요. 이전과 달리 이미지가 화면 크기에 맞게 자동으로 조절되고, 가로 스크롤이 사라진 것을 볼 수 있을 것입니다.