티스토리 글쓰기 에디터 스킨 수정 - 2% : WYSIWYG.CSS

블로그스킨을 변경하면서 알게된 것들. (html, css, 워드프레스등)의 계속되는 글입니다.

티스토리 블로그스킨을 변경할 때 가장 먼저 정하는 것이 화면배치와 크기입니다. 그중에 본문의 크기부터 정합니다. 아사마루는 본문의 가로 폭이 너무 길면 가독성이 떨어지는 것 같아서 본문 크기를 605px^[각주:1]로 합니다.

그런데 티스토리의 글쓰기 에디터를 이용해서 글을 작성할 때 605px에 맞지 않아 현재 줄의 끝이 어디에서 끝나고 문단의 간격이 어떻게 되는지를 확인하려면 "미리보기" 버튼을 클릭해서 확인하여야 했습니다. 이것이 은근히 불편합니다.

WYSIWYG.CSS를 작성하여 글쓰기를 조금 더 편리하게 하자!

WYSIWYG.CSS를 작성하면 2% 부족하지만, 아래의 참고 이미지처럼 글쓰기 에디터 상의 글 모양이 블로그 스킨상의 글 모양 같이 보이도록 할 수 있습니다.

▼ 글쓰기 에디터 글 모양
글쓰기 에디터 화면에서도 맑은 고딕, 줄 간격 180%, 링크, 인용문, 이미지크기, 표만들기 크기의 모든 것이 스킨 상의 글 모양과 같게 보입니다. ^^

▼ 스킨상의 글 모양

※ 익스플로러에서는 인용문, 폰트, 줄 간격이 제대로 나타나지 않습니다. ^[각주:2]

▲ 설명용 이미지

WYSIWYG.CSS 작성 방법

우선은 티스토리 가이드 블로그의 WYSIWYG.CSS 만드는 법 - 글쓰기 에디터에 스킨 적용하기로 보고 기본적인 내용을 이해합니다.
특히, 2. 글쓰기 에디터의 기본적인 레이아웃 이해하기 부분을 잘 이해해 둡니다.

이해하였나요? 그럼 아사마루가 작성한 WYSIWYG.CSS^[각주:3] 내려받아서 메모장이나 Notepad+로 열어 보고 참고하세요.

wysiwyg.css

  tip 1  
눈여겨볼곳은 !important라는 곳입니다.

우선은 CSS상속 이야기부터 하겠습니다.
대부분의 CSS에서 먼저 정의한 내용은 나중에 정의한 내용에 영향을 받습니다.
예를 들어 글자색을 파란색으로 정의한 다음에 다른 곳에서 핑크색으로 정의하면 이후의 글자색은 핑크색으로 됩니다. 이것을 "상속이 된다"라고 합니다.
!important의 의미는 이 속성은 상속하지 마라! 라는 의미입니다.

!important를 하는 이유는 자신의 스킨 style.css, WYSIWYG.CSS이외에 티스토리 자체에서 사용하는 나중에 이용되는 CSS들이 있기 때문입니다. 즉, 이 CSS에서 폰트와 줄 간격을 다른 것으로 정의해 놓으면 그 정의에 영향을 받기 때문입니다.

  tip 2  
글쓰기 에디터의 가로크기는 index.xml의 contentWidth의 정의에 따릅니다.

아사마루 스킨에서 본문의 가로길이는 605px이지만 표 만들기를 하면 표의 길이가 595px가 되어서 615px로 하였습니다.^[각주:4]

1. 상단에 넣은 구글 애드센스의 가로크기가 300px이어서 2개 넣으면 600px이 되는데 붙어 있으면 갑갑해 보여 5px를 여백을 주기 위해서입니다. *^^* [본문으로]
2. 아사마루는 익스플로러를 사용하지 않아서 더 이상의 조사를 그만두었습니다. 휴~ [본문으로]
3. 작성 방법은 「WYSIWYG.CSS 만드는 법 - 글쓰기 에디터에 스킨 적용하기」를 따라 작성하였습니다. [본문으로]
4. 10px의 차가 발생해서 605px에서 10을 더해 615px로 하였습니다. [본문으로]