[Tistory2008]Wysiwyg.css 그 베일을 벗겨보자!
2008/07/19 02:15이번 에디터상에서 가장 좋게 바뀌었던 것이 많이 언급했다시피 'Writter view=Blog View' 라는 점이 아닌가 싶다. 거기에는 위지윅(Wysiwyg)1 에디터에 스타일이 지정되어야 하기때문에 초보자가 직접 제작하기에는 좀 무리가 따르긴 한다만 티스토리 측에서도 열심히 작성중인것으로 보이니 곧 유용하게 이용할수 있을듯 싶다.
얼마전에 스킨을 바꿨는데 바꾼 이유중 하나가 이 wysiwyg.css파일을 적용시키기 위해서였다. 기존에 쓰던 스킨도 물론 CSS를 만들면 적용은 되겠지만 내가 제작한 스킨도 아니고 남이 만든걸 코드수정 하는것보다 차라리 내가 하는게 더 빠를것 같아서 새로 만든 스킨이 바로 이 스킨이다 :) 근데 위지윅 에디터상에서 제목에 관련된 CSS를 몰라서 적용을 못시켰는데 오늘 티스토리 측에서 상세한 Form을 제공해줬다.
B. 제목 영역 : div#tx_canvas_subject_holde
- 제목 입력 박스를 감싸고 있는 엘리먼트
- 제목 영역에 배경 이미지를 놓는 등의 제목 입력 박스를 꾸미기 위한 용도로 쓴다
C. 제목 입력 : input#tx_canvas_subject
- 제목이 입력되는 텍스트 박스
- 제목 글자의 모양을 꾸미기 위한 용도로 쓴다
- 아래 메타 데이터 부분에 정의한 7가지의 속성이 이곳에 inline style로 적용된다
- 텍스트 박스에 커서가 가면 tx-focused 클래스를 가지고 최초에 출력되는 '제목을 입력해주세요' 메시지가 수정되면 tx-modified 클래스를 가집니다.
- 변경되면 안되는 스타일 속성은
- padding
- font-size
- margin-top
- margin-bottom
아래는 본문의 스타일에 대한 스타일이 적용된 모습이다.
@charset "utf-8";
body{
font-family:Helvetica, '맑은 고딕', 'Malgun Gothic' , Gothic, 고딕, AppleGothic, Sans-serif;
font-size:0.75em;
line-height:1.6em !important;
text-align:justify !important;
overflow:hidden;
margin:0 !important; padding:0 !important;
color:#333;
}
#tx_canvas_subject_holder {background:#FFF url(./images/titlebg.gif) no-repeat !important; }
#tx_canvas_subject {color:#000; border:none !important; height:30px !important;}
img, .imageblock{ max-width:97%; }
img, .imageblock {
background-color:#FFFFFF;
border:5px solid #DDD !important;
vertical-align:middle;
}
blockquote {
margin:2em auto;
padding:0 10px;
width:90%;
color:#0099CC;
border-left:2px solid #ddd;
}
a{color:#579 !important; text-decoration:none !important; border-bottom:1px dashed #579; }
a:link, a:visited { color:#579; text-decoration:none;}
a:hover, a:active{ color:#09C; border-bottom:1px dashed #09C; text-decoration:none;}
.txc-textbox{padding:0 10px 0 10px !important; margin:10px;}
em {
font-style:normal;
color:#000;
background-color:#f1f1e8;
}
ol {margin:1em 0 1.5em 30px;}
ul {list-style:none;margin:1em 0 1.5em 10px;}
del {color:#999;}
ins {color:#5a5a5a;}
.cap1 {color:#999;font-size:.9em;text-align:center;}
이 스타일시트를 작성하는 법은 간단하다. 기존 스킨에 적용되어있는 CSS가 있을것이다. 그 중에 본문에 관련되 지정되어있는 스타일(예를 들어 article이라던지 content라던지) 이 또 있다. 그 부분을 새로운 HTML문서를 작성하듯이 만들어 주면된다. 즉 .article {blabla}가 body{blabla}가 되는 것이다.
추가적으로 blockquote, img, ol, li, .txc-textbox 같은 스타일을 지정해 놓으면 글을 쓸 때에도 예쁘게 나온다.
번거로운 작업이긴 하지만 티스토리의 새로운 변화를 말미암아(?) 스킨에 따라오는 style.css가 자동적으로 있듯, 에디터에 해당되는 wysiwyg.css가 표준화 되었으면 하는 바램이다.
p.s그리고 테스팅을 해보다 발견한 버그인데 위지윅 스타일시트 파일이 대소문자 구별을 엄격히 한다. 최상위 루트폴더에 들어가야되는데 만약 하나라도 대문자가 들어가면 ./images/폴더에 삽입되어 버린다. 티스토리 측에서 차후수정을 해줄것 같으니 조금더 기다려보고 그동안 적용하실 분들은 주의해서 업로드하길 바란다.
- What You See Is What You Get : 보이는게 결국 결과물과 같다! [본문으로]
