사라졌는지 확인

개인적으로 아래처럼 이미지에 마우스 포인터를 올리면 이미지 중앙에 아이콘이 나오게 하는 것을 좋아한다. 그래서 이 글에서 어떻게 적용하는지 소스 등을 이 블로그 글에 적용했는지 설명하려고 했다. 그런데 메모한 것을 수정하려고 하면 작성한 CSS가 사라져 그냥 적용과정을 적기보다 아래와 같은 것을 적용하는 것을 배울 수 있는 사이트를 적는 것이 좋다고 생각했다. CSS 사라지는 것은 새 에디터에 대한 에러고 구 에디터는 관계없다.

 

 

위는 티스토리 블로그에서 적용한 것이고 일반 사이트에서 적용하는 것은 아래 두군데 페이지에서 배울 수 있다. 단 그 페이지는 영어라는 사실을 알았으면 한다.

 

첫 번째 두 번째

 

이런 간단한 글을 작성하기 위해 기본모드가 아닌 내 컴퓨터에 설치된 텍스트 에디터로 글을 작성한 후 티스토리 블로그 에디터의 HTML 모드로 변환하고 붙였다. 티스토리 블로그 에디터의 HTML로 되지만 글을 HTML로 작성할 바에는 컴퓨터에 설치된 텍스트 에디터가 편하다.

 

새 에디터에서 CSS가 없어지니 뭔 개고생인지...CSS가 없어지는 그림도 삽입하고 싶지만 어떻게 해야 할지 고민도 해야 하고...이것을 하면서 알았는데 글에 <style>~<style> CSS를 삽입했으면 절대 수정하지 말아야 한다는 것이다. 그러면 그 CSS는 글을 수정하고 싶어 기본모드 변경 후 수정하면 없어진다. 반드시 CSS가 없어진지 확인했으면 한다. 없어지면 힘들게 작성한 글이 엉망이...만약 수정하고 싶다면 HTML에서 수정해야 한다.

 

CSS가 사라지는 예를 들기 위해 HTML 모드에서 아래 그림처럼 <style>~<style>로 글에 CSS와 문장을 추가했다.

 

그리고 기본모드로 변경한 후 아래 그림처럼 천자만홍이라는 단어를 굵게 색상을 빨강으로 변경하기 위해 수정했다.

 

그리고 다시 HTML 모드로 전환하여 보면 아래와 같이 CSS가 사라진 것을 확인할 수 있다.

 

이 글 적을 때 무지 개고생했는데 새에디터의 CSS 등이 없어지는 것이 수정되야 할텐테...중요한 지점을 표시하고 싶지만 글을 HTML 적기가 그렇게 쉽지 않다. 다행히 새에디터의 HTNML 모드에서 사진을 삽입할 수 있다.