티스토리 2008 베타테스트 공식블로그의 wysiwyg.css 적용을 테스트해 보았습니다.
css로
실제화면과 똑같은 에디터 화면을 보며 글을 작성한다니 이 얼마나 가슴 설레는
일인가요?
설명을 따라 하나 하나 아래와 같은 wysiwyg.css를 작성해서
파일올리기로 올렸습니다.
@charset "utf-8";
body {
color: #333;
font:13px/1.5 Gulim, 굴림;
background-color: #fff;
}
a { color:#E1771E; text-decoration:underline; font-weight:bold;}
a:hover { color:#E1771E; text-decoration:underline; font-weight:bold;}
#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;
}
그런데 파이어폭스에서
편집화면과 IE의 편집화면이 다르게 보이네요.
wysiwyg.css 적용후 파이어폭스의 편집 화면입니다. 링크의 속성이 적용이 안되어 디폴트인 파랑으로 보입니다.
이 화면은 IE의 에디터 화면입니다. 링크의 검정색상과 볼드 속성이 적용되었습니다.
이 화면은 실제 브라우저 모습입니다. style.css에는 본문 넓이가 550인데 에디터는 500에 고정되어 있는 것 같군요.
티스토리 2008 베타테스트 공식블로그의 설명에는 에디터 전체에 width 속성을 변경하지 말라고
했는데 에디터와 실제 브라우저의 넓이 불일치는 어떻게 극복해야 하나요?
