본문 바로가기

티스토리 가이드/관리 : 글쓰기

WYSIWYG.CSS 만드는 법 - 글쓰기 에디터에 스킨 적용하기

이번 티스토리 개편에서는 글을 쓸 때에도 자신의 스킨 디자인과 동일하게 보여질 수 있도록 에디터 CSS (즉, WYSIWYG.CSS) 라는 스펙을 추가하게 되었습니다. 귀찮으시더라도 제작 또는 새로 적용된 스킨에 따라 적용해주시기 바랍니다. WYSIWYG.CSS가 존재하지 않을 경우에는 기본 에디터 화면이 보여지게 되오니 참고해주세요!


WYSIWYG.CSS 적용된 스킨에서 글쓰기시


블로그모습

블로그모습

글쓰기 에디터 모습

글쓰기 에디터 모습


에디터에 스킨이 보여진다구요?

위  스크린샷은 티스토리에서 제공하고 있는 Moving Box 라는 스킨을 적용한 뒤, 글쓰기로 이동한 화면입니다. 티스토리에서는 그동안 각각 다른 블로그의 폭넓이, 스타일을 에디터에서 지원하지 않아 글을 작성할 당시와 저장한 모습이 많이 다른 모습을 보실 수 있었으나 앞으로는 볼 때 그리고 작성할 때 모두 거의 동일한 환경을 제공합니다.

※ 주의사항:

- 스킨위자드를 이용할 경우, 스킨의 폭 및 글자색 등의 기본 정보만 반영됩니다.
- wysiwyg.css가 적용되어 있지 않은 스킨일 경우, 기존 스킨에서 사용되고 있는 index 파일의 정보에 따라 기본 에디터 화면이 구성됩니다.
- index.xml을 비롯하여 wysiwyg.css가 정상적으로 업로드 되지 않은 스킨일 경우에는, 티스토리에서 제공하는 기본 에디터 화면이 보여지게 됩니다.


WYSIWYG.CSS 만드는 법



먼저 wysiwyg.css 를 만들기 위해서는 약간의 html과 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를 적용 또는 제작배포하신 분들은 노하우나 만드신 스킨을 공유해주세요!

  • 재아 2008.08.28 20:29

    글쓰기 영역이 아니라 그냥 포스팅 했을때 보여지는 본문의 딱 영역이 500이라고 할때요~.. 새로운 new 에디터의 영역도 500이어야지 같이 표현되지 않나요?? 글쓰기 그대로 보여지지 않나요~

    예를들어서 포스팅 본문에서 보여지는 영역은 대충 예 123456789 에서~~! 6에서 끝나서 7부터는 다음줄로 밀리는데..

    에디터의 영역은 9에서 밀려 내려 가는데 이걸 어떻게 맞춰야 하는지요~..

  • 애리말럽쏘쉿 2008.08.29 00:13

    모르것다. 마스터 하려면 2주일은 걸릴 것 같다.

  • The Blue  2008.08.29 13:59

    padding영역을 지정하면 안 되는 이유가 뭔가요? 본문이랑 에디트 화면이랑 달라서 수정하려고 하는데... 어떻게 해야하죠?

  • cousteau 2008.08.29 14:02

    에디팅 영역이 너무 좁은 것 같아요. 630px 정도 되는데
    1280 x 1024 이상 사용자들은 에디팅 영역에서 여백이 너무 많은데...
    늘려주세요

  • 희주 2008.08.29 17:36

    에디팅영역은 index.xml에서 수정할 수 있더군요..

  • nuzl 2008.08.30 10:07

    WYSIWYG.CSS 를 업로드 하게 되면 자동으로
    /images/ 로 업로드가 되서 적용이 안되는거같습니다.

    흑흑 졸린눈을 비비며 만들었는데.....
    그리고 꼭 대문자로 써야 하는건지 궁굼 합니다.
    되도록이면 소문자로 했으면 하는 작은 바램이 있슴미다......

    도메인은 클릭하면 들어가지는곳입니다
    자작한 스킨이라서 그런가요 ㅜㅜ

    • 희주 2008.08.30 10:28

      기존관리가 아니라 새관리에서 업로드 하셔야 되구요.
      파일명을 소문자로 해야 루트폴더로 업로드됩니다

  • Luxury Q. 2008.09.13 22:53

    제목이 플래시라면?? ㅡㅠ

    • 가이드 잘하는 TISTORY 2008.09.17 14:37

      만들기 나름일 것이라 생각합니다. 위지윅에서는 해당 폰트 크기만큼으로 잡아주시는 것이 좋을 것 같은데요;; 예제를 주시면 더 알아보도록 하겠습니다.

  • 찐콩이 2008.09.18 12:47

    파일 탭을 누르면 창이 안 나타납니다. 왜글지요 ?다른 파일 창은 잘 나타나는데,,,

  • OLokLiR 2008.12.16 02:52

    /*@post-title-color*//*@*/
    같은 스킨위자드 치환자는 안먹히나요?

    아니... 그보다 MovingBox가지고 이래저래 만져보는데 스킨위자드에서 속성을 적용하고나면 글쓰기에서 wysiwig.css가 안먹히네요?

    스킨위자드의 "적용" 한방에 wysiwig.css가 풀려버리면... 이 뭐 .... -ㅁ-;;; 만드는....의미가....................................

  • 현도 2010.06.21 17:48

    에디터에서 html을 한번 클릭했던 이후로 html 모드 아닐때도 이상하게 계속 에디터에 스킨 배경이 안나오는데 어떻게 해결하나요???

  • 가람빛 2012.11.29 17:17 신고

    wysiwig.css가 있어도 환경설정에서 그걸 쓸지 안쓸지 설정할 수 있나요?

  • 흐콤이다 2019.05.04 19:11 신고

    줄간격이 왜이리 넓죠??? 새로운 글쓰기 할 때 줄간격이 너무 넓어요... CSS가서 바꿔도 에디터에서는 안 바뀌는데 어떻게하나요??