종이와 물감 3단 스킨 코드입니다

maya님의 요청에 힘입어 ^^ 포스팅 해봅니다.

원출처는 온블로그, 이글루버젼 리뉴얼은 샐리님 작품입니다.
전 어디까지나 약간의 수정만 ^^;;;
사실 조금씩 손을 본거라 어디를 고쳤는지도 잘 몰라요.
그런 관계로 코드를 그냥 올리겠습니다. 필요한 부분에 붙여서 써주세요
덧붙여, 이 스킨의 메모장은 약간의 스킬이 필요합니다.
그냥 다른 스킨의 메모장처럼 사용하면 중간의 칸막이(^^;;;)가 나오지 않아요.
이 점도 감안해주시기 바랍니다.

우선 새 스킨 만들기를 선택하신 후 3단, 사이즈를 500-150-150으로 설정해주세요.
그 후 아래의 코드를 그대로 복사해주시면 됩니다.

메인프레임에 들어갈 내용

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=1000>

<!-- 왼쪽 메뉴 -->
<TR><TD WIDTH=190 VALIGN=TOP>
<DIV ID=LEFT>

<DIV CLASS=HEADER><$header$></DIV>
<DIV CLASS=URL><$egloourl$></DIV>

<DIV CLASS=MN_TOP></DIV>
<DIV CLASS=MN_BODY>
<DIV CLASS=PROFILE><CENTER><$logoimage type=1$></CENTER></DIV>
<DIV CLASS=PROFILE_2>
<DIV CLASS=DESCRIPTION><$description$></DIV>
<DIV CLASS=NICK><$nick$></DIV>
</DIV>
<img src="http://www.onblog.com/images/templet/paper_blue_S1/menu_bar.gif">
<DIV CLASS=MN><$menuleft$></DIV>
<CENTER><$calendar type=1$></CENTER>
</DIV>
<DIV CLASS=MN_BOTTOM></DIV>
<CENTER>
<$banner type=1$>
<$xml$>
<div class=profile_2>skin from<a href="http://www.onblog.com" target=new>OnBlog.com</a><br>
skin brought by <a href="http://haime.egloos.com" target=new>샐리</a></div>
</CENTER>
</DIV>
< /TD>

<!--메뉴와 본문 사이-->
<TD WIDTH=10><DIV STYLE="WIDTH:10PX;"></DIV></TD>

<!--오른쪽 본문-->
<TD WIDTH=600 VALIGN=TOP>
< DIV ID=RIGHT>

<p style="padding-top : 70px;">
<DIV CLASS=POST><$post$></DIV>

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR><TD ALIGN=RIGHT WIDTH=48%><$prepage type=1$></TD
<TD WIDTH=4%></TD>
<TD ALIGN=LEFT WIDTH=48%><$nextpage type=1$></TD></TR>
</TABLE>

<!-- 오른쪽 메뉴 -->
<TD WIDTH=190 VALIGN=TOP>
<DIV ID=LEFT>
<DIV CLASS=USERMENU><$adminmenu type=8$></DIV>

<p style="padding-top : 5px;">
<DIV CLASS=MN_TOP></DIV>
<DIV CLASS=MN_BODY>
<DIV CLASS=MN><$menuright$></DIV>
</DIV>
<DIV CLASS=MN_BOTTOM></DIV>
</TD>

</TR>
</TABLE>

양 옆의 메뉴 프레임에 똑같이 들어갈 내용

<DIV CLASS=MNTTL><$mntitle$></DIV>
<DIV CLASS=MNBODY><$mnbody$></DIV>
<DIV CLASS=MNBOTTOM></DIV>

본문에 들어갈 내용

<DIV CLASS=POST_HEAD>
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=525>
<TR><TD WIDTH=80%><DIV CLASS=POST_TTL><$postsubject$></DIV></TD>
<TD WIDTH=20% ALIGN=RIGHT><$postadmin type=1$></TD></TR>
</TABLE>
</DIV>
<DIV CLASS=POST_BODY>
<$postcont$>
</DIV>
<DIV CLASS=POST_TAIL><$posttail$></DIV>
<$cmtjs$>
<DIV CLASS=POST_BOTTOM></DIV>

CSS창에 들어갈 내용 (사실 이 부분은 테이블 사이즈만 줄였는데,
그 부분이 꽤 여러곳이라 그냥 코드를 공개했습니다)

BODY { scrollbar-3dlight-color:#FFF;
scrollbar-arrow-color: #102C4A;
scrollbar-track-color:#FFF;
scrollbar-darkshadow-color:#FFF;
scrollbar-face-color: #6B97A8;
scrollbar-highlight-color:#102C4A;
scrollbar-shadow-color:#102C4A;}


BODY { BACKGROUND-IMAGE : URL(http://www.onblog.com/images/templet/paper_blue_S1/menu_bg.gif);
BACKGROUND-REPEAT : REPEAT-Y;
MARGIN : 0;PADDING : 0; }

BODY,TD,DIV,LI { FONT-FAMILY : APPLEGOTHIC,굴림,SANS-SERIF; FONT-SIZE : 9PT; COLOR : #444444; LINE-HEIGHT : 150%;}

A:LINK { COLOR: #3A637D; TEXT-DECORATION: NONE }
A:VISITED { COLOR: #3A637D; TEXT-DECORATION: NONE }
A:ACTIVE { COLOR: #3A637D; }
A:HOVER { COLOR: #99CCFF; TEXT-DECORATION: UNDERLINE; }


DIV#LEFT {
WIDTH : 190PX;
TEXT-ALIGN : CENTER;
}

DIV#RIGHT {
BACKGROUND-IMAGE : URL(http://www.onblog.com/images/templet/paper_blue_S1/edit_top_bg.gif);
BACKGROUND-REPEAT : NO-REPEAT;
BACKGROUND-POSITION : TOP;
}

DIV.HEADER {
FONT-SIZE : 9PT;
FONT-WEIGHT : BOLD;
MARGIN-TOP : 25PX;
MARGIN-LEFT : 20PX;
LINE-HEIGHT : 100%;
TEXT-ALIGN : LEFT;
}

DIV.HEADER A:LINK {COLOR: #132E49; TEXT-DECORATION: NONE}
DIV.HEADER A:VISITED {COLOR: #132E49; TEXT-DECORATION: NONE}
DIV.HEADER A:HOVER {COLOR: FFF; TEXT-DECORATION: NONE}

DIV.URL {
FONT-SIZE : 9PT;
MARGIN-LEFT : 20PX;
MARGIN-BOTTOM : 10PX;
TEXT-ALIGN : LEFT;
}

DIV.URL A:LINK {COLOR: #FFF; TEXT-DECORATION: NONE}
DIV.URL A:VISITED {COLOR: #FFF; TEXT-DECORATION: NONE}
DIV.URL A:HOVER {COLOR: #000; TEXT-DECORATION: UNDERLINE}


DIV.USERMENU {
TEXT-ALIGN : RIGHT;
MARGIN-TOP : 25PX;
MARGIN-RIGHT : 20PX;
LINE-HEIGHT : 100%;
}

DIV.MN_TOP {
BACKGROUND-IMAGE : URL(http://www.onblog.com/images/templet/paper_blue_S1/menu_top.gif);
filter:alpha(opacity=70);
BACKGROUND-REPEAT : NO-REPEAT;
BACKGROUND-POSITION : BOTTOM;
WIDTH : 192PX;
HEIGHT : 6PX;
MARGIN-LEFT : 16PX;
}

DIV.MN_BODY {
BACKGROUND-IMAGE : URL(http://www.onblog.com/images/templet/paper_blue_S1/menu_center.gif);
filter:alpha(opacity=70);
WIDTH : 192PX;
MARGIN-LEFT : 16PX;
PADDING-BOTTOM : 20PX;
}

DIV.MN_BOTTOM {
BACKGROUND-IMAGE : URL(http://www.onblog.com/images/templet/paper_blue_S1/menu_down.gif);
filter:alpha(opacity=70);
BACKGROUND-REPEAT : NO-REPEAT;
MARGIN-LEFT : 16PX;
WIDTH : 192PX;
}

DIV.PROFILE {
WIDTH : 172PX;
TEXT-ALIGN : LEFT;
MARGIN-BOTTOM : 16PX;
PADDING-TOP : 16PX;
LINE-HEIGHT : 150%;
OVERFLOW : HIDDEN;
}

DIV.PROFILE_2 {
WIDTH : 172PX;
TEXT-ALIGN : CENTER;
PADDING : 8PX;
LINE-HEIGHT : 150%;
BORDER : 1PX #CCC SOLID;
OVERFLOW : HIDDEN;
MARGIN-BOTTOM : 20PX;
}

DIV.DESCRIPTION {
WIDTH : 150PX;
LINE-HEIGHT : 130%;
}

DIV.NICK {
MARGIN-TOP : -10px;
WIDTH : 150PX;
TEXT-ALIGN : RIGHT;
LINE-HEIGHT : 150%;
}


DIV.MN {
WIDTH : 172PX;
LINE-HEIGHT : 150%;
TEXT-ALIGN : LEFT;
}

DIV.MNTTL {
WIDTH : 170PX;
FONT-SIZE : 9PT;
FONT-WEIGHT : BOLD;
PADDING-TOP : 2PX;
PADDING-LEFT : 12PX;
MARGIN : 10PX 0PX 5PX;
COLOR : #344E79;
TEXT-ALIGN : LEFT;
}

DIV.MNBODY {
WIDTH : 170PX;
FONT-SIZE : 9PT;
PADDING-LEFT : 15PX;
PADDING-BOTTOM : 10PX;
COLOR : #344E79;
TEXT-ALIGN : LEFT;
}

DIV.MNBOTTOM {
WIDTH : 170px;
HEIGHT : 1px;
MARGIN-LEFT : 10PX;
MARGIN-RIGHT : 10PX;
BACKGROUND-IMAGE : URL(http://www.onblog.com/images/templet/paper_blue_S1/menu_bar.gif);
BACKGROUND-REPEAT : NO-REPEAT;
}

DIV.MEMOBODY {
WIDTH : 150PX;
OVERFLOW : HIDDEN;
}


DIV.POST {
WIDTH : 500px;
}

DIV.POST_HEAD {
WIDTH : 500PX;
MARGIN : 0PX 44PX 20PX 20PX;
PADDING : 30PX 0PX 5PX;
}

DIV.POST_TTL {
WIDTH : 440PX;
HEIGHT : 42PX;
BACKGROUND-IMAGE : URL(http://www.onblog.com/images/post_templet/paper_blue_S1/title_bg.gif);
FONT-SIZE : 9PT;
COLOR : #003668;
FONT-WEIGHT : BOLD;
PADDING-TOP : 10PX;
PADDING-LEFT : 10PX;
}

DIV.POST_BODY {
COLOR : #003668;
WIDTH : 500PX;
MARGIN : 0PX 20PX 20PX 39PX;
LINE-HEIGHT : 150%;
OVERFLOW : HIDDEN;
TEXT-ALIGN : JUSTIFY;
}

DIV.POST_BODY A:LINK { COLOR: #5990BF; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:VISITED { COLOR: #5990BF; TEXT-DECORATION: UNDERLINE }
DIV.POST_BODY A:ACTIVE { COLOR: #5990BF; }
DIV.POST_BODY A:HOVER { COLOR: #0B226D; TEXT-DECORATION: UNDERLINE }

DIV.POST_TAIL {
WIDTH : 500PX;
FONT-FAMILY : VERDANA, TAHOMA, 돋움;
FONT-SIZE : 11PX;
MARGIN : 0PX 44PX 20PX 39PX;
TEXT-ALIGN : RIGHT;
}

DIV.POST_BOTTOM {
BACKGROUND-IMAGE : URL(http://www.onblog.com/images/post_templet/paper_blue_S1/bar.gif);
BACKGROUND-REPEAT : REPEAT-X;
WIDTH : 525PX;
HEIGHT : 1PX;
MARGIN-LEFT : 25PX;
}

DIV.COMMENT {
WIDTH : 480PX;
BORDER : 1PX #D3D3D3 SOLID;
BACKGROUND : #FFF;
MARGIN : 0PX 50PX 20PX 50PX;
PADDING : 15PX 10PX;
}

DIV.COMMENT_BODY {
WIDTH : 420PX;
MARGIN : 6PX 20PX 20PX;
LINE-HEIGHT : 140%;
TEXT-ALIGN : JUSTIFY;
OVERFLOW : HIDDEN;
}

DIV.COMMENT_TAIL {
MARGIN : 8PX 15PX 5PX;
FONT-FAMILY : VERDANA, TAHOMA, 돋움;
FONT-SIZE : 8PT;
COLOR : #777;
}

DIV.COMMENT_INPUT {
MARGIN : 8PX 15PX 5PX;
PADDING-TOP : 15PX;
BORDER-TOP : 1PX #AAA DOTTED;
}

DIV.COMMENT_LINE {
BORDER-TOP : 1PX #AAA DOTTED;
MARGIN : 10PX 15PX 15PX;
}

DIV.TRACK_TOP {
LINE-HEIGHT : 170%;
MARGIN-LEFT : 10PX;
}

DIV.ARCHIVE_HEAD {
FONT-WEIGHT : BOLD;
MARGIN-BOTTOM : 10PX;
}

DIV.ARCHIVE_BODY {
MARGIN : 20PX 0PX;
LINE-HEIGHT : 160%;
PADDING-BOTTOM : 100PX;
}

IMG.IMAGE_TOP {
MARGIN-BOTTOM : 15PX;
}

IMG.IMAGE_LEFT {
MARGIN-RIGHT : 15PX;
MARGIN-BOTTOM : 15PX;
}

IMG.IMAGE_RIGHT {
MARGIN-LEFT : 15PX;
MARGIN-BOTTOM : 15PX;
}

IMG.IMAGE_MID {
MARGIN-TOP : 15PX;
MARGIN-BOTTOM : 15PX;
}

IMG.LOGO {
MARGIN-BOTTOM : 10PX;
}

DIV.BANNER {
MARGIN : 30PX 0PX 10px 0PX;
}

DIV.BANNER_WIK {
MARGIN : 20PX 10PX 20PX 0PX;
}

.SMALL {
FONT-SIZE : 11PX;
}

.DATE {
FONT-FAMILY : VERDANA, TAHOMA, 돋움;
FONT-SIZE : 8PT;
FONT-WEIGHT : BOLD;
}

.TIME {
FONT-FAMILY : VERDANA, TAHOMA, 돋움;
FONT-SIZE : 8PT;
TEXT-ALIGN : LEFT;
}

.AUTHOR {
FONT-SIZE : 9PT;
FONT-WEIGHT : BOLD;
}

.TXTFLD { WIDTH : 430PX; FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:WHITE}




DIV.CAL_TOP {
}

DIV.CAL {
MARGIN : 20PX 0PX 20PX;
WIDTH : 140PX;
TEXT-ALIGN : CENTER;
}

DIV.CAL_HEAD {
WIDTH : 130PX;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
TEXT-ALIGN : CENTER;
PADDING-TOP : 4PX;
PADDING-BOTTOM : 4PX;
MARGIN-BOTTOM : 10PX;
}

DIV.CAL_BODY {
WIDTH : 130PX;
TEXT-ALIGN : CENTER;
}

DIV.CAL_BOTTOM {
}

.CAL {
FONT-FAMILY : VERDANA, 돋움;
FONT-SIZE : 7PT;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_DAY {
FONT-FAMILY : VERDANA, 돋움;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_SUN {
FONT-FAMILY : VERDANA, 돋움;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #D36654;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_SAT {
FONT-FAMILY : VERDANA, 돋움;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
COLOR : #3572A1;
TEXT-ALIGN : CENTER;
LINE-HEIGHT : 170%;
}

.CAL_TODAY {
FONT-FAMILY : VERDANA, 돋움;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
BACKGROUND : #D1DEE9;
COLOR : #3D5586;
TEXT-ALIGN : CENTER;
}

.CAL_TR {}

DIV.XML {
TEXT-ALIGN : CENTER;
FONT-SIZE : 8PT;
FONT-FAMILY : VERDANA;
MARGIN-BOTTOM : 80PX;
}

마지막으로 메모장 사용팁? 입니다.
이 스킨의 경우 다른 스킨들처럼 <div class=mnttl> 메모장 섹션 제목 </div> 명령어만 사용하면, 각 섹션간의 경계가 표시되지 않습니다.
코드를 본 결과, 메모장에 사용된 함수가 전체적으로 지정되어 있어서, 저처럼 요령없는 사람들이 함부로 건드려봐야 원하는 결과가 나오지 않겠더라구요.
그래서 약간 편법을 써서, 중간에

<p style="padding-bottom : 15px;"> <img src="http://www.onblog.com/images/templet/paper_blue_S1/menu_bar.gif">

라는 코드를 <div class=mnttl> 메모장 섹션 제목 </div>앞에 삽입해두면 "바"그림이 표시되서 나옵니다. 위의 "padding-bottom : 15px;"의 숫자를 조절하면 각 "섹션 경계용 바"와 다음 섹션의 제목 사이 간격을 조절해 줄 수 있어요.
저의 경우는

커피, 바이스, 세키상♡
게으름지수 9328628
JLPT 종료! 결과는??
그냥 베시시 웃지요
우선 사람답게 사는게 목표 <p style="padding-bottom : 15px;"><img src="http://www.onblog.com/images/templet/paper_blue_S1/menu_bar.gif"&lgt;
<div class=mnttl>버닝중</div>데스티니 아스란, 레이♡

이런 식으로 써서 지금과 같은 간격을 만들었습니다 ^^ 역시 실력의 부족함을 메우는 건 눈치와 잔머리라니까요 캬핫핫핫 ^_^;;

혹시나 필요하신 분이 있으시다면 마음껏 가져가세요. 다만 그 이전에 꼭 원소스 제작자이신 샐리님의 종이와 물감 스킨 포스트에 덧글 혹은 트랙백 꼭 남겨주시면 좋겠습니다. 여기에 적힌 것 이외의 팁이나, 원소스 역시 링크된 페이지에서 참조 부탁드리구요 ^^ 덧붙여, 이 스킨을 조금더 멋지게 수정해주신 분들의 팁 역시 환영합니다. 어디를 어떻게 개조했는지 알 길 없는 이 스킨의 안정성을 높여주신다면 너무너무 기쁠꺼에요.

(+) 지금 여기 있는 소스는 캘린더가 왼쪽 메뉴의 제일 하단에 붙어있습니다. 현재 제 블로그는 캘린더 위치를 위로 바꾼거에요
(++) 혹시나 샐리님이 제 블로그에서 코드 공개를 원치 않으실 경우 언제라도 삭제할 예정입니다. 이것도 미리 적어놓을께요.
(+++) .... 덧글없는 포스팅을 해보고 싶네요. 언제쯤 가능할까요?

05.01.04 덧붙임
캘린더의 위치를 바꾸고 싶으신 분들을 위한 팁!

현재 왼쪽 메뉴의 원래 소스는 이렇습니다 (즉 투명한 박스안에 들어가 있는 부분만)

<DIV CLASS=MN_TOP></DIV>
<DIV CLASS=MN_BODY>
<DIV CLASS=PROFILE><CENTER><$logoimage type=1$></CENTER></DIV>
<DIV CLASS=PROFILE_2>
<DIV CLASS=DESCRIPTION><$description$></DIV>
<DIV CLASS=NICK><$nick$></DIV>
</DIV>
<img src="http://www.onblog.com/images/templet/paper_blue_S1/menu_bar.gif">
<DIV CLASS=MN><$menuleft$></DIV>
<CENTER><$calendar type=1$></CENTER>
</DIV>
<DIV CLASS=MN_BOTTOM></DIV>

이부분은 원래 이글루의 스킨 편집 메뉴얼에 설명이 되어 있는 부분인데요. 이글루 스킨에 반드시 들어가야 할 몇몇 이글루스 태그들이 있습니다. 이를테면 시스템 변수라고 해야하나요? 자세한 것은 이글루 스킨 편집 도움말을 확인해 주시구요. 간단히 필요한 것만 말씀드리면
<$logoimage type=1$> 이건 내 이미지를 넣는 부분이구요 type은 디폴트값을 설정하는 겁니다. 이 디폴트 값 역시 이글루 스킨 도움말을 활용해 주세요
<$description$> 이글루 설명을 넣는 곳 (제 이글루의 "생각없이 행동한다는 것이~"가 들어가는 부분으로 삭제 가능한 태그입니다)
<$nick$> 이건 닉이 들어가는 부분 역시 삭제 가능합니다.
<$calendar type=1$> 이게 캘린더의 이글루 태그입니다. 디폴트 값으로 1이 잡혀있구요

따라서 지금 제 스킨처럼 자신의 이미지와 닉이 있는 부분 아래로 캘린더를 옮기고 싶다면 캘린더 태그를 닉이 들어가는 박스 부분의 아래로 옮기면 됩니다. 다만 캘린더 태그만 잘라다 붙이면 캘린더 아래 칸을 나누는 "바"가 나오지 않으므로 위의 메모장에서 활용했던 팁을 이용해서 약간의 트릭을 씁니다.
그렇게 해서 위의 태그를 손을 보면

<DIV CLASS=MN_TOP></DIV>
<DIV CLASS=MN_BODY>
<DIV CLASS=PROFILE><CENTER><$logoimage type=1$></CENTER></DIV>
<DIV CLASS=PROFILE_2>
<DIV CLASS=DESCRIPTION><$description$></DIV>
<DIV CLASS=NICK><$nick$></DIV>
</DIV>
<CENTER><$calendar type=1$></CENTER>
<p style="padding-bottom : 10px;">
<img src="http://www.onblog.com/images/templet/paper_blue_S1/menu_bar.gif">

<DIV CLASS=MN><$menuleft$></DIV>
</DIV>
<DIV CLASS=MN_BOTTOM></DIV>