전체 배경 강의 (7)

♡──── 컴퓨터학습/태그자료

전체 배경 강의 (7)

풍순 2017. 11. 22. 13:59

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

수강생 명단

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

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

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

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

5 인촌1님~ (인촌님)

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

[ 강의 목차 ]

1. 기초사용법

(가) 소스 사용법

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

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

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

2. 배경 깔기

(가) 이미지 배경 깔기

(나) 스위시 배경 깔기

(다) 동영상 배경 깔기

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

(마) 배경 겹쳐 깔기

3. 게시글판 화면 디자인

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

(나) 타이틀 디자인

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

(라) 댓글판 디자인

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

3. 게시글판 화면 디자인

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

<본문영역>이라는 개념을 확실하게 가져야 합니다.

우리가 실습을 하면서 본 것들 중에서 이 <본문영역>이 무척 혼란스럽게 합니다.

본문을 작성하고 난 후 게시글을 그대로 등록하고 열람을 해본 결과와

본문을 작성하고 난 후 버전9.3 소스를 붙혀넣어서 게시글을 등록하고 열람한 결과를 비교하면

본문의 위치와 크기가 다르다는 것을 보았을 것입니다.

다시 상기해 볼까요.

이 강의 게시글에 빨강선 박스로 표시된 영역이 <본문영역>입니다.

게시글 작성자가 작성한 게시글 내용물 즉 본문은 이 <본문영역> 안에서만 표시됩니다.

실습결과들을 보면

본문을 작성하고 난 후 버전9.3 소스를 붙혀넣어서 게시글을 등록한 것들입니다.

브라우즈 창 중앙부에 빨강선 박스로 표시된 영역이 <본문영역>입니다.

이 두 종류의 화면을 비교하면

1. 본문이 표시되는 본문영역의 높이 위치가 다르고

2. 본문영역의 가로 길이가 다르고

3. 본문영역이 게시글 화면 전체에서 배치된 위치 또한 다르다는 것이 확인됩니다.

게시글 작성자가 고려할 점을 짚어 봅니다.

1. 본문이 표시되는 본문영역의 높이 위치가 다르고

게시글을 작성할 때 본문 작성을 시작할 위치를 감안할 필요가 있습니다.

타이틀 아래에 자연스럽게 본문을 표시하고자 한다면

게시글 본문을 조금 아래로 내려서 작성할 필요가 있고요.~

브라우즈 창 최상단에 타이틀과 겹치게 본문을 표시하여~

이색적이고 강열한 무엇을 열람자에게 전하고 싶다면~

본문을 아래로 내리지 않고 바로 작성하면 됩니다.

이런 선택은 버전9.3 소스를 사용하는 사람의 특권입니다.

2. 본문영역의 가로 길이가 다르고

버전 9.3 소스를 사용하면 <본문영역>의 가로 길이는 쉽게 조정할 수 있습니다.

게시글 본문에 들어갈 표시물의 크기를 고려하여

본문영역의 가로 길이를 적절하게 조절해야 균형있는 게시글이 됩니다.

본문 내용물의 크기와 본문영역 가로 길이를 적절하게 맞추지 못하면

본문이 화면 중앙에 균형있게 표시되지 못하고 우측으로 치우지게 됩니다.

이런 현상은 버전 9.3 소스를 사용하지 않는 일반적인 게시글도 똑같이 해당됩니다.

특히 큰 모니터를 사용하시는 분들은 게시글을 올리고 열람을 해볼 때~

작은 모니터를 사용하는 분들에게 어떻게 보이는지 확인해야 하는데~

그 방법은

브라우즈 창을 작게 축소하여 열람을 해보시면 됩니다.

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

<! 본문 가로 넓이 지정 >
<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>

위 예제는 본문영역의 가로 길이가 브라우즈 창 가로 길이의 60%로 지정되어 있고

표시할 위치는 가로방향 20% 위치에 표시한다고 지정되어 있습니다.

width: 60%; left: 20%;

그렇다면 본문영역 오른쪽에 남는 가로 길이는 20%가 되는 것이니

본문영역이 브라우즈 창 중앙에 표시되겠지요.~

본문영역 가로 길이 50% => width:50%; left:25%;

본문영역 가로 길이 60% => width:60%; left:20%;

본문역역 가로 길이 70% => width:70%; left:15%;

본문영역 가로 길이 80% => width:80%; left:10%;

본문영역 가로 길이 90% => width:90%; left:5%;

본문영역 가로 길이 100% => width:100%; left:0%;

계산이 무지하게 어려울까요?~ 흐흐흐~

ㅋ~

씻고 벗고 6개~

복사해서 사용하면 되니

계산 같은 거 안해도 상관 없지요.~ ㅋ~

그리고 본문영역이 빨강선으로 표시되어 있습니다.

border: 1px solid #ff0000;

1. 이 빨강선을 지우실려면 => border: 0px solid #ff0000;

2. 이 선의 색상을 바꾸실려면 #ff000 값을 변경하시면 되고

3. 이 선의 굵기를 조절하실려면 1px 값을 2px 이렇게 값을 크게 잡으시면 되고

4. 이 선의 모양을 점선 이중선 등으로 바꾸실려면 border: 1px solid #ff0000;

solid 값을 바꾸시면 됩니다. => dotted dashed double groove ridge inset outset

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

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>

.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>

/* 댓글판 별빛흐름 배경이미지 겹쳐 깔기 */
.commentDiv {background-image: url( https://t1.daumcdn.net/cfile/cafe/27634B3654FE63792F );
background-attachment: fixed;
background-repeat: repeat; background-position: center center; }
</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>
<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/17574

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

수강생 명단

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

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

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

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

5 인촌1님~ (인촌님)

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

[ 강의 목차 ]

1. 기초사용법

(가) 소스 사용법

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

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

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

2. 배경 깔기

(가) 이미지 배경 깔기

(나) 스위시 배경 깔기

(다) 동영상 배경 깔기

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

(마) 배경 겹쳐 깔기

3. 게시글판 화면 디자인

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

(나) 타이틀 디자인

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

(라) 댓글판 디자인

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

3. 게시글판 화면 디자인

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

<본문영역>이라는 개념을 확실하게 가져야 합니다.

우리가 실습을 하면서 본 것들 중에서 이 <본문영역>이 무척 혼란스럽게 합니다.

본문을 작성하고 난 후 게시글을 그대로 등록하고 열람을 해본 결과와

본문을 작성하고 난 후 버전9.3 소스를 붙혀넣어서 게시글을 등록하고 열람한 결과를 비교하면

본문의 위치와 크기가 다르다는 것을 보았을 것입니다.

다시 상기해 볼까요.

이 강의 게시글에 빨강선 박스로 표시된 영역이 <본문영역>입니다.

게시글 작성자가 작성한 게시글 내용물 즉 본문은 이 <본문영역> 안에서만 표시됩니다.

실습결과들을 보면

본문을 작성하고 난 후 버전9.3 소스를 붙혀넣어서 게시글을 등록한 것들입니다.

브라우즈 창 중앙부에 빨강선 박스로 표시된 영역이 <본문영역>입니다.

이 두 종류의 화면을 비교하면

1. 본문이 표시되는 본문영역의 높이 위치가 다르고

2. 본문영역의 가로 길이가 다르고

3. 본문영역이 게시글 화면 전체에서 배치된 위치 또한 다르다는 것이 확인됩니다.

게시글 작성자가 고려할 점을 짚어 봅니다.

1. 본문이 표시되는 본문영역의 높이 위치가 다르고

게시글을 작성할 때 본문 작성을 시작할 위치를 감안할 필요가 있습니다.

타이틀 아래에 자연스럽게 본문을 표시하고자 한다면

게시글 본문을 조금 아래로 내려서 작성할 필요가 있고요.~

브라우즈 창 최상단에 타이틀과 겹치게 본문을 표시하여~

이색적이고 강열한 무엇을 열람자에게 전하고 싶다면~

본문을 아래로 내리지 않고 바로 작성하면 됩니다.

이런 선택은 버전9.3 소스를 사용하는 사람의 특권입니다.

2. 본문영역의 가로 길이가 다르고

버전 9.3 소스를 사용하면 <본문영역>의 가로 길이는 쉽게 조정할 수 있습니다.

게시글 본문에 들어갈 표시물의 크기를 고려하여

본문영역의 가로 길이를 적절하게 조절해야 균형있는 게시글이 됩니다.

본문 내용물의 크기와 본문영역 가로 길이를 적절하게 맞추지 못하면

본문이 화면 중앙에 균형있게 표시되지 못하고 우측으로 치우지게 됩니다.

이런 현상은 버전 9.3 소스를 사용하지 않는 일반적인 게시글도 똑같이 해당됩니다.

특히 큰 모니터를 사용하시는 분들은 게시글을 올리고 열람을 해볼 때~

작은 모니터를 사용하는 분들에게 어떻게 보이는지 확인해야 하는데~

그 방법은

브라우즈 창을 작게 축소하여 열람을 해보시면 됩니다.

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

위 예제는 본문영역의 가로 길이가 브라우즈 창 가로 길이의 60%로 지정되어 있고

표시할 위치는 가로방향 20% 위치에 표시한다고 지정되어 있습니다.

width: 60%; left: 20%;

그렇다면 본문영역 오른쪽에 남는 가로 길이는 20%가 되는 것이니

본문영역이 브라우즈 창 중앙에 표시되겠지요.~

본문영역 가로 길이 50% => width:50%; left:25%;

본문영역 가로 길이 60% => width:60%; left:20%;

본문역역 가로 길이 70% => width:70%; left:15%;

본문영역 가로 길이 80% => width:80%; left:10%;

본문영역 가로 길이 90% => width:90%; left:5%;

본문영역 가로 길이 100% => width:100%; left:0%;

계산이 무지하게 어려울까요?~ 흐흐흐~

ㅋ~

씻고 벗고 6개~

복사해서 사용하면 되니

계산 같은 거 안해도 상관 없지요.~ ㅋ~

그리고 본문영역이 빨강선으로 표시되어 있습니다.

border: 1px solid #ff0000;

1. 이 빨강선을 지우실려면 => border: 0px solid #ff0000;

2. 이 선의 색상을 바꾸실려면 #ff000 값을 변경하시면 되고

3. 이 선의 굵기를 조절하실려면 1px 값을 2px 이렇게 값을 크게 잡으시면 되고

4. 이 선의 모양을 점선 이중선 등으로 바꾸실려면 border: 1px solid #ff0000;

solid 값을 바꾸시면 됩니다. => dotted dashed double groove ridge inset outset

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

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

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

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

</TD></TR></TBODY></TABLE></TR></TBODY></TABLE></TR></TBODY></TABLE></TR></TBODY></TABLE>
<! 배경깔기 시작==============================================================================>

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

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

본문 끝 지점

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

저작자표시 비영리 변경금지

'♡──── 컴퓨터학습 > 태그자료' 카테고리의 다른 글

[스크랩] 전체배경 강의 (8) (0)	2017.11.22
[스크랩] 댓글판 디자인 견본(강의) (0)	2017.11.22
전체배경 강의 (5) (0)	2017.11.22
전체 배경을 이용한 글 올리기 (0)	2017.11.22
다음에서 얻은 음악 소스 네이버에 올리기 (0)	2017.11.22

현재글전체 배경 강의 (7)

그리움.. 사랑

Today :
Yesterday :

그리움.. 사랑