티스토리 포스팅 시 ' ' 공백 태그 등 HTML 태그 정리하기

문서편집기에서 쓴 글을 메모장으로 옮긴 후 포스팅창(기본모드)에 붙여 넣을 경우, HTML모드에서 보면 '&nbsp; ' 태그가 무지막지하게 생긴 것을 알 수 있다. 또한 문단 줄 바꿈 시 <p> 태그 대신 <br> 태그가 모두 적용돼 이로 인해 제목을 H 태그로 바꿀 때 글 전체가 전환되는 불상사가 생기기도 한다.

일일이 엔터로 수정하는 방법도 있으나, 아래는 이 모두를 한꺼번에 조정하기 위한 방법으로 3단계로 나누어 정리해 본다.

 

1단계. 지저분한 공백 태그 '&nbsp;' 한꺼번에 없애기

 

편집기에서 쓴 글을 메모장을 거쳐 티스토리 포스팅창 기본모드에 붙여넣기 한 후 html 모드로 전환해 보면 무수히 등장하는 &nbsp; 태그, 아래는 이를 해결하기 위한 방법.

 

1. HTML 모드에서 본문을 전체 복사해 메모장에 붙여넣기한다.(여기서 사전단계로 기본모드에서 제목 아래로 엔터 두 번을 치면 메모장에서 작업 시 필요한 p관련 태그를 긁어 쓸 수 있다)

 

2. 메모장 편집/바꾸기에서 위칸에는 '&nbsp; '를 넣고 아래칸에는 <한 칸 띄우기:스페이스바)를 넣은 후 모두바꾸기한다.

 

3. 일단 '&nbsp; '만 해결할 생각이면, 이 단계까지만 진행하고 티스토리 편집창 HTML모드에 모두 붙여넣기 한 후, 기본모드로 갔다가 다시 돌아온다. '&nbsp; '가 모두 정리됐음을 알 수 있다.

 

2단계. 남발되는 <br /> 태그를 <P> 태그로 바꾸어 문단 구분도 하고 제목 태그 설정도 쉽게 하기

 

 

1. 1단계에서 복붙한 메모장 상태에서 이번에는 편집/바꾸기에서 위 칸에는 <br />를, 아래칸에는 <p data-ke-size="size16">&nbsp;</p>를 넣어 모두바꾸기한다. 이는 단순 줄바꿈인 <br /> 태그를 문단을 나타내는 <p> 태그로 바꿔주기 위한 것이다. 이렇게 해야 제목에 H태그를 붙일 때 본문이 따라붙지 않는다.

 

2. 위 내용을 모두 복사해 티스토리 포스팅창 HTML에 붙여넣기 한다. 그러나 보면 줄마다 <p data-ke-size="size16">&nbsp;</p> 이 들어가 있음을 알 수 있다. 기본모드에서 확인해 봐도 줄마다 한 줄 띄우기가 돼 있다. 이는 'P'가 문단의 의미이기 때문이다.

 

3. P태그는 일단 제껴두고 기본모드에서 H(제목) 설정을 한다. 제목 1은 h2, 제목 2는 h3… 식이 된다.

 

4. 다음, 이 띄워진 줄을 없애야 하는데, 이것저것 시도해 본 결과, 그냥 기본모드에서 수동으로 작업하는 것이 가장 수월함을 확인했다. 즉 커서를 놓고 delete키나 back space키로 불필요한 줄을 없애고 또 간격도 주는 것이다.

 

3단계. 줄 바꿈 세부조정하기 : <br /> 태그와 <P> 태그 정확히 구분해 주기

 

1. 2 단계를 거치면 지저분한 공백 태그도 해결됐고, 또 글의 모양이 어느 정도 갖추어졌다.

그러나 html에서 보면 모든 줄바꿈이 <P> 태그로 전환돼 있음을 알 수 있다. 이는 일부 수정해 주어야 한다. 왜냐하면 하나의 문단(적어도 문장)이 끝나는 것은 <P> 태그가 맞으나 그냥 시각적인 줄바꿈을 할 때라든가, 문장은 끝나지만 하나의 문단으로 묶어주어야 할 경우에는 <br /> 태그로 줄바꿈을 해야 맞기 때문이다.

 

따라서 <br /> 태그로 바꿀 곳에는 기본모드에서 'delete' 혹은 '백스페이스'로 줄을 붙여준 후, 'shitt+엔터'를 쳐서 줄바꿈해준다. (그냥 엔터를 치면 <P> 태그가 형성되고, 'shitt+엔터'를 치면 <br /> 태그가 생긴다)

 

2. 모두 깔끔히 마무리되었다. HTML 모드와 기본모드에서 확인 후, 기본모드로 발행한다.

 

4. 기타

 

일단 '&nbsp; ' 공백 태그를 정리하고, <br> 태그를 P태그로 바꾸어 문단을 정리하며, 제목 태그인 H태그를 보다 수월하게 넣는 법을 익혔다. 하지만 html을 들여다 보면 그 외에도 의도하지 않게 생긴 여러 태그가 있음을 알 수 있다. 이 역시 코딩을 모른다 하더라도 기본모드와 Html모드를 비교해보면 각각 무엇을 의미하는 태그인지 알 수 있다. 조정해 줄 수 있는 것은 조정해 준다.

그러나 일일이 모든 것을 손대기엔 복잡하기도 하거니와 시간 손실 또한 많으니 패스할 수도 있다. 어쨌든 '&nbsp; 태그', 그 지저분한 것들만 해결해도 산뜻해진다.

 

▣ 함께 보면 좋은 글

 

 [티스토리 서식 꿀팁] 웹 창에서 글 쓸 때 글자 한번에 (한꺼번에) 바꾸기

[티스토리 서식 꿀팁] 웹 창에서 글 쓸 때 글자 한번에 (한꺼번에) 바꾸기

디스토리 목차만들기, 자동 목차 만드는 법

디스토리 목차만들기, 자동 목차 만드는 법

티스토리, 멈출 이유 없다! 방문 통계와 수익 통계 그래프에서 힘을 얻다

티스토리, 멈출 이유 없다! 방문 통계와 수익 통계 그래프에서 힘을 얻다

구글 애드센스, 우리은행 크리에이터 통장에서 송금받는 방법

구글 애드센스, 우리은행 크리에이터 통장에서 송금받는 방법

티스토리의 시작, 카카오계정 구글메일로 만들기

티스토리의 시작, 카카오계정 구글메일로 만들기

티스토리, 애드센스 승인과 광고송출까지 문제해결 깨알 경험기

티스토리, 애드센스 승인과 광고송출까지 문제해결 깨알 경험기

[티스토리] 애드센스 승인 느긋하게 받는 법

[티스토리] 애드센스 승인 느긋하게 받는 법

구글 애드센스 승인을 위한 조처, 수상한 댓글 차단, IP차단

구글 애드센스 승인을 위한 조처, 수상한 댓글 차단, IP차단

애드센스 대금을 받기 위한 본인 확인

애드센스 대금을 받기 위한 본인 확인

티스토리, 구글 애드센스 PIN 번호가 오기까지

티스토리, 구글 애드센스 PIN 번호가 오기까지

[디지털 노마드 일기] 티스토리 7개월차. 애드센스 수익정산과 광고게재제한 조치 & 유튜브를 시작하게된 이야기

[디지털 노마드 일기] 티스토리 7개월차. 애드센스 수익정산과 광고게재제한 조치 & 유튜브를 시