에디터에서 태그 일부 및 전체 없어지는 것

 

이 글에서 티스토리 에디터 HTML 상태에서 HTML, CSS, 스크립트 사용에 대한 나만의 팁을 적으려 한다. 

 

아래에서 적을 내용은 HTML 상태에서 HTML, CSS, 스크립트 삽입에 대한 내용이다. 이 글을 쓰면서 알았지만 예전에 HTML 블록이라는 것이 없었다. HTML 블록은 기본에서 사라지는 것 없이 HTML을 삽입하는 방식인 것 같다. 

---

 

일부 없어짐

 

예전에 적었듯 티스토리 에디터는 제한 없이 HTML, CSS, 스크립트를 지원하는데 에디터가 변경된 후 에디터를 기본에서 HTML로 변환하면 태그 일부나 전체가 사라진다. 에디터 변경 후 나는 이것 때문에 한동안 고생했다. 예로 유튜브를 기본모드에서도 삽입할 수 있지만 HTML로 삽입하면 아래 그림처럼 소스로 삽입해야 할 것이다. 

 

 

그런데 에디터를 HTML에서 소스 삽입 후 기본모드로 전환한 후 다시 HTML로 돌아온다. 그러면 아래 그림처럼 일부 태그가 없어지고 일부 태그가 덧붙여진 확인할 수 있다. 다행히 없어져도 상관없는 것이 없어졌지만 때로 없어지면 안 되는 경우가 많다. 

 

 

 

전체  없어짐

 

위에서 일부가 없어졌지만 SVG 태그는 전부 없어진다. 아래 그림처럼 HTML 상태에서 SVG 태그를 입력한 후 기본모드에 간다. 다시 HTML에서 작업하기 위해 오면 두 번째 그림을 보면 전에 입력한 태그가 전부 사라진 것을 확인할 수 있다. 

 

 

아래 사각형은 아래 SVG 태그를 삽입한 결과다. 그리고 아마 어떤 사람은 GIF, PNG,JPG 등 이미지라 생각해 저장하려고 할 것이다. 의심되면 마우스 오른쪽 버튼을 풀어서 저장해 보기 바란다. 

 

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

 

---

해결

티스토리 에디터에서 HTML, CSS, 스크립트를 사용한 후 특정 태그가 없어지는 것을 확인한 후 이상 있으면 수정하면 안 된다. 티스토리 에디터의 상태는 기본 모드, 마크 모드, HTML이 있는데 기본은 무조건 기본 모드라는 것이다. 3가지 중 하나를 선택할 수 없다. 글 수정을 위해 수정을 하면 기본모드가 된다. 그러면 삽입한 HTML, CSS, 스크립트가 사라진다.

 

아래 글을 일절 수정하지 않는다. 왜냐하면 수정을 위해 클릭하면 무조건 기본 설정이 기본모드이기 때문에 HTML에 설정한 CSS라 사라져 확대하기가 되지 않는다.  

 

CSS로 이미지 부드럽게 확대하기

 

내가 적는 방법은 적자면 이미지나 유튜브 삽입 등은 기본모드로 한 후 마지막에 HTML, CSS, 스크립트를 삽입한 후 글쓰기를 마친다. 처음부터 HTML 등을 삽입하면 사라진다. HTML 상태에서 마친 후 수정하지 않는다.

---

기본모드에서 HTML 삽입인 HTML 블록이 추가된 후 HTML, CSS, 스크립트를 HTML 블록으로 삽입하면 된다. HTML 등을 HTML 블록으로 삽입했다면 글을 수정해도 된다. 위에서 언급한 SVG 태그는 HTML 블록으로 삽입했다. 그러니 이 글을 수정해도 사라지지 않는다.