블로그스팟에서 HTML 편집모드 사용하기

블로그스팟에서 HTML 편집모드 사용하기

블로그스팟의 HTML 편집모드는 티스토리보다 더 보기 좋다?

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

샘플로 애국가 1절을 가져와봤다.

[그림] 기본 편집모드에서 작성된 글.

HTML 편집모드로 변경하기 위해

화면 왼쪽 상단, 제목 아래의 [연필 모양] 아이콘을 클릭해서,

[<> HTML 보기]를 선택한다.

[그림] 편집모드 변경.

한 줄로 쭉~ 이어진

기본(디폴트) HTML 편집모드를 보고

필자에게 욕하지 말자.

[그림] 기본(디폴트) HTML 편집모드.

[세줄 모양] 아이콘, [HTML 형식 지정]을 클릭해보자.

[그림] [HTML 형식 지정] 아이콘.

짠~

텍스트를 둘러싼

오로지 <p> </p> 태그뿐인

아주 심플한 HTML 편집모드를 볼 수 있다.

[그림] 매우 깔끔한 HTML 편집모드.

그냥 이 편집모드가 디폴트였으면,

정말 아주아주 좋았을텐테...

새글을 작성할 때마다

[HTML 형식 지정]을 클릭해야 한다는 점은

매우 아쉽다.

[팁] 필자는 띄어쓰기 체크, 오타 체크,

불필요한 (2칸) 공백 체크 등을 위해,

그리고 무엇보다 사용에 익숙하기 때문에

먼저 한컴 한글 워드에서 문서를 작성한 후,

티스토리나 블로그스팟에 복사/붙여넣기를 하는데,

이때 워드에서 블로그로 바로 붙여넣기하면,

위와 같은 깔끔한 HTML 편집 화면을 볼 수 없다.

윈도우의 “메모장” 프로그램을 거쳐서 붙여넣기를 해야한다.

즉, 워드 내용 복사 → 메모장에 붙여넣기

→ 메모장 내용 복사 → 블로그에 붙여넣기 하면,

위와 같은 깔끔한 HTML 편집 화면을 볼 수 있다.

[팁] 이미지(그림) 위치를 왼쪽 정렬하는 방법

이미지 편집모드에 나오는 [왼쪽 정렬]을 클릭하면,

[그림] 이미지 편집모드.

이미지 바로 아래의 텍스트가 이미지 오른쪽으로 올라온다.

[그림] 필자가 원하지 않는 이미지 왼쪽 정렬 상황.

이때는 HTML 편집모드에서,

text-align: center를 text-align: left로 변경해보자.

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

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

[그림] 필자가 원하는 이미지 왼쪽 정렬 상황.

[키워드] 블로그스팟 기준