[스크랩] 댓글판 디자인 견본(강의)

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

[스크랩] 댓글판 디자인 견본(강의)

풍순 2017. 11. 22. 14:02

댓글판 디자인에 대하여 체계적으로 가르쳐 드린 적이 한 번도 없습니다.
그 이유를 밝혀보면~
선수급도 예외없이 무슨 소린지 소화하기 어렵기 때문이었습니다.~

그러나~
내가 특정 페이지를 제작하여 올리면서~
그 페이지에 적합한 댓글판 디자인을 했었고~
그런 소스는 여러 종류가 퍼진것으로 보입니다.~

그러다 보니~
퍼져나간 댓글판 디자인 소스들이
불완전한 것들이 대부분입니다.

심지어는 내가 특정인에게 일부러 가르쳐 드린것조차~
문제점을 가지고 있는 것들입니다.

일부러 그렇게 알려드린 건 아니고요.~
그 화면에 맞는 것만을 알려드린다거나
또는 긴 소스를 복잡하게 전달하면 받는 측에서 감당을 못하니~
최소한 사용이 가능하게 간단명료하게 알려드리다 보니~
적용하는 화면이 약간만 달라지면
맞지 않는 현상이 발생하더군요.~

daum cafe 게시글 화면이 어떻게 디지인 되었는지 분석해 보면~
단연 댓글판이 가장 복잡합니다.
그만큼 댓글판은 복잡한 기능을 가지고 있다는 방증이고요.~
복잡한만큼 건드리기 어려운 부분이기도 합니다.

그러나 댓글판은
시선이 많이 집중되는 곳이어서~
다른 건 무시해도
댓글판 디자인을 미려하게 만들고픈 분들이
많으리라고 추정됩니다.~

그래서 저래서~ ㅋㅋㅋ~
댓글판을 디지인 할 수 있도록 안내를 어떻게 하면 좋을지~
고민했지만 뾰족한 수가 없어욤.~ ㅋ~

왜냐~
일단 댓글판의 구조가 넘 복잡하고요.~
댓글판 안에는 쪼가리 판 종류만 대충10 가지가 넘습니다.
이것들을 특정 조건에 맞게 일괄적으로 설정을 해야 합니다.~

거기다~
화면 바탕색의 밝기에 따라~
바디 배경이미지의 그림 형태나 밝기에 따라~
그리고
댓글판 배경이미지 크기에 따라~
댓글판 배경이미지의 밝기에 따라~

여러 가지의 조건에 부합하도록
댓글판 디자인을 각각 달리 해야 하므로~
게시글을 작성할 때마다~
아이보다 배꼽이 더 큰 것과 같이~
복잡한 댓글판 디자인을 감당하기 어렵습니다.~

그리 그리하야~~ ㅋㅋ~
연구 끝에~
이해하기 어려운 소리를 지껄이는 것보다~
그냥 견본을 몇종 만들어 드리고~

특정 견본을 선택하여 사용하고~
해당 견본의 주소나 색상지정값들만~
능력대로 쪼금 수정해서 사용하는 정도만이어도~
다양한 디자인의 댓글판을 운용할 수 있으리라는 생각으로~
이 게시글을 올립니다.~

감사합니다.~
우헤헤~

(^.^)

ps
여러 종류의 태그 소스를 모아서
한 게시글에 사용하다 보면
서로 충돌하는 경우가 흔하게 있습니다.~

많은 태그를 사용할수록~
이점을 각별히 유의해야 합니다.~

이것 저것 많은 태그들을 모아서 한꺼번에 왕창 붙혀넣기 하면~
원치 않는 불필요한 태그들이 묻어서 들어가고~
이것이 나중에 추가하여 넣은 태그들과 충돌하여~
며느리도 모르는 이상한 결과가 만들어질 수 있어서~
보정할려면 머리카락 다 빠집니다.~
크크크~

ps2~ ~ ~
여기서 말하는 <충돌>이라는 말이 머야요?~
박치기야요?~ 이럽니다.~ ㅋ~
해서 추가 부연설명을 제공합니다.~
ㅎ~

예컨데~
게시글을 작성하면서~
특정 요소의 배경색을 빨강색으로 지정하는 태그를 사용했다고 칩시다.~
그 후~
이 사실을 잊고 또는 변심 내지 조건이 바뀌어서~
나중에 또 동 요소의 배경색을 노랑색으로 지정하는 태그를 사용했을 때~
컴이 어떻게 처리를 해줘야 착한 컴이 될까요?~
ㅋ~

거듭되는 중복 설정이 있다면 컴은
맨 마지막 설정을 따릅니다.

이 걸 모르고 ~
앞에 선언한 태그를 확실하게 고쳤음에도 불구하고
안먹힌다고 컴이 돌았다고 합니다.~ ㅋ~

충돌이라는 말~
이해가 쉽지요?~
글쎄 그럴까효?~ 흐흐흐~

설정하는 형식이 이런 것만 있는 게 아닙니다.~

이전에 동 요소에 대하여 어떠한 설정이 있었든~
앞으로 또 동 요소에 대하여 어떠한 설정이 수없이 등장하더라도~
모두 무시하고
지금 이 설정을 최우선적으로 적용하라는 설정도 있습니다.

아무리 고쳐도 안먹힌다고~
최후로 선언해도 안먹힌다고~
다른 곳에서 따로 이 소스를 시험하니 잘먹히는데~
딱 여기서만 안먹힌다고~
컴이 확실하게 바이러스에 걸려서 돌았다고 ~
확신에 찬 주장을 합니다.~
크크크 ~ ~

이런 일을 당한 분에게
니가 틀렸다고 조언하니~
당장 입에 거품을 물고 ~
니가 뭘 안다고 헛소릴 지껄이냐구 하면서~
나랑 싸울려고 하더라고요.~ ~ 휴우~
흐흐흐~

이런 것들이 있기 때문에~
이전 소스를 모르고~
또 앞으로 어떤 소스 코딩이 전개될 것인지 예측하지 못하는 가운데~
즉 전체를 파악하지 못한 가운데~
소스를 작성하는 것은
날씨에 따라 화면에 보여지는 결과가 달라지는
참으로 기이하고 요상스런 현상을 초래하기도 합니다.~

흐흐~ 모르니 기이하고 요상스러울 수 밖에요.~ ㅋ~
컴은 편법을 모르며 정직합니다.

충돌 현상은 전문가들도 심심찮게 겪는 현상입니다.~
그래서 전문가라면~
총돌을 회피하는 알고리즘을 개인적으로 개발하여 가지고 있답니다.~
흐흐흐~

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

<! (1번) >
<style> /* 댓글판 가로넓이 축소 (600 픽셀) */
.cclArea , .goTop {position:absolute; top: -50000px; }
.list_btn_area {border: none; }
.comment_scrap, .commentBox, .list_btn_area, .prenext_paging
{ position:relative; width:600px; left: 50%; margin-left: -300px; }
.list_btn_top {width: 99%; left:0px; margin-left: 0px; }
#daum-ad-root {height:0px; width: 0px;}
</style>

<! (2번) >
<style> /* 댓글판 가로넓이 축소 (800 픽셀) */
.cclArea , .goTop {position:absolute; top: -50000px; }
.list_btn_area {border: none; }
.comment_scrap, .commentBox, .list_btn_area, .prenext_paging
{ position:relative; width:800px; left: 50%; margin-left: -400px; }
.list_btn_top {width: 99%; left:0px; margin-left: 0px; }
#daum-ad-root {height:0px; width: 0px;}
</style>

1번 ~ 2번 중에 하나만 사용하셔야 합니다.~
====================================================================================================

<! (11번) >
<style> /* 검정색 댓글판 */
.commentDiv {     opacity:1; filter:alpha(opacity=100);     }
.commentBox { background-color: #000000; opacity:0.5; filter:alpha(opacity=50);     }
.longtail_comment     {    height: 220px;   }   .longtail_comment textarea {    height: 200px; }
.commentDiv, .comment_pos, .recomment_pos,   .longtail_comment { background-color: transparent ! important;   }
     .commentBox .id_admin, .commentBox .txt_btn   {   background-color:#ffffff;   }
     .commentBox .id_admin   {padding-top:2px; padding-bottom:2px; height: 15px; }
   .comment_pos { color: #ffffff;   } /* 댓글 색상 지정 */
   .recomment_pos { color: #ffff00; } /* 답댓글 색상 지정*/
   .longtail_comment textarea { color: #ffffff; } /* 입력댓글 색상 지정 */

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

<! (12번) >
<style> /* 흰색 댓글판 */
.commentDiv {     opacity:1; filter:alpha(opacity=100);     }
.commentBox { background-color: #ffffff;   opacity:0.6; filter:alpha(opacity=60);     }
.longtail_comment     {    height: 220px;   }   .longtail_comment textarea {    height: 200px; }
.commentDiv, .comment_pos, .recomment_pos,   .longtail_comment { background-color: transparent ! important;   }
     .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; } /* 입력댓글 색상 지정 */

<! (13번) >
<style> /* 푸른색 댓글판 */
.commentDiv {     opacity:1; filter:alpha(opacity=100);     }
.commentBox { background-color: #0000ff;   opacity:0.5; filter:alpha(opacity=50);     }
.longtail_comment     {    height: 220px;   }   .longtail_comment textarea {    height: 200px; }
.commentDiv, .comment_pos, .recomment_pos,   .longtail_comment { background-color: transparent ! important;   }
     .commentBox .id_admin, .commentBox .txt_btn   {   background-color:#ffffff;   }
     .commentBox .id_admin   {padding-top:2px; padding-bottom:2px; height: 15px; }
   .comment_pos { color: #ffffff; } /* 댓글 색상 지정 */
   .recomment_pos { color: #ffff00; } /* 답댓글 색상 지정*/
   .longtail_comment textarea { color: #ffffff; } /* 입력댓글 색상 지정 */

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

<! (14번) >
<style> /* 빨강색 댓글판 */
.commentDiv {     opacity:1; filter:alpha(opacity=100);     }
.commentBox { background-color: #ff0000; opacity:0.5; filter:alpha(opacity=50);     }
.longtail_comment     {    height: 220px;   }   .longtail_comment textarea {    height: 200px; }
.commentDiv, .comment_pos, .recomment_pos,   .longtail_comment { background-color: transparent ! important;   }
     .commentBox .id_admin, .commentBox .txt_btn   {   background-color:#ffffff;   }
     .commentBox .id_admin   {padding-top:2px; padding-bottom:2px; height: 15px; }
   .comment_pos { color: #ffffff; } /* 댓글 색상 지정 */
   .recomment_pos { color: #ffff00; } /* 답댓글 색상 지정*/
   .longtail_comment textarea { color: #ffffff; } /* 입력댓글 색상 지정 */

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

<! (15번) >
<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; } /* 입력댓글 색상 지정 */

<! (16번) >
<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; } /* 입력댓글 색상 지정 */

<! (17번) >
<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    {   opacity:0.6; filter:alpha(opacity=60);     }

/* 댓글판 배경이미지 */
     .commentBox      { background-image: url( https://t1.daumcdn.net/cfile/cafe/2117B948568F7EE005 );
      background-attachment: fixed;
      background-repeat: no-repeat;    background-position: center center; background-size:cover;   }

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

     .commentBox .id_admin, .commentBox .txt_btn   {   background-color:#ffffff;   }
     .commentBox .id_admin   {padding-top:2px; padding-bottom:2px; height: 15px; }
   .comment_pos { color: #ffffff;   } /* 댓글 색상 지정 */
   .recomment_pos { color: #ffff00; } /* 답댓글 색상 지정*/
   .longtail_comment textarea { color: #ffffff; } /* 입력댓글 색상 지정 */
</style>

위 11번 ~ 17번 중에 하나만 사용하셔야 합니다.~
=====================================================================================================

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

       #TITLEBACKGROUND   { background: linear-gradient( to    bottom,     #ff0000, #ffffff );   }
       #TITLEBACKGROUND    { opacity:0.5;   filter:alpha(opacity=50)
        progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ff0000 , EndColorStr=#ffffff ); }
</style>

(1번) 타이틀 가로 넓이 확장
#title { width: 100%; ; position:relative; left: 0%; margin-left: 0px; }

(2번) 타이틀 가로 넓이 축소 (500픽셀)
#title { width: 500px; position:relative; left:50%; margin-left: -250px; }

(3번) 타이틀 가로 넓이 축소 (700픽셀)
#title { width: 700px; position:relative; left:50%; margin-left: -350px; }

======> 1번 ~ 3번 중 하나만~

(21번) 타이틀 배경색 지우기
#TITLEBACKGROUND { background-color: transparent; }

   (22번) 타이틀 배경 빨강 그라데이션 (위에서 아래로)
       #TITLEBACKGROUND   { background: linear-gradient( to    bottom,     #ff0000, #ffffff );   }
       #TITLEBACKGROUND    { opacity:0.5;   filter:alpha(opacity=50)
        progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ff0000 , EndColorStr=#ffffff ); }

   (23번) 타이틀 배경 파랑 그라데이션 (위에서 아래로)
       #TITLEBACKGROUND   { background: linear-gradient( to    bottom,     #0000ff, #ffffff );   }
       #TITLEBACKGROUND    { opacity:0.5;   filter:alpha(opacity=50)
        progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#0000ff , EndColorStr=#ffffff ); }

   (24번) 타이틀 배경 빨강 그라데이션 (왼쪽에서 오른쪽으로)
       #TITLEBACKGROUND   { background: linear-gradient( to    right,      #ff0000, #ffffff );   }
       #TITLEBACKGROUND    { opacity:0.5;   filter:alpha(opacity=50)
        progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#ff0000 , EndColorStr=#ffffff ); }

   (25번) 타이틀 배경 파랑 그라데이션 (왼쪽에서 오른쪽으로)
       #TITLEBACKGROUND   { background: linear-gradient( to    right,      #0000ff, #ffffff );   }
       #TITLEBACKGROUND    { opacity:0.5;   filter:alpha(opacity=50)
        progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr=#0000ff , EndColorStr=#ffffff ); }

======> 21번 ~ 25번 중 하나만~
*/
</style>

/* 메인 배경 두번째 겹쳐깔기 */
    #wrap
    {background-image: url( https://t1.daumcdn.net/cfile/cafe/245BC33555D8652510 );
     background-attachment: fixed;
     background-repeat: repeat; background-position: center center; }
</style>

<! 본문 시작>

<! 글쓰기 시작 >
<div style="left: 0px; top: 0px; width: 100%; position: relative; z-index: -2000; border: 0px solid #000000; ">
<center>
<table style=" background-color:#000000; opacity:0.5; filter:alpha(opacity=50);    width:100%;     "   >
<! table   >
<! tbody>
<tr>
<td width=45% ></td>
<! td   style="background-color:#ffffff; opacity:0.5; filter:alpha(opacity=50); " align=left >
<td     align=left >
<PRE> <FONT style="FONT-SIZE: 13pt" color=#ffffff   face=휴먼편지체>

글 쓰는 곳~글 쓰는 곳~글 쓰는 곳~
글 쓰는 곳~
글 쓰는 곳~

글 쓰는 곳~
글 쓰는 곳~
글 쓰는 곳~

</font>
</pre>
</td>
<td width=45%></td>
</tr></tbody></table>

</center>
</div>


<p> </p>
<p> </p>

<! 음악>
<center>
<EMBED style="opacity:0.7; filter:alpha(opacity=70); WIDTH: 80px; HEIGHT: 70px" type=audio/x-ms-wma width=300 src=https://t1.daumcdn.net/blogfile/fs12/13_blog_2008_08_21_13_47_48acf37b48655?download"sameDomain" allowNetworking="internal" volume="0" loop="true" showstatusbar="1" autostart="true">
</CENTER>

<! 본문 끝 >

출처 :

http://cafe.daum.net/daum1000/1Z0X/17039

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

<! 소스는 두가지 패턴으로 제공해 드립니다. (------ 점선으로 구분해 놓았으니 이중으로 가지고 가지 마시길 바랍니다.)>

<! 1.다음(daum)의 일반적인 게시글 스타일 (메인소스) ♡에반쌤님 소스♡>

<! 아래 1.2.3.4번을 가져가시면 작성 하실수 있습니다. 드래그 하셔서 가지고 가세요~>

<!각자 개성에 맞게 원하시는 본문게시글 작성후 HTML 체크하시고 아래소스 1. 2. 3.4를 작성하신 본문게시글 (아래) 붙여넣기 하면 됩니다~ >

<! ★주의사항★ HTML 체크해제 하지 마시고 바로 확인을 눌러 게시글 작성을 마칩니다~ >

<STYLE 1. 남녀 전체배경 소스_primary>
body
{ background-image: url( https://t1.daumcdn.net/cfile/cafe/23695C48573971D50F?download);
background-attachment: fixed; background-color:#ffffff;
background-repeat: no-repeat ; background-position: center bottom; background-size: cover; }
</STYLE>

<! 2.장미꽃 날림 소스>
<style>
#wrap       {
      background-image: url( https://t1.daumcdn.net/cfile/cafe/255D713F57395B850E );
      background-attachment: fixed;     background-color: transparent;
      background-repeat: repeat;   background-position:   top center;   }
</style>

<! 4.배경 - 들판의 갈대 동영상 소스>
<div style="z-index: -2000; position: absolute; width: 100%; left: 0%; top: 0%; opacity:0.3; filter:alpha(opacity=30); ">
<! 동영상 1 >
<div   class='embed-container' >
<embed   type=application/x-shockwave-flash     src= https://www.youtube.com/v/GTwvhCnaJho?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 x-allowscriptaccess="sameDomain" x-allowscriptaccess="always" allowfullscreen="true" wmode="transparent"    x-allowscriptaccess='sameDomain'>
</div>
<! 동영상 2>
<div   class='embed-container' >
<embed   type=application/x-shockwave-flash     src= https://www.youtube.com/v/GTwvhCnaJho?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 x-allowscriptaccess="sameDomain" x-allowscriptaccess="always" allowfullscreen="true" wmode="transparent"    x-allowscriptaccess='sameDomain'>
</div>
</div>

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

<! 2.여기서 부터 다른 스타일 최신형 9.3버젼 ♡에반쌤님 소스♡ >

<! ★전체소스는 가져가는 방법 커서를 태그소스안 여백에 넣으시고 Ctrl A(모두선택) 또는 (오른쪽마우스 모두선택) → Ctrl C(복사) 또는 (오른쪽마우스 복사) 하시고 →원하시는 곳에 Ctrl V(붙여넣기) 또는 (오른쪽마우스 붙여넣기) 하시면 됩니다)>

<! 가지고 가셔서 붙여넣기 하면 위에 (메인소스)까지 같이 따라오는데 그건 드래그해서 삭제하고 사용하세요>

<! 1. 각자 개성에 맞게 원하는 본문 게시글을 작성합니다.>
<! 2. HTML 체크하시고 아래소스 전부를 작성하신 본문게시글 (위에) 붙여넣기 합니다.>

<! ★주의할점★ 반드시 작성하신 본문게시글(위에) 붙여넣기 해야 합니다. HTML 체크해제 하지마시고 바로 확인을 눌러서 게시글 작성을 마칩니다.>

<! 총전체소스 시작 아래전부↓>

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>

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

<! 전체배경 - 이미지 소스 >
<img style="z-index: -2000; position: absolute; width: 100%; height: 100%; left: 0%; top: 0%; " src= https://t1.daumcdn.net/cfile/cafe/23695C48573971D50F?download>

<! 배경 이미지 - 장미꽃 날림 소스>
<div class='e100-container' style="Z-INDEX: -2000; position:absolute; top: 0px; width:100%; background-image: url( https://t1.daumcdn.net/cfile/cafe/255D713F57395B850E); background-attachment: fixed; background-repeat: repeat; background-position: center center; " >
</div>

<! 배경 - 배경 빨강색 그라데이션위에서 아래로↓>

<! 배경 - 들판의 갈대 동영상 소스>
<div style="z-index: -2000; position: absolute; width: 100%; left: 0%; top: 0%; opacity:0.3; filter:alpha(opacity=30); ">

<! 동영상 1 >
<div class='embed-container' >
<embed type=application/x-shockwave-flash src= https://www.youtube.com/v/GTwvhCnaJho?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 x-allowscriptaccess="sameDomain" x-allowscriptaccess="always" allowfullscreen="true" wmode="transparent" x-allowscriptaccess='sameDomain'>
</div>

<! 동영상 2>
<div class='embed-container' >
<embed type=application/x-shockwave-flash src= https://www.youtube.com/v/GTwvhCnaJho?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 x-allowscriptaccess="sameDomain" x-allowscriptaccess="always" allowfullscreen="true" wmode="transparent" x-allowscriptaccess='sameDomain'>
</div>
</div>

<! 배경깔기 끝================================================================================>
<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: 80%; left: 10%; ">
<! 본문 영역 경계선 표시>
<TABLE width=100% border=0 style="border: 0px 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>

출처 : 그리움... 사랑

글쓴이 : 풍순이 원글보기

메모 :

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

태그 글씨체 종합 (0)	2017.12.03
[스크랩] 전체배경 강의 (8) (0)	2017.11.22
전체 배경 강의 (7) (0)	2017.11.22
전체배경 강의 (5) (0)	2017.11.22
전체 배경을 이용한 글 올리기 (0)	2017.11.22

현재글[스크랩] 댓글판 디자인 견본(강의)

그리움.. 사랑

Today :
Yesterday :

그리움.. 사랑