본문 바로가기

티스토리 블로그/Tistory2008베타

글쓰기 에디터에 스킨입히는 방법 : 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가지 종류를 적용하셔도  미션 수행을 하신 것으로 간주되오니, 적용해보시고 캡쳐를 해주세요! 감사합니다.

  • 적용만 시켜도 보너스가?

  • Wow 드디어 스펙이 공개됬네요. 실은 계속 적용해서 사용중이였습니다만 title부분을 정확히 알지 못해서 못건드리고 있는데 타이틀 부분까지 예쁘게 꾸민담에 포스팅해야겠습니다!

  • 지금 타이틀부분 수정하려고 난리를 치는데 #tx_canvas_subject_holder랑 #tx_canvas_subject가 스타일이 셀렉트가 아예안되네요 ㅠㅠ

  • 파일명을 대문자로 하니 적용안되더군요.. :)
    소문자로 넣어야 제대로 업로드 되는 것 같습니다~

    • 정말 그렇군요... 심히.. 혼란스러웠습니다..
      왜 이미지로 인식하는지.. ㅠㅠ

      감사합니다...
      이작업 테스트 포기하려고 했었는데..^.^

  • 크아... css에 잼병인 사람들은 매우 불리한 미션이군요...
    그런 분들은 어쩔 수 없이 스킨을 바꿀 수 밖에 없다는 건가요.. 흠흠...

  • 난이도가 초특급으로 어려워지고 있씁니다 'ㅅ';;

  • 전 css가 뭔지 모르기에 그냥 스킨 바꿔서 적용시켜 보았습니다.
    근데 기본 바탕이 하얀색인 스킨들은 뭐 그다지 다른점이 안 느껴지네요.. *^^*

  • 비밀댓글입니다

  • 비밀댓글입니다

  • 으윽... 뭐가 이렇게 어렵죠?; 컴맹의 눈으로 보니 이게 대체 어느나라 말인지...;;
    그래도 한번 따라해 봐야겠네요. 제 스킨에 대한 애정을 증명하고야 말겠어요ㅠ!

    • CSS파일 만들어 보다가 깨달은 건데 에디팅 영역의 본문 폭은 지정을 못하는가 보네요?; 저로서는 이러면 위지윅의 의미가 없는데요;;; 본문 폭 지원은 아무래도 불가능한가요?

    • 기본적으로 올리는 index 파일이 제대로 되어있으면 본문 폭은 그렇게 나오던데요?

    • 앗; 그렇군요;; 본문 폭은 index 파일을 수정하면 되는 거였군요. 컴맹이 여기서 드러납니다ㅠㅠ 알려주셔서 감사합니다!

  • body부분은 대충 알겠는데...

    #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;
    }
    이 부분은 수정해도 전혀 반응이 없네요... 너무 어려워요...

  • 저는 body부분에서 폰트 색상 지정하고 a태그 색상 지정해줬는데도 왜 아무 변화가 없을까요...
    blockquote도 마찬가지고...
    답답해 죽겠네요. 혹시 잘못한게 아닌가 싶어 성공하셨다는 seevaa님 wysiwyg.css를 복사해다가 넣어봐도 아무 변화가 없고요. (seevaa님 것을 복사해본 이유는 제가 seevaa님 스킨을 수정해서 사용중이기 때문;;)

    • 흠... 저도 공개된거 보고 제목부분 고쳐서 올렸는데;; 안먹히드라구요~ 제목부분말고 그전에 올렸던 본문부분은 잘되는데 말이죠~
      엔즐군님 혹시나 브라우저캐시 비우시고 해보세요~ 혹시나예요~ ^^

    • 저도 난리 였네요..브라우져를 좀 옮겨 다니면서 하니까 괜찮아 졌는데 스킨 업로드 부분이 좀 불안한건 사실인거 같아요..(30일 기준)

  • 내용중 오타입니다. skin.css -> style.css

    그리고, css파일을 제작하는 것은 메모장에서 저장하면 되나요?
    어디에서 해야 하죠;

    제작하는게 아니라 5가지 스킨에 있는걸 적용시켜보라는 말도 무슨 말인지 모르겠네요. 어디에 있는걸 하라는 것인지...
    그럼 일시적으로 스킨을 바꿔 보아야 하나요 ㅎㄷㄷ

  • 뭔 말인지 모르겠습니다 ㅡ,.ㅡ 여기 있는 설명만으로는 안 것도 안 되네요.

  • WYSIWYG.CSS 대문자로 파일명을 하면 최상단으로 안가네요. 소문자로 파일명을 만들어야하네요.

    아직도 원리에 대해서 감을 잘 못잡겠는데요. 저는 블로그 스킨의 style.css에서 적용한 제목 본문 코드 부분을 똑같이 복사해서 wysiwyg.css에 집어넣으라는 말씀으로 이해했는데요. 그렇다면 그대로 했는데 왜 적용이 안되는지 궁금합니다. 그리고 '변경되면 안되는 스타일 속성'이란 말은 wysiwyg.css안에 집어넣지 말라는 내용인가요?

    다른 스킨들 소스보고 참고하게 각각 다른 wysiwyg.css를 다운받을수있게 제공부탁드려요.
    저에게는 참 매력적인 기능이고 가장 도움이 될것같은 기능인데 쓸수없으니 참 답답하네용.ㅜㅜ

  • 음... IE로 접속하면 새관리자 글쓰기 페이지에서 디버거 뜨면서 브라우져가 죽게 되어 불여우로 테스트 하는데 표현이 안되는것인지 제가 잘못 한 것인지... 안나오네요... 아무래도 집에서 IE로 다시 시도해 봐야 겠네요. ^^;

  • 정상적으로 작동되는걸 수정해도 변하는게 없네요(....)
    그보다, 파일을 삭제하거나 업로드할때마다 화면설정이 초기화되서 당황했습니다
    테스트용 블로그를 만들어서 해야겠군요