구글 블로그에서 이미지를 같은 라인에 나란히 배치하는 방법

몇 번이나 했던 말이지만, 정말 불편한 구글 블로그의 에디터..

구글 블로그의 에디터는 타 블로그처럼 이미지를 같은 라인에 정렬하는 기능도 제공하지 않는다.

하지만 글을 쓰다 보면 이렇게 같은 라인에 이미지 두 개를 표시하고 싶을 때가 있다.

특히 지금 캡처한 이미지처럼 세로로 긴 이미지 2개를 한꺼번에 본문에 삽입할 때..!

이런 상황에서 이렇게 이미지를 같은 라인에 두지 않고 세로로 하나씩 삽입하게 되면 (특히 데스크톱 환경에서는) 보기도 불편하고 스크롤도 길어진다.

지금부터 구글 블로그에서 이렇게 이미지를 같은 라인에 나란히 배치하는 방법을 알아보자.

템플릿(스킨)에 저장할 코드

구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.

그리고 [ctrl + F] 키를 누르고 본인이 직접 추가해 놓은 CSS 코드가 모인 곳을 찾는다.

.img-flex{
  display: flex;
  column-gap: 0.5em
}
@media (max-width: 600px) {
  .img-flex{
    flex-direction: column
  }
}

거기에 이 CSS 코드를 추가하고 저장한다.

모바일 환경에서는 이미지가 같은 라인에 나란히 있으면 이미지 크기가 너무 작아지기 때문에, 모바일에서는 이미지가 원래대로 세로로 정렬되도록 했다.

혹시 모바일에서도 이미지가 가로로 정렬되기를 원한다면 @media (max-width: 600px) { ... } 부분을 삭제하면 된다.

포스트 본문에 추가할 코드

<div class="separator" style="clear: both; text-align: center;">
    <a href="이미지 URL" style="margin-left: 1em; margin-right: 1em;">
        <img alt="..." src="이미지 URL" />
    </a>
</div>

이 코드는 에디터로 이미지 하나를 삽입했을 때 생기는 코드다.

이미지를 같은 라인에 나란히 배치하고 싶다면 아래와 같이 수정해야 한다.

<div class="img-flex">
    <a href="이미지 URL">
        <img alt="..." src="이미지 URL" />
    </a>
    <a href="이미지 URL">
        <img alt="..." src="이미지 URL" />
    </a>
</div>

링크를 감싸는 <div> 태그의 class를 변경하고, style 속성을 삭제했다.

그리고 <a> 태그의 style 속성도 삭제해야 한다.

혹시 이미지 3개를 나란히 배치하고 싶다면 <div> 태그 안에 이미지를 3개 넣으면 된다.

한 가지 주의할 점

같은 라인에 이미지를 3개 넣어보았다.

그런데 이렇게 같은 라인에 넣는 이미지들의 비율이 같아야 한다.

비율이 다를 경우에는 이렇게 예쁘지 않게 정렬된다.

서로 다른 비율의 이미지라도 같은 라인에 뒀을 때 비율이 변하지 않고 예쁘게 정렬되도록 할 수도 있겠지만, 그렇게 하려면 코드도 그만큼 길어지고, 또 이미지를 그렇게 배치할 일은 딱히 없을 것 같아서 최대한 적은 코드로 이렇게 끝냈다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.