티스토리 2008 베타테스트 공식블로그 :: 글쓰기 에디터에 스킨입히는 방법 : WYSIWYG.CSS 공개

안녕하세요. TISTORY입니다.
최근 블로그의 스킨을 아무리 변경하여도, 에디터 안의 스킨이 변경되지 않는다고 생각하지 않았나요?

이번 티스토리 개편에서는 글을 쓸 때에도 자신의 스킨 디자인과 동일하게 보여질 수 있도록 에디터 CSS (즉, WYSIWYG.CSS) 라는 스펙을 추가하게 되었습니다. 귀찮으시더라도 제작 또는 새로 적용된 스킨에 따라 적용해주시기 바랍니다. WYSIWYG.CSS가 존재하지 않을 경우에는 기본 에디터 화면이 보여지게 되오니 참고해주세요! ※ 티스토리 스킨 선택에서 제공 중인 스킨의 경우에는 정식오픈까지 WYSIWYG.CSS를 추가할 예정입니다. 정식오픈 이후 스킨 변경 꼭 부탁드리겠습니다! 감사합니다.

WYSIWYG.CSS 만드는 법 (이해가 어려운 부분은 댓글로 남겨주세요)

1. wysiwyg.css 파일의 속성

제작 후 반드시 파일명은 wysiwyg.css 로 저장해 주셔야 합니다.
파일의 위치는 스킨의 최상단 디렉토리로 자동 지정됩니다. (즉, skin.html, style.css 파일이 있는 위치)

2. 글쓰기 에디터의 기본적인 레이아웃 이해하기
에디터는 아래 그림과 같은 레이아웃으로 구성되어 있으며, 4개의 엘리먼트에 적당한 스타일을 정의합니다.

A. 에디터전체 : div#tx_canvas_wysiwyg_holder

에디터 전체를 감싸고 있는 div 엘리먼트
배경색, 배경 이미지를 놓거나 안쪽에들어가는 엘리먼트들을 정렬하는 용도로 쓴다
변경되면 안되는 스타일 속성은
- width
- height
- overflow

B. 제목 영역 : div#tx_canvas_subject_holder

제목 입력 박스를 감싸고 있는 엘리먼트
제목 영역에 배경 이미지를 놓는 등의 제목 입력 박스를 꾸미기 위한 용도로 쓴다

C. 제목 입력 : input#tx_canvas_subject

제목이 입력되는 텍스트 박스
제목 글자의 모양을 꾸미기 위한 용도로 쓴다
아래 메타 데이터 부분에 정의한 7가지의 속성이 이곳에 inline style로 적용된다
텍스트 박스에 커서가 가면 tx-focused 클래스를 가지고 최초에 출력되는 '제목을 입력해주세요' 메시지가 수정되면 tx-modified 클래스를 가집니다.
변경되면 안되는 스타일 속성은
- padding
- font-size
- margin-top
- margin-bottom

D. 본문 에디팅 영역 : iframe#tx_canvas_wysiwyg

실제로 에디팅이 이루어지는 디자인 모드의 iframe 엘리먼트
변경되면 안되는 스타일 속성은
- height
- padding-left
- padding-right

WYSIWYG.CSS 파일 만들어보기 (예제)

1. 레이아웃 스타일

#tx_canvas_wysiwyg_holder { background: url("./images/bg_wysiwyg.gif") repeat-y center 0 !important; }
#tx_canvas_subject_holder { text-align: left !important; }
#tx_canvas_subject {
color: #333;
border: none;
border-bottom: 1px dashed #ccc;
font: bold 15px "돋움","Dotum", Sans-serif;
padding: 0 2px 10px 2px;
margin-top: 20px;
margin-bottom: 10px;
}

#tx_canvas_subject { ... } 에 필수로 지정해야 하는 스타일

font-size

padding-top

padding-right

padding-bottom

padding-left

margin-top

margin-bottom

2. 에디팅 레이아웃 스타일

body {
color: #656565;
font: 12px/1.3em "돋움","Dotum", Sans-serif;
background-color: #1F1F1F;
}

a { color: #757575; text-decoration: none; }
a:hover { text-decoration: underline; }

body { ... } 에 필수로 지정해야 하는 스타일

color

font-family

font-size

background-color

최종 샘플 (레이아웃 스타일 + 에디팅 레이아웃 스타일)

@charset "utf-8";

body {
color: #666;
font: 12px/1.5 Dotum, Verdana, AppleGothic, Sans-serif;
background-color: transparent;
}

a { color: #333; text-decoration: none; }
a:hover { color:#7870ab; text-decoration: underline; }

#tx_canvas_wysiwyg_holder { background: url("./images/bg_wysiwyg.gif") repeat-y center 0 !important; }
#tx_canvas_subject_holder { text-align: left !important; }
#tx_canvas_subject {
color: #333;
border: none;
border-bottom: 1px dashed #ccc;
font: bold 15px "돋움","Dotum", Sans-serif;
padding: 0 2px 10px 2px;
margin-top: 20px;
margin-bottom: 10px;
}

위 샘플내용처럼 CSS를 만든 후, WYSIWYG.CSS 이름으로 저장하여 스킨>직접올리기를 통하여 업로드 하시면 글쓰기 에디터에 지정하신 모습으로 나타나게 됩니다. 조금 어려울 수도 있지만 한번 따라해보는 것은 어떨까요? WYSIWYG.CSS 를 적용해보셨거나, WYSIWYG.CSS 를 추가하여 스킨 제작 또는 편집을 하신 분들을 관련 내용을 트랙백으로 보내주세요~ ^^

감사합니다.

※ 위 WYSIWYG.CSS를 적용 또는 제작배포하신 분들 (트랙백을 보내주신 경우에 한함)은 미션을 추가로 수행하신 것으로 간주해드립니다. 현재 제공중인 스킨 5가지 종류를 적용하셔도 미션 수행을 하신 것으로 간주되오니, 적용해보시고 캡쳐를 해주세요! 감사합니다.

'미리보는 개편내용' 카테고리의 다른 글

글쓰기 에디터에 스킨입히는 방법 : WYSIWYG.CSS 공개 (24)	2008/07/18
Mac + Tistory ! 맥사용자들을 위한 티스토리 즐기기 Tip! (24)	2008/07/16
F11 혹시 눌러보셨나요? (윈도우사용자에 한함) (11)	2008/07/11
제5회 태터캠프에 다녀왔습니다! (34)	2008/07/06
[센터] 원하는 정보를 손쉽게, 나만의 맞춤 공간 (0)	2008/07/06
개편을 준비하며(1) - 개편 주요 컨셉 (90)	2008/07/01