구글 블로그스팟 사진 나란히 넣는 방법

나란히 배치된 티스토리 이미지

티스토리는 드래그앤 드롭만 하면 됩니다.

티스토리에서 이미지를 넣을 때 사진을 나란히 배치하려면 그냥 드래그앤 드롭으로 끌어다가 사진 옆에 두면 되었습니다

하지만 구글 블로그스팟은 드래그앤 드롭으로 사진을 끌어다가 놓으면 사진이 사라져버립니다.

알고보니 구글 블로그 스팟에서 자체적으로 사진을 나란히 배치하는 기능은 없고 html 코드를 만져야만 사진을 나란히 배치할 수 있습니다.

html코드에서 1줄 2칸으로 구성된 표를 넣어주고 각각의 공간에 사진을 집어넣는 방식입니다.

구글 블로그 스팟 사진 나란히 넣는 방법

블로그 스팟 글쓰기 에디터

HTML 보기

구글 블로그 스팟에서 새글을 누르고 HTML 보기로 들어갑니다.

여기에 먼저 표를 넣을 것입니다.

표를 넣는 HTML 코드는 다음과 같습니다.

HTML 코드 입력

<td>와 </td>사이에 이미지 주소를 넣어줘서 각각의 표에 이미지를 넣을 것입니다.

이미지 주소는 먼저 이미지 업로드를 해야 알 수 있으니 이미지 업로드를 해줍니다.

이미지 업로드

컴퓨터에서 업로드를 누르고 이미지를 두개 업로드 합니다.

이미지 주소 복사

그럼 <div class="separator" 로 시작하는 코드가 입력됩니다.

사진 두개를 올렸으니 <div class로 시작하는 코드도 두개입니다.

각각의 코드에서 <img alt로 시작하여 </a>앞까지가 이미지 주소입니다.

이 이미지 주소를 복사하여 <td> </tr> 사이에 넣어줍니다.

두번째 이미지 주소 복사

두번째 사진도 이어서 주소를 복사한 뒤 <td></tr> 사이에 붙여넣기 해줍니다.

이미지 주소 넣기 완료

그리고 업로드한 사진들의 html 코드는 지워줍니다.

그 다음 파일의 확장자 뒷부분에 "width="100%"를 넣어줍니다.

제 이미지 파일은 webp"여서 여기 뒤에 넣어줬습니다.

이미지 크기 조절

width="100%"는 화면의 크기가 바뀌어도 그에 맞추어 이미지가 화면에 꽉차도록 크기를 조절해줍니다.

구글 블로그스팟 이미지 나란히 배치

다시 새글 작성보기로 돌아와서 보면 완성입니다.

글 미리보기를 눌러 구글 블로그스팟, 구글 블로그에서 이미지 두개가 나란히 배열됨을 볼 수 있습니다.