구글 블로거 이미지 크기 조정과 유튜브 영상 넓이 맞추는 방법

구글 블로거(Blogger, 블로그스팟)를 사용하다 보면 글쓰기는 간단한 편이지만 이미지나 동영상처럼 미디어 콘텐츠의 크기 조절은 예상보다 까다롭게 느껴질 수 있습니다.

특히 이미지가 본문 너비를 넘거나 동영상이 어색하게 잘리는 경우도 있어, 매번 삽입할 때마다 수정에 시간이 걸리곤 하죠. 이에 블로거에서 이미지와 유튜브 영상이 본문 폭에 딱 맞게 보이도록 설정하는 실질적인 방법을 공유해보려 합니다.

먼저 이미지를 본문 너비에 맞게 조절하는 방법입니다.

기본적으로 이미지를 삽입한 뒤 크기를 “원본“으로 설정하면 가장 깔끔한 형태로 나오지만, 여전히 본문 너비에 정확히 들어맞지는 않습니다.

구글 블로그 테마 설정에서 CSS를 직접 추가해주는 방식이 가장 안정적이기 때문에 블로그 관리자 화면으로 이동해 테마 > 사용자 지정 > 고급 > CSS 추가 항목으로 들어가 아래와 같은 코드를 입력해 주세요.

.post-body img {
  max-width: 100%;
  height: auto;
}

이 설정을 적용하면 이미지가 자동으로 본문 폭을 넘지 않게 줄어들며, 비율은 그대로 유지됩니다.

또한 모서리를 드래그하거나 ‘매우 크게’ 옵션을 사용하는 방식보다 훨씬 더 정확하고 반응형에도 잘 맞는 설정입니다.

이번에는 유튜브 동영상처럼 iframe으로 삽입되는 콘텐츠를 다뤄보겠습니다.

블로거에서 유튜브를 그냥 붙여넣기 하면 크기가 고정되어 있어서 모바일 화면에서는 튀어나오거나 빈 공간이 생기기 쉽습니다. 이를 해결하려면 동영상을 감싸는 div 컨테이너와 함께 CSS를 설정해줘야 합니다.

CSS는 다음과 같이 입력합니다.

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 비율 */
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

그리고 HTML에는 이렇게 구성해 주세요.

<div class="video-container">
  <iframe src="https://www.youtube.com/embed/영상ID" frameborder="0" allowfullscreen></iframe>
</div>

위 구조는 모바일과 데스크탑 환경 모두에서 동영상이 본문 너비에 자연스럽게 맞춰지도록 해줍니다. 블로거 특성상 기본 에디터만으로는 어려울 수 있지만, 이렇게 한번 세팅해두면 이후에는 반복적으로 활용하기도 좋습니다.

국내 블로그 플랫폼에 비해 사용자 편의성이 부족하다는 평이 있지만, 위와 같은 방식으로 블로거에서도 충분히 세련된 레이아웃을 구현할 수 있습니다. 익숙해지기 전까진 조금 번거로울 수 있지만, 반복적으로 사용하다 보면 빠르고 유연한 글쓰기를 경험할 수 있을 것입니다.

댓글 남기기 응답 취소