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_subject {
color: #000080; /* 제목 글자색 지정 */
font-family: Dotum, Sans-serif;
font-weight: bold; /* 글자를 두껍게 표시 */
font-size:16px; /* 포스트 제목을 크게 표시 */
border: 2px solid #B8B8B8; /* 제목의 테두리를 2픽셀크기로 실선(solid)으로 그리되 선의 색깔은 #b8b8b8 색으로 한다. */
}
#tx_canvas_subject { ... } 에 필수로 지정해야 하는 스타일
- font-size
- padding-top
- padding-right
- padding-bottom
- padding-left
- margin-top
- margin-bottom
2. 에디팅 레이아웃 스타일
color: #666;
font: 12px/1.5 Dotum, Verdana, AppleGothic, Sans-serif;
background:#FFF /* 전체 배경색 지정 */
}
a:link { color:#4E73E4; text-decoration:none;}
a:visited { color:#4E73E4; text-decoration:none;}
a:hover { color:#4E73E4; text-decoration:underline;} /* 마우스 롤오버시 밑줄표시 */
a:active { color:#4E73E4; text-decoration:none;}
body { ... } 에 필수로 지정해야 하는 스타일
- color
- font-family
- font-size
- background-color
최종 샘플 (레이아웃 스타일 + 에디팅 레이아웃 스타일)
body {
color: #666;
font: 12px/1.5 Dotum, Verdana, AppleGothic, Sans-serif;
background:#FFF /* 전체 배경색 지정 */
}
a:link { color:#4E73E4; text-decoration:none;}
a:visited { color:#4E73E4; text-decoration:none;}
a:hover { color:#4E73E4; text-decoration:underline;} /* 마우스 롤오버시 밑줄표시 */
a:active { color:#4E73E4; text-decoration:none;}
/* 전체 화면 */
#tx_canvas_wysiwyg_holder {
background:#000000 /* 포스팅영역을 둘러싸고 있는 배경 색상 */
background-image: url("http://cfs.tistory.com/blog/style/template/image/generic/16.jpg");
/* 포스팅영역을 둘러싸고 있는 배경 스킨 */
/* 사용자마다 다르니 본인의 style.css에서 찾아야합니다. */
}
/* 제목 입력부분을 감싸는 제목 영역 */
#tx_canvas_subject_holder {
}
/* 제목 입력 부분*/
#tx_canvas_subject {
color: #000080; /* 제목 글자색 지정 */
font-family: Dotum, Sans-serif;
font-weight: bold; /* 글자를 두껍게 표시 */
font-size:16px; /* 포스트 제목을 크게 표시 */
border: 2px solid #B8B8B8; /* 제목의 테두리를 2픽셀크기로 실선(solid)으로 그리되 선의 색깔은 #b8b8b8 색으로 한다. */
}
/* 본문 포스팅 영역 */
#tx_canvas_wysiwyg {
/* 변경하면 안되는 스타일 쉬트
height,padding-left,padding-right
*/
width:700px; /*블로그 포스트영역하고 같은 크기로 지정 */
/* 700px은 제 블로그 크기입니다.*/
위 샘플내용처럼 CSS를 만든 후, WYSIWYG.CSS 이름으로 저장하여 스킨>직접올리기를 통하여 업로드 하시면 글쓰기 에디터에 지정하신 모습으로 나타나게 됩니다.
배경화면 스킨이 안 나올 떄
#tx_canvas_wysiwyg_holder {
background:#000000 /* 포스팅영역을 둘러싸고 있는 배경 색상 */
background-image: url("http://cfs.tistory.com/blog/style/template/image/generic/16.jpg");
/* 포스팅영역을 둘러싸고 있는 배경 스킨 */
/* 사용자마다 다르니 본인의 style.css에서 찾아야합니다. */
}
이 부분에서 http://cfs.tistory.com/blog/style/template/image/generic/16.jpg을 블로그에 맞게 찾아야 합니다.
본인의 style.css를 들어가보면
/* 반드시 들어가야 하는 스타일 시작 */
/* 본문 공통 */
body{
font:12px/1.5 Dotum, Verdana, AppleGothic, Sans-serif;
color:#666;
/*@background-image=background-image:;*/ background-image: url("http://cfs.tistory.com/blog/style/template/image/generic/16.jpg"); /*@*/
이 부분이 보일겁니다. 그곳에서 주소를 찾아 wysiwyg.css에 적용시켜 주세요.
그럼 2008티스토리의 기능을 마음껏 활용해 보세요.
@charset "utf-8";
'감성미디어 > 정보게시판' 카테고리의 다른 글
| 블로거인 당신에게 100만원이 주어진다면 어떤 일을 하고 싶으세요? (0) | 2008/10/02 |
|---|---|
| [Widget] 원하는 색상의 코드가 궁금한가요? 그럼 RGB Color palette를 이용해보세요. (0) | 2008/10/02 |
| 내 블로그에서 물건을 판다!! 이니피투피 체험단 모집 (0) | 2008/09/30 |
| 블로그 댓글창에 배경그림을 넣어보자!! (0) | 2008/09/04 |
| 웹페이지/블로그/카페 로딩 시간을 측정하는 사이트 www.webwait.com (0) | 2008/09/04 |
| WYSIWYG.CSS 만드는 법/배경 안 나올 때 해결법 수록 (0) | 2008/08/29 |
| 색상 테이블 (컬러 테이블) (6) | 2008/08/29 |
| 빕스 VIPS 메뉴 평가단 2기 모집 (3) | 2008/08/27 |
| 티스토리에서 글 쓸 때 본문에 구분선 넣는 법. (0) | 2008/08/22 |
| 검색 엔진에 블로그/사이트를 등록하는 사이트 (1) | 2008/08/21 |
| 블로그에 상품 내다 파는 시대 / 블로켓 / INIP2P (0) | 2008/08/20 |

| 블로거뉴스에 송고한 최신글 |
|


































댓글을 달아 주세요