[스크랩] 전체배경 강의 (8)

본문 시작 위치 (게시글 본문 영역 -> 빨강색 선으로 표시된 박스)

수강생 명단

1 그대의 열정님~ (열정님)

2 샤방샤방님~ (샤방님)

3 사과향기님~ (향기님)

4 초록지안님~ (초록님)

5 인촌1님~ (인촌님)

==================================================================================================================

[ 강의 목차 ]

1. 기초사용법

(가) 소스 사용법

- 1,2,3번 소스와 게시글 본문을 결합하여 게시글을 올리는 방법

- 1,2,3번 소스와 게시글 본문을 분리하는 방법

(나) 게시글 본문영역 식별하기

2. 배경 깔기

(가) 이미지 배경 깔기

(나) 스위시 배경 깔기

(다) 동영상 배경 깔기

(라) 배경에 칠하기 / 배경에 글넣기

(마) 배경 겹쳐 깔기

3. 게시글판 화면 디자인

(가) 본문 가로 넓이 조절하기와 본문 경계선 표시하기

(나) 타이틀 디자인

(다) 카페메뉴 표시하기와 카페메뉴 디자인

(라) 댓글판 디자인

====================================================================================================================

3. 게시글판 화면 디자인

(나) 타이틀 디자인

(다) 카페메뉴 표시하기와 카페메뉴 디자인

게시글 열람의 목적은 어디까지나 본문 열람입니다.

타이틀이나 카페메뉴를 보기 위하여 게시글을 열람하는 사람은 없습니다.

타이틀은 브라우즈 창 최상단에 뚜렸하고 크게 자라잡고 있어~

게시글 작성자가 보여주고자 하는 본문을 열람하는데 있어 적잖은 방해가 됩니다.

카페메뉴는 화면에 복잡성을 주는 주범입니다.

이것만 없으면 화면이 깨끗~ 시원~ ㅋㅋ~

그러므로 타이틀이나 카페메뉴 따위는 화면에 보이지 않는 게 즣겠지요?~ ㅋ~

그럴까욤?~

그러나 이 타이틀은 게시글의 정체성을 표시하는 것이어서

타이틀 없는 게시글은 주민번호 없는 용공성 농후한 국민과 같다 할 것이고~ ㅋ~

카페메뉴는 컴 조작의 편의를 제공하는 기능성 표시물입니다.

어쩔까요?~ ㅋ~

이러한 점들을 감안하여 적절한 디자인을 한다면 수준 높은 디자이너?~ 우헤헷~

주민등록등본부터 시작해서~ 회사에서 사용하는 업무일지~ 부동산 계약서 양식까지~

우리나라에서 사용하는 제반 문서들을 보면 예외 없이 모두 타이틀이 거창합니다.

거창한 타이틀~ 이거 일본문화가 반영된 일본식 문서양식입니다.

유럽이나 다른 곳에서는 타이틀이 크지 않고 본문을 더 잘 보이게 작성합니다.

답도 없는 이야기 그만하고요.~

알아서들 식성대로 잘 만들어서 사용하시면 천국가리라.~ 흐~

버전9.3 소스 세그멘트2 부분에 아래와 같은 소스가 있습니다.

<style> /* 타이틀 그라데이션 */
#TITLEBACKGROUND {background-color: transparent; }
#title
{ background: linear-gradient( to bottom, #ff0000, #ffffff );
opacity:0.3; filter:alpha(opacity=30)
progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ff0000 , EndColorStr=#ffffff ); }
/* 타이틀 배경깔기 */
#TITLEBACKGROUND
{background-image: url( https://t1.daumcdn.net/cfile/cafe/27634B3654FE63792F );
background-attachment: fixed;
background-repeat: repeat; background-position: center center; }
</style>

위 소스를 통째로 아래와 같이 바꾸어 사용하시면 됩니다.

------------------------------------------------

<style> /* 타이틀 디자인 안함 */
#TITLEBACKGROUND {background-color: transparent; }
</style>

--------------------------------------------------

<style> /* 타이틀 배경에 칠하기 1 */
#TITLEBACKGROUND {background-color: #ff00ff; }
</style>

----------------------------------------------------

<style> /* 타이틀 배경에 칠하기 2 (그라데이션) */
#TITLEBACKGROUND {background-color: transparent; }
#title
{ background: linear-gradient( to bottom, #ff0000, #ffffff );
opacity:0.3; filter:alpha(opacity=30)
progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ff0000 , EndColorStr=#ffffff ); }
</style>

--------------------------------------------------

<style> /* 타이틀 배경에 칠을 하고 그 위에 배경이미지 깔기 */
#TITLEBACKGROUND {background-color: transparent; }
#title
{ background: linear-gradient( to bottom, #ff0000, #ffffff );
opacity:0.3; filter:alpha(opacity=30)
progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ff0000 , EndColorStr=#ffffff ); }
/* 타이틀 배경이미지 깔기 */
#TITLEBACKGROUND
{background-image: url( https://t1.daumcdn.net/cfile/cafe/27634B3654FE63792F );
background-attachment: fixed;
background-repeat: repeat; background-position: center center; }
</style>

---------------------------------------------------

<style> /* 타이틀에 배경이미지 한개 깔기 */
#TITLEBACKGROUND {background-color: transparent; }

/* 타이틀 배경이미지 깔기 */
#TITLEBACKGROUND

{background-image: url( https://t1.daumcdn.net/cfile/cafe/180D9C444FA5221E27);
background-repeat: no-repeat; background-position: center center; background-size: cover; }

</style>

---------------------------------------------------

<style> /* 타이틀 배경이미지 두개 깔기 */
#TITLEBACKGROUND {background-color: transparent; }

/* 타이틀 배경이미지 깔기 */
#TITLEBACKGROUND
{background-image: url( https://t1.daumcdn.net/cfile/cafe/27634B3654FE63792F );
background-attachment: fixed;
background-repeat: repeat; background-position: center center; }
/* 타이틀 배경이미지 겹쳐깔기 */
#title {background-image: url( https://t1.daumcdn.net/cfile/cafe/180D9C444FA5221E27);
background-repeat: no-repeat; background-position: center center; background-size: cover; }
</style>

----------------------------------------------------

(다) 카페메뉴 표시하기와 카페메뉴 디자인

<style>
#cafemenu {z-index:9999999; position:absolute; overflow-y: auto; width: 220px; height:350px;
left:100%; top: 200px; margin-left:-245px;
border: 1px solid #d2d2d2; background-color: #000000; opacity:0.6; filter:alpha(opacity=60); }
</style>

설명

카페메뉴 크기 -> width: 220px; height:350px;

표시할 위치 (브라우즈 창 왼쪽) -> left:0px; top: 200px;

또는

표시할 위치 (브라우즈 창 오른쪽) -> left:100%; top: 200px; margin-left:-245px;

또는

표시할 위치 (브라우즈 창 가운데) -> left:50%; top: 200px; margin-left:-120px;

바탕색 -> background-color: #000000;

투명도 -> opacity:0.6; filter:alpha(opacity=60);

카페메뉴 글자색은 검정입니다.

검정 배경을 사용할 때 카페메뉴 글자가 보이지 않게 됩니다.

이 때 카페메뉴의 글자색을 변경해주는 소스입니다.

<style>
/* 카페메뉴 글색 지정- 하늘색 ( 어두운 배경에 사용) */

.cafeinfoBox, .cafeinfoBox a:link, .cafeinfoBox a:visited, .cafeinfoBox a:hover, .cafeinfoBox a:active {color: #33ffff; }
/* ----------------------------------------------------------------------------------------- */
.cafeinfoBox .txt_point, .cafeinfoBox a.txt_point:link, .cafeinfoBox a.txt_point:visited, .cafeinfoBox a.txt_point:hover,
.cafeinfoBox a.txt_point:active {color: #33ffff; }
/* ----------------------------------------------------------------------------------------- */
.cafeon, .cafeonBox, .cafeonBox a:link, .cafeonBox a:visited, .cafeonBox a:hover, .cafeonBox a:active {color:#ff0000 }
/* ----------------------------------------------------------------------------------------- */
.menuList, .menuList a:link, .menuList a:visited, .menuList a:hover, .menuList a:active {color: #33ffff; }
/* ----------------------------------------------------------------------------------------- */
.menuList .group_bg { } .menuList .group_tit, .menuList .group_tit a:link, .menuList .group_tit a:visited, .menuList
.group_tit a:hover, .menuList .group_tit a:active, .menuList .group_ic, .menuList .group_ic a:link, .menuList .group_ic a:visited,
.menuList .group_ic a:hover, .menuList .group_ic a:active {color: #33ffff; }
</style>

카페메뉴 관련 소스를 넣는 곳은 아래 버전9.3 소스에 표시해 두었습니다.

 

=====================================================================================

<style> /* Full_v9.3 */

/*

Full_v9.2 본문 가로 스크롤 기능을 지원하지 않음

Full_v9.3 본문 가로 스크롤 기능을 지원함

*/
#cafe_gnb, #header, #cafemenu, #footer, .article_subject, .article_subject .date, .bar, .bar2,
.article_writer span, .article_writer a, .article_writer .url, .article_writer .url a
{position:absolute; top:-50000px;}
body, #wrap, #container, #primaryContent , #content, .cb, .user_contents, .bbs_contents
{padding: 0px 0px 0px 0px !important; margin: 0px 0px 0px 0px !important; }
#wrap, #container, #content, #primaryContent { min-width: 400px ! important; }
</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>
/* 화면정리 */
body { overflow: hidden; }
body {cursor:url(https://t1.daumcdn.net/cfile/cafe/215FE63453BE583A10?download ), progress; }
a:hover{ color:red; } a:link{color:blue;} .btn_txt {color:blue;}
.cmt_search_box_sns, .cmt_search_box {opacity:0.5; filter:alpha(opacity=60); }
.btn_area, .btn span { opacity:0.5; filter:alpha(opacity=60); }
/* 광고 제거 */
.app_download_wrap,
.cafegameBox, #sidebar1, #sideAd, .side_rss, .outBox, #cafeProfileImage {position:absolute; left:-50000px; }
#daum-ad-root { width:0px; }
</style>

<style>
.commentBox , .commentDiv { text-align: left; }
/*
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }
*/
.cclArea , .goTop {position:absolute; top: -50000px; }
.list_btn_area {border: none; }

.list_btn_top {z-index:9999999; position: absolute; width:100%; height:25px; top: 15px; left: 0px ! important; margin-left: 0px; }
.list_btn_top .list_paging {clear:both; border:1px solid #cccccc; background-color:#ffffff; float:right ! important;
margin-right: 30px; position:relative; top: -25px;}

.list_btn_top .btn_bg { width:0px; }
.list_btn_top .list_paging { width: 82px; top: 10px; margin-right: 5px; opacity:0.5; filter:alpha(opacity=50); }
.list_btn_top { width: 10px ! important; height:160px; border: 0px solid #ff0000; }
.list_btn_top { left: 100% ! important; margin-left: -35px; }
.list_btn_top .btn {float: right ! important; }
</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 , #ff0000 ); }
.commentBox { opacity:0.6; filter:alpha(opacity=60)
progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#ffffff , EndColorStr=#ff0000 ); }
.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( https://t1.daumcdn.net/cfile/cafe/27634B3654FE63792F );
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>
<! 배경깔기 시작==============================================================================>

<! 배경깔기 끝================================================================================>
<center>

<div class='user-container' style="Z-INDEX: 999999; position:absolute; top: 0px; overflow-y: scroll; overflow-x: hidden; border: 1px solid #d2d2d2; text-align:left; overflow-x: auto; ">
<TABLE width=100% ><TBODY><TR><TD>
<TABLE width=100% ><TBODY><TR><TD>
<! 본문 가로 넓이 지정 >
<div class='user-container' style="Z-INDEX: 999999; position:absolute; top: 0px; width: 60%; left: 20%; ">
<! 본문 영역 경계선 표시>
<TABLE width=100% border=0 style="border: 1px solid #ff0000; " ><TBODY><TR><TD>
<center>
<TABLE width=100% border=0 ><TBODY><TR><TD>
<div id="title" style="height:110px;"><div id="TITLEBACKGROUND"> </div>
<div id="TITLEHOMELINK" class="hand"></div>
<div id="TITLECAFENAME"><img src="https://t1.daumcdn.net/cafe_image/cf_img2/img_blank2.gif" alt="" /></div>
<div id="TITLECAFEADDRESS"> <img src="https://t1.daumcdn.net/cafe_image/cf_img2/img_blank2.gif" alt="" /> </div>
<div id="TITLEMENUGROUP"><div class="roundL"></div> <ul id="menuItemList">
<li > <div class="menu1 first"> </div> </li><li class="mbar">|</li>
<li > <div class="menu2"> </div> </li> <li class="mbar">|</li>
<li > <div class="menu3"> </div> </li> <li class="mbar">|</li>
<li > <div class="menu4"> </div> </li> </ul> </div> </div><!-- end title -->
<style>
#TITLECAFENAME img {display: block; background: url(https://t1.daumcdn.net/cfile/cafe/242396345638057C02?original)
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: absolute; height: 110px ! important; width: 100% ! important; left:0px; top: 25px; opacity:0.5; filter:alpha(opacity=50); }
</style>
<style> /* 타이틀 그라데이션 */
#TITLEBACKGROUND {background-color: transparent; }
#title
{ background: linear-gradient( to bottom, #ff0000, #ffffff );
opacity:0.3; filter:alpha(opacity=30)
progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ff0000 , EndColorStr=#ffffff ); }
/* 타이틀 배경깔기 */
#TITLEBACKGROUND
{background-image: url( https://t1.daumcdn.net/cfile/cafe/27634B3654FE63792F );
background-attachment: fixed;
background-repeat: repeat; background-position: center center; }
</style>

<! 카페메뉴 표시하기 소스와 케페메뉴 글자색 지정 소스 넣는 곳>

<! 본문 시작================================================================================= >

본문 끝 지점

출처 : http://cafe.daum.net/daum1000/1Z0X/17584

 

 

 

 

 

 

 

출처 : 그리움... 사랑

글쓴이 : 풍순이 원글보기

메모 :