구글 블로그스팟 이미지 쉽게 올리는 방법과 정렬하는 법
구글 블로그스팟은 이미지 업로드 시스템이 정말 귀찮고 거지같습니다.
'엥? 워드프레스에 비하면 천사인 것 같은데?'
그건 맞는데, 티스토리에 비하면 정말 어이없을 정도로 사용자에게 불친절한 편입니다.
블로그스팟이 얼마나 불친절 하길래? 티스토리가 어떻길래?
 |
| 티스토리 에디터 화면 |
티스토리 글쓰기 에디터 화면은 믿을 수 없을 정도로 사용자 친화적인 페이지를 제공합니다.
만약 이미지를 업로드하고 싶다면, 인터넷에서 찾은 이미지를 컴퓨터에서 저장할 필요도 없이 그냥 인터넷 페이지에서 긁어 드래그해서 바로 에디터 화면 위에 드랍하면 업로드가 끝납니다.
 |
| 그냥 드래그하면 자동으로 붙여넣어지며 동시에 카카오 서버에 업로드되고, 이미지 링크를 생성하는 것이 아니기 때문에 추후 해당 이미지가 퍼온 인터넷 사이트에서 없어진다 해도 내 포스팅에서 이미지가 깨지지 않습니다. |
 |
| 티스토리에서는 이미지 상단의 '크기 변경' 버튼을 눌러 이미지의 좌우 폭을 손쉽게 픽셀단위로 세밀히 조절할 수도 있고 |
 |
| 이미지 위에다 다른 이미지를 드래그하여 겹쳐 올려 놓으면 |
 |
| 좌우 병렬 구조로 나란히 이미지를 배치할 수도 있습니다. 한 번에 병렬로 정렬할 수 있는 그룹 이미지는 총 3장까지 설정할 수 있습니다. |
이미지 배치 순서를 변경하는 것도 마찬가지로 너무나도 간단합니다.
 |
| 배치를 바꾸고 싶은 이미지를 클릭하여 다른 이미지의 위로 드래그하거나 (빨간 줄이 이미지 위에 나타남) |
 |
| 밑으로 드래그하면 끝입니다. (빨간 줄이 이미지 밑에 나타남) |
반면 블로그스팟은...
원래 구글 블로거 블로그스팟에는 그냥 에디터 글쓰기 창에 이미지를 드래그해서 붙여넣는 기능이 없었습니다.
심지어 이미지 삽입 버튼 자체에도 드래그 해서 업로드 하는 기능이 없어 내 컴퓨터에 저장된 이미지 파일을 일일히 탐색창에서 찾아 올려야 했는데, 지금은 이미지 삽입 기능을 사용해도 되고, 에디터 창에 붙여넣고자 하는 이미지를 드래그해서 갖다 넣어도 됩니다.
 |
| 에디터 화면 우측 상단 이미지 삽입 버튼을 누른 뒤 |
 |
| 이미지 추가 화면에서 이미지를 업로드 합니다. 내 컴퓨터에서 업로드 할 수도 있고, 웹페이지에서 가져온 이미지를 업로드 할 수도 있습니다. |
 |
| 혹은 에디터 화면에서 바로 드래그 앤 드롭으로 갖다 붙여 넣어도 이미지가 업로드 됩니다. 원래는 없었던 기능입니다. 다만 확인을 해보지 않아서 잘은 모르겠지만, 이 방법은 안정적이지 않은 것으로 알려져 있습니다. 경우에 따라 퍼온 원본 이미지의 링크가 깨지면 이미지가 표시되지 않는 경우도 발생한다고 합니다. |
이미지의 순서를 바꾸려는데 자꾸 이미지가 이상한 위치로 튈 때
구글 블로그스팟 에디터 화면에서 이미지를 붙여넣으면 위아래로 줄바꿈이 일어납니다.
문제는 이 줄바꿈이 보통 모드로 일어난다는 점에 있습니다.
보통 모드로 일어난 줄바꿈 위에서 새로운 이미지를 붙여넣으면, HTML 상에서 이미지들이 서로 굉장히 조밀하게 붙어있게 됩니다.
따라서 이러한 이미지들을 따로 떼어주지 않으면 다른 위치로 복사 & 붙여넣기 할 때 위치 오류가 발생합니다.
간단한 해결 방법은 에디터 화면에 업로드 한 이미지를 복사하고 다시 원하는 위치에 붙여넣을 때, 단락 형식으로 지정된 줄에 붙여넣으면 정렬이 올바르게 이루어집니다.
 |
| 이미지를 붙여넣을 줄을 '단락 형식'으로 지정한 뒤 붙여넣으면 이미지 정렬 시 위치가 불필요하게 튀는 오류가 발생하지 않습니다. |
구글 블로그스팟에서 이미지를 한 줄에 양쪽으로 정렬하려면?
다음 코드를 HTML 모드에서 입력하고 붉은 별표 ★ 부분에 업로드 된 이미지의 URL을 붙여넣으면 이미지가 양쪽 병렬로 정렬됩니다.
붉은 별표 ★ 부분에 삽입될 이미지의 주소는 반드시 <img src="이미지 주소"> 태그로 감싸주어야 합니다.
그리고 태그 내에 삽입된 이미지의 좌우 너비는 width="100%" 로 변경해 줍니다.
만약 이미지 코드에 높이를 지정하는 코드인 height="숫자"가 기입되어 있다면 삭제해버리면 됩니다.
만약에 티스토리에서 했던 것처럼 블로그스팟에서도 이미지를 그냥 드래그해서 병렬로 배치한다면?
이렇게 배치하면 컴퓨터 PC 환경에서는 이미지가 양쪽으로 병렬 배치된 것으로 보이지만, 태블릿 PC나 스마트폰 핸드폰 등 모바일 환경에서는 이미지 위치가 바뀌어 위아래로 수직 배치됩니다.
만약 위 태그를 이용하여 이미지를 다시 삽입하면
 |
 |
이렇게 좌우로 병렬 배치됩니다.
만약 이미지를 감싸고 있는 검은 선을 없애고 싶다면
<table border="1" cellpadding="5" cellspacing="0" style="width: 100%;"> 코드에서
table border="1" 부분을
table border="0"으로 변경하면 됩니다.
 |
| 정말이지 귀찮기 짝이 없습니다. |