|
서울에서 들쑤시고 살다보면~ 가끔 시골 고향생각이 납니다.~
모든 것이 불편하고 지긋지긋하게 느껴졌던 기억~ 바로 고향인데요.~ 그런 고향이 가끔 그립죠?~ 힛~
그래서 소스 하나를 더 드립니다.~ 흐흐~ 새로운 다양한 기법들을 사용하다 보면 좋긴 한데~ 그래도 가끔 원래의 게시글을 사용하고 싶을 때가 있고~ 그 때~ 이 소소를 사용하시라고 드리는 것입니다.~ ㅎ~
또 하나~ 은빛햇살님이 죽도록 좋아하는 패턴인데요.~ 으히히~ 공교롭게 그 소스 활용성이 낮은 소스입니다.~ 이 참에 왕창 리뉴얼을 해서 드립니다.~ 부디 즐겁게 사용하시길 빕니다.~
이번에 드리는 소스 명칭은 STD_v_1 이라고 명명합니다. 이 게시글 아래에 첨부되어 있고요.~
STD_v_1 은 daum cafe 기본 게시글판 입니다.
이 소스의 구조는 Full_v9.3 소스와 동일합니다.~ 흐흐흐~
컴퓨터를 팔아먹고 싶다면 무엇이 제일 중요할까요?~
혹~ 하는 좋은 기능이나 뻔쩍~ 하는 겁나 좋은 성능?~ 아닙니다.~
기존 컴터 사용자들의 투자를 보호해 주는 정책이 제일 중요합니다.
시간과 노력을 엄청 투자해서~ 정말 힘들게 공부하여 얻은 컴퓨터 지식~
새로운 컴퓨터로 바꾸고 싶은데~ 왕창 달라진 컴퓨터~ 처음부터 다시 공부를 해야 한다면~ 그 컴퓨터 사고 싶겠소?~ ㅋㅋ~
이번에 드리는 소스는 Full v9.3 소스를 사용할 줄 아는 사람은 별로 공부할 것이 없습니다.
일단 소스 구조가 똑 같습니다.
이단 본문과 결합하고 분리하는 방법이 똑 같습니다.
삼단 사용하는 태그는 모두 호환됩니다.
단, 적용시 일부 태그는 차이점이 있고~ 이것만 숙지하면 됩니다.~ 흐흐흐~
설명 들어갑니다.~ ㅎ~
아래 소스 견본에서 표시한 소스 색상과 같은 색상의 글로 해당 소스를 설명합니다.~
(1) 게시글판 가로 길이 지정
#wrap {min-width:500px ! important; width: 70% ! important; margin-left: 15%; }
예 width: 50% ! important; margin-left: 25%; width: 60% ! important; margin-left: 20%; width: 70% ! important; margin-left: 15%; width: 80% ! important; margin-left: 10%; width: 90% ! important; margin-left: 5%; width: 96% ! important; margin-left: 2%; width: 100% ! important; margin-left: 0%;
기억하실 겁니다.~ 히힛~
(2) 푸른색 소스는 Full_v9.3 소스에 적용하는 것과 같은 것으로 사용하시면 됩니다.
(3) 카페메뉴와 본문영역 디자인
이것은 배경에 색상을 깔거나 배경이미지를 까는 것입니다.
아래 견본 소스를 참조 하시고요.~
(4) 배경 깔기
<style>
/* 배경 - 메인 배경이미지 */
body {
background-image: url( http://cfile295.uf.daum.net/image/23359E3A574DB8391BC26E );
background-attachment: fixed; background-repeat: no-repeat; background-position: center center; background-size: cover; }
/* 배경 - 이미지 겹쳐깔기 (배경이 보여질 세로길이를 지정해야 함) */
#upper { height: 600%; position:absolute; width:100%; left:0px; top:0px; opacity:0.9; filter:alpha(opacity=90); z-index: -3000;
background-image: url( http://cfile261.uf.daum.net/image/27634B3654FE63792F5EF4 );
background-attachment: fixed;
background-repeat: repeat; background-position: center center; }
</style>
배경 겹쳐깔기를 할 때 #wrap 에 깔 수 없고~ #upper 에 깔아야 하고~ 깔리는 영역의 세로 길이를 지정해야 합니다. height: 600%;
이 점이 특이한 점이어서 주의가 요구됩니다.~
(5) 배경 스위시 깔기, 배경 동영상 깔기, 배경에 칠하기~
Full_v_9.3 에 사용하는 소스를 이 소스에 모두 사용 가능합니다.
단~ ~ ~ 상하 스크롤링이 됩니다.
배경을 브라우즈 창에 고정하여 까는 기법은 (4)번 기법 뿐입니다.
칠을 하거나 스위시를 깔거나 동영상을 깔게 되면 이것은
마우스 스크롤에 따라 상하로 움직입니다.
이 점을 고려하여 배경을 깔아야 합니다.
견본을 사용하여 결과를 확인하시면 이해가 빠를 것입니다.~
이상으로 사용설명을 마칩니다.~
쉽죠?~ ㅋ~
노력과 시간을 투자하여 이미 배운 컴기술을 지적 재산이 되게 하는 것~
이것이 투자자를 보호하는 정책의 핵심입니다.~
허벌나게 감사드립니다.~ 우헤헷~
(^.^)
<><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><>
<style> /* STD_v_1 */
/* 게시글판 가로길이 지정 */
#wrap {min-width:500px ! important; width: 70% ! important; margin-left: 15%; } .list_btn_top, .list_btn_top .list_paging {z-index: 9999999;}
.list_btn_area {border: none; }
body , #primaryContent , .cb , .user_contents , .bbs_contents
{padding: 0px 0px 0px 0px !important; margin: 0px 0px 0px 0px !important; }
#daum-ad-root {height:0px; width: 0px;}
#cafe_gnb { opacity:0.5; filter:alpha(opacity=50) ; }
</style> <style>
.user-container { position: absolute; top: 0; left: 0; width:100%; height: 100%; }
.e100-container { position: absolute; top: 0; left: 0; width:100%; height: 100%; }
.e100-container object , .e100-container img,
.e100-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container img,
.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.xmbed-container { position: relative; padding-bottom: 112.5%; height: 0; overflow: hidden; max-width: 100%; }
.xmbed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<style> /* 타이틀 사이즈 맞춤 */
#TITLECAFENAME img {display: block; background: url(http://cfile279.uf.daum.net/original/242396345638057C02041D)
no-repeat; width: 324px; height: 63px; }
#TITLECAFENAME { width: 324px; height: 63px; left:50%; margin-left:-162px; border: 0 solid #ffffff;
position:absolute; top: 5px; }
#TITLECAFEADDRESS { position: absolute; top: 55px; left: 50%; margin-left: -153px; border: 0px solid #ff0000; }
#TITLEMENUGROUP {position: absolute; top: 80px; left: 50%; margin-left: -225px; border: 0px solid #ff0000; }
#title {position: relative; height: 110px ! important; top: 0px ! important; }
#title { width: 100%; position:relative; left: 0% ! important;}
#title { opacity:0.5; filter:alpha(opacity=50); }
#TITLEBACKGROUND {background-color: transparent; }
</style>
<style> /* 타이틀 배경이미지 한개 깔기 */
#TITLEBACKGROUND {background-color: transparent; } /* 타이틀 배경이미지 깔기 */
#TITLEBACKGROUND
{background-image: url( http://cfile288.uf.daum.net/image/2713F337550E0A560FA075 );
background-attachment: fixed;
background-repeat: repeat; background-position: center center; } </style>
<style>
/* 카페메뉴 디자인 */
/*
#cafemenu
{ background: linear-gradient( to right, #00ff00, #ffffff );
opacity:0.6; filter:alpha(opacity=60)
progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#00ff00 , EndColorStr=#ffffff ); }
*/
#cafemenu { opacity:0.6; filter:alpha(opacity=60) ;
background-image: url( http://cfile288.uf.daum.net/image/2713F337550E0A560FA075 );
background-attachment: fixed;
background-repeat: repeat; background-position: center center; }
/* 본문영역 디자인 */
/*
#primaryContent
{ background: linear-gradient( to right, #ffffff, #00ff00 );
opacity:0.8; filter:alpha(opacity=80)
progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#ffffff , EndColorStr=#00ff00 ); }
*/
#primaryContent { opacity:0.8; filter:alpha(opacity=80) ;
background-image: url( http://cfile288.uf.daum.net/image/2713F337550E0A560FA075 );
background-attachment: fixed;
background-repeat: repeat; background-position: center center; }
</style>
<style> /* 댓글판 파랑 그라데이션 */
.commentDiv { opacity:1; filter:alpha(opacity=100); }
.commentDiv, .comment_pos, .recomment_pos, .longtail_comment { background-color: transparent ! important; }
.longtail_comment { height: 220px; } .longtail_comment textarea { height: 200px; }
.commentBox { background: linear-gradient( to right, #ffffff , #0000ff ); }
.commentBox { opacity:0.6; filter:alpha(opacity=60)
progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#ffffff , EndColorStr=#0000ff ); }
.commentBox .id_admin, .commentBox .txt_btn { background-color:#ffffff; }
.commentBox .id_admin {padding-top:2px; padding-bottom:2px; height: 15px; }
.comment_pos { color: #000000; } /* 댓글 색상 지정 */
.recomment_pos { color: #000000; } /* 답댓글 색상 지정*/
.longtail_comment textarea { color: #000000; } /* 입력댓글 색상 지정 */ /* 댓글판 별빛흐름 배경이미지 겹쳐 깔기 */
.commentDiv {background-image: url( http://cfile261.uf.daum.net/image/27634B3654FE63792F5EF4 );
background-attachment: fixed;
background-repeat: repeat; background-position: center center; }
</style> <style>
.comment_pos, .recomment_pos { font-weight: bold; }
.longtail_comment textarea { font-weight: bold; font-family:휴먼편지체 ! important; font-size:15pt ! important; }
/* (normal) | (bold) | (bolder) | (lighter) | (number) | (inherit) */
</style>
</TD></TR></TBODY></TABLE></TR></TBODY></TABLE></TR></TBODY></TABLE></TR></TBODY></TABLE>
<! 배경깔기 시작================================================================================>
<style>
/* 배경 - 메인 배경이미지 */
body {
background-image: url( http://cfile295.uf.daum.net/image/23359E3A574DB8391BC26E );
background-attachment: fixed; background-repeat: no-repeat; background-position: center center; background-size: cover; }
/* 배경 - 이미지 겹쳐깔기 (배경이 보여질 세로길이를 지정해야 함) */
#upper { height: 600%; position:absolute; width:100%; left:0px; top:0px; opacity:0.9; filter:alpha(opacity=90); z-index:-3000;
background-image: url( http://cfile261.uf.daum.net/image/27634B3654FE63792F5EF4 );
background-attachment: fixed;
background-repeat: repeat; background-position: center center; }
</style>
<!-- STD_v_1 스크롤링 배경 ( Full_v_9.3 배경 태그와 호환성 있음) -->
<! 배경 이미지>
<div class='user-container' style="Z-INDEX: -2000; position:absolute; top: 0%; width:100%; height:100%; opacity:0.5; filter:alpha(opacity=50); background-image: url( http://cfile284.uf.daum.net/image/256D7349571096422578CA ); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; background-size:cover; " >
</div>
<! 배경 - 스위시 >
<EMBED style="z-index: -2000; position: absolute; width:100%; height:100%; left: 0%; top: 0%; opacity:0.4; filter:alpha(opacity=40); " scale="exactfit" type=application/x-shockwave-flash src= http://cfile242.uf.daum.net/media/026A774A51BF0B62301D54 wmode="transparent" allowNetworking='internal' allowScriptAccess='sameDomain'> <EMBED style="z-index: -2000; position: absolute; width:100%; height:100%; left: 0%; top: 100%; opacity:0.4; filter:alpha(opacity=40); " scale="exactfit" type=application/x-shockwave-flash src= http://cfile242.uf.daum.net/media/026A774A51BF0B62301D54 wmode="transparent" allowNetworking='internal' allowScriptAccess='sameDomain'> <EMBED style="z-index: -2000; position: absolute; width:100%; height:100%; left: 0%; top: 200%; opacity:0.4; filter:alpha(opacity=40); " scale="exactfit" type=application/x-shockwave-flash src= http://cfile242.uf.daum.net/media/026A774A51BF0B62301D54 wmode="transparent" allowNetworking='internal' allowScriptAccess='sameDomain'>
<EMBED style="z-index: -2000; position: absolute; width:100%; height:100%; left: 0%; top: 300%; opacity:0.4; filter:alpha(opacity=40); " scale="exactfit" type=application/x-shockwave-flash src= http://cfile242.uf.daum.net/media/026A774A51BF0B62301D54 wmode="transparent" allowNetworking='internal' allowScriptAccess='sameDomain'>
<! 배경 - 동영상 소스>
<div style="z-index: -2000; position: absolute; width: 100%; left: 0%; top: 500%; opacity:0.5; filter:alpha(opacity=50); ">
<! 동영상 1 >
<div class='embed-container' >
<embed type=application/x-shockwave-flash src= https://www.youtube.com/v/ysqmCM1TjaY?version=2&autoplay=1&loop=1&controls=0&showinfo=0&autohide=1&cc_load_policy=0&iv_load_policy=3&vq=highres&fs=0&rel=0&start=1&playlist=1 allowScriptAccess="sameDomain" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" allowScriptAccess='sameDomain'>
</div>
</div>
<! 배경깔기 끝================================================================================>
<TABLE width=100% ><TBODY><TR><TD>
<TABLE width=100% ><TBODY><TR><TD>
<TABLE width=100% ><TBODY><TR><TD>
<TABLE width=100% ><TBODY><TR><TD>
<! 본문 시작================================================================================= >
<! 글쓰기 시작>
<! div style="left: 0px; top: 1000px; width: 100%; position: relative; border: 0px solid #000000; background-image: url( http://cfile247.uf.daum.net/image/260C1A4556DD41163EB7ED ); background-attachment: fixed; background-repeat: no-repeat; background-position: center center; background-size:cover; opacity:0.7; filter:alpha(opacity=70); " >
<div style="left: 0px; top: 0px; width: 100%; position: relative; border: 0px solid #000000; " >
<center>
<table style=" background-color:#ffffff; opacity:0.5; filter:alpha(opacity=50); width:100%; border: 1px solid #000000; " >
<! table >
<tbody>
<tr>
<td width=45%></td>
<! td style="background-color:#ffffff; opacity:0.5; filter:alpha(opacity=50); padding: 10px 20px 10px 20px; " align=left >
<td style=" padding: 10px 20px 10px 20px; " align=left >
<! td align=left >
<PRE><FONT style="FONT-SIZE: 13pt" color=#000000 face=휴먼편지체>
<b>
글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~
글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~
글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~
글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~
글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~
글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~
글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~
글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~
글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~
글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~ 글 쓰는 곳~
</b>
</font>
</pre>
</td>
<td width=45%></td>
</tr></tbody></table>
</center>
</div>
<!-- 글쓰기 끝 -->
<! 음원 > <center><EMBED style="HEIGHT: 45px; WIDTH: 300px; LEFT: 96px; TOP: 29px" type=audio/x-ms-wma height=45 width=300 src=http://pds1.egloos.com/pds/1/200511/21/34/rainbow.wma allowScriptAccess="sameDomain" allowNetworking="internal" loop="-1"></center>
|