20일 티스토리베타테스트 13일 - 글쓰기 에디터에 스킨입히는 방법 : WYSIWYG.CSS 공개

한번도 하지않은... 스킨변경관련... 그런데.. 아직.. 자세한 사항을 모른다..

@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;
}

에서...  아직.. 뭐가 뭔지 모르겠다.. 단지.. body의 색상과... 에디터 입력 폰트 크기 제어... 부분은 대략 알 수 있었으나..줄간격에 대해서는.. 좀더.. 공부해야 겠다.. 점점더.. html에.. 빠져드는 듯 싶은데.. 이러다가.. 블로그 내용적인 관리보다.. 외형적인 관리에.. 좀더... 심취해지는 것은 아닐지...

친형님이.. 조언을 했다.. 있는 그대로.. 사용하는 것도.. 좋단다.. 너무 깊이 들어가면.. 결국... Jaba까지 한다고.. 할 것 같다고 하시는 군요... 그말씀도.. 올다고 생각하는데.. 나이도 있고.. 심취하고 싶기는 한데.. 좀 생각을 해 봐야겠습니다...

얼렁뚱땅... 결과물이라.. 보이기는 그렇지만.. 테스트한.. 기념으로.. 위의 색상부분만.. 변화 시켜 보았다.

 

 

012

 

 사용상에.. 큰 문제는 없으나.. 아직.. 고구마처럼.. html에.. 문외한에게... 슬그머니.. 입문할 수 있도록... 사용 메뉴얼이 있었으면.. 하는 바램이 있다.. 그러면.. 좀더.. 많은 사람들이.. 적용에 기쁨을 누리리라.. 생각되며.. 더우기..

아래의 사항의 용도를 직접.. 사용하여.. 알아야 겠지만.. 초보이자.. 문외한 경우.. 각주나.. 주석이라도.. 달아 주었으면.. 하고.. 서운하기도 했다...그정도로, 고구마는.. 문외한인데.. 저와 같은 분이.. 한둘일까...  많은 분들이.. 사용할 수 있도록.. 가급적이면.. 쉽고, 친절한.. 사용법을.. 부탁드립니다.. ㅎㅎ

그리고..제작하는게 아니라 5가지 스킨에 있는걸 적용시켜보라는 스킨은 어떤것인지 알겠으나...

어떻게..적용을 해야하는지..
더불어.. 배경 이미지를 어떻게.. 설정하는지.. 도통 모르겠습니다..ㅠㅠ

제발.. 알고 계신분.. 가르침을 주세요.. 정말 답답합니다.. ㅠㅠ

아래의 내용을 보아도.. 잘 모르것다..ㅠㅠ

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

 

1. 레이아웃 스타일
#tx_canvas_subject { ... } 에 필수로 지정해야 하는 스타일

• font-size
• padding-top
• padding-right
• padding-bottom
• padding-left
• margin-top
• margin-bottom
  

2. 에디팅 레이아웃 스타일
body { ... } 에 필수로 지정해야 하는 스타일

• color
• font-family
• font-size
• background-color