[구글 블로거] 이미지 가로로 넣기 + 가운데정렬 코드 (table방식) + 글쓸때 주의사항 기록 (지속수정 예정)(수정1)

* 수정1(2024-02-21) : 이미지 복붙가능 설명추가

구글 블로거는 네이버,티스토리에 비해 글쓰기가 엄청나게 불편하다는 단점이 있다.

이미지 가로넣기도 html 모드에서 추가해야 하는 게 가장 불편한 점이다.

인터넷 서핑,테스트 후 가장 좋은 코드를 만들어 기록.

★이미지1개만 넣을땐, 윈도우 폴더에서 복사->붙여넣기 로도 들어가지만, 파일을 못 읽을때도 있음(원인불명).

 이미지 2개이상 가로로 정렬할 때는 아래 과정이 필요하다.

★ 테마 마다 보이는게 다르므로, 반드시 실제로 어떻게 보이는지 확인 필요. 

■■ 1. 이미지 가로로 넣는 코드 (가운데정렬 됨. 칸 내 공간 수정됨)

■ 코드 1 (어떻게 보이는지는 아래에 비교)

<table border="0" cellpadding="1" cellspacing="0" style="margin-left:auto; margin-right:auto;">

<tbody>

<tr>

<td>

</td>

<td>

</td>

</tr>

</tbody>

</table>

-------------------------------------------------------

 (테이블을 만들어 안에 넣는 방식)

- 위 <td> 태그와 </td> 태그 사이클 클릭해서 이미지를 한장씩 넣으면 된다.

 만약 이미지 3장을 넣고 싶으면 <td></td> 태그를 하나 더 추가하면 된다.

- cellpadding="1" 의 의미는 칸 안의 공간을 1을 줘서 사진 사이에 간격을 보이게 만든다.

- table border="0" 의 의미는 테이블 선을 안보이게 한다는 의미.

- <tr>은 테이블 가로줄 구분이고, <td>는 칸 구분이다.

  </ 가 붙은 태그는 태그를 닫는다는 의미다. 태그는 열었다면 반드시 닫아야 한다.

- style 부분이 가운데정렬을 위한 부분.

- 단점 : 이미지 사이 구분 칸이 안보임 (글작성 모드에서만 공간 있는것처럼 보임)

■ 코드 2 (이미지 사이 구분선 확보)

<table border="1" cellpadding="1" cellspacing="0" style="border:hidden; margin-left:auto; margin-right:auto;">

<tbody>

<tr>

<td>

</td>

<td>

</td>

</tr>

</tbody>

</table>

-----------------------------

- 주의 : 글작성 모드에서만, 테이블 가장자리가 보이는 것처럼 나옴.

           실제 볼땐 가장자리는 없고, 이미지 사이에 희미한 회색선

■■ 2. 이미지 가로로 넣는 방법 - 글작성중 html모드로 바꾸고 코드를 넣기 -> 이미지 넣기

1. 글 사이에 넣고싶다면,

2. 먼저 HTML보기로 바꿔야한다. 그리고 글 앞의 <p 태그를 찾아야 한다. (<div 일수도 있음)

 거기서 엔터치고 위의 코드 추가

3. 아래처럼 <p 태그에서 엔터쳐서 공간 확보 후 <table~ 코드를 추가하였다.

 <td> 와 </td> 사이를 클릭하고 이미지를 1장씩 넣는다.

4. 아래처럼 이미지 코드가 삽입되었음.

5. '새 글 작성 보기' 모드로 바꾸면 다음과 같이 들어간다.

* 코드1 실제 보이는 모습 (Contempo 테마 기준. 아래 다른 코드들과 비교)

▲ 가운데정렬 됨.

* 코드2 실제 보이는 모습

▲ 가운데정렬 됨 + 이미지사이 공간 확보(희미한 회색선)

■■ 3. 참고용 - 인터넷에서 찾은 코드들과 비교

: 인터넷의 코드들은 테이블 방식과 div 방식으로 구분됨.

1-1. 테이블 방식 코드1

<table border="1" cellpadding="0" cellspacing="0" style="width: 100%;">

<tbody>

<tr>

<td>

</td>

<td>

</td>

</tr>

</tbody>

</table>

1-2. 위 코드의 보이는 모습

▲ 가운데정렬은 되지만, 이미지 사이 간격이 넓다.

table border="1" 로 줘서 테이블 줄이 보이는 것임.

2-1. div방식 코드 1

<div style="display: flex; text-align:center;">

    <div class="separator" style="clear: both; text-align: center;">

   </div>

   <div class="separator" style="clear: both; text-align: center;">

   </div>

</div> 

----------------------------------------------

: 「<div class = "separator"」 부분은, 이미지 삽입할때 자동으로 되므로 불필요하다. 

 따라서 이 코드는 아래처럼 간략화 할 수 있음.

2-2. div방식 코드 2(간략화 버전)

<div style="display: flex; text-align:center;">

    <div>&nbsp;</div>

</div> 

---------------------------------

- <div 사이의 공간(2,4번째 빈줄)을 클릭후 이미지를 넣으면 됨.

- 「<div>&nbsp;</div>」 는 이미지 사이 구분을 위한 것임.

- 가운데정렬이 안되는 단점. 여러가지 해보았으나 실패. 다른 방법이 있는지는 모르겠음.

2-3. div방식 코드 2의 보이는 모습

▲ 좌정렬 밖에 안된다(가운데정렬이 안됨).

=> 결론적으로 가장 위에 쓴 코드 2개를 추천합니다.

■■ 구글 블로거 - 주의사항 기록

1. 태그시 주의

: ★ 태그에 '+' 문자 쓰면 그 글은 안보인다. 원인불명. 그러니 '+'문자는 제외한다.

 ▲ 태그에 '+'가 들어있으면 글이 안보여 버린다.

▲ '+' 문자를 '/'로 수정하니 보인다.

2. 글을 가운데정렬을 해도 왼쪽정렬로 남아있을때

: 해당 글을 잘라내기(Ctrl+X) 후, Ctrl+Shift+V (형식없애고 글만 붙여넣기)로 붙여넣기 한다

3. 이미지를 넣었는데 안들어갈 경우 (주로 복붙한 글 사이에 넣을 때 발생)

: 해당 글 사이의 공백을 지운 후 다시 이미지 업로도.