스크롤 메뉴의 연혁

On/HtmlCss 2010.06.02 01:04

결국 메뉴는 스크롤 불가하다. 그동안 수많은 고민을 통해 습득된 정보는 소중한 바 남겨둔다. 내용은 검색해서 보면 될 터이다. 주요한 조망으로 감을 잊지말도록 한다. 백업화일은 스카이하드에 보관중이다.

스크롤 오프와 자율적 첫페이지

플러그인 표현식


왼바 테두리


막대바와 상호명 수정 등 - 스크롤 글색, 본문위 좌우귀퉁이 글색


자율적 첫페이지


태그 클라우드


스크롤 오프


vars


Header wizard


사이드바 좌우교대

posted by 大道

스크롤페이징 소스확보외 2건 - 지금적기? 우측여백!

On/HtmlCss 2010.05.29 09:52
  • 스크롤 - 우측정렬(여백? 마진활용)! 모니터별 문제없음
  • to do lists
    상단의 메일 참고하여 나도 향후대비 만들어둘 것 - 비치하면 다음에도 사용될 것임
    우단의 링크와 글보관함의 목록형 - 마찬가지 사유로 만들어 둘 것
    http://alan.keum.org 구글메일발송형
  • http://zoc.kr/732  링크목록형? 접혀있기에 다름아님 like note skin in tistory
  • http://zoc.kr/733  글보관목록형? 접혀있기에 다름아님 like note skin in tistory

파란부위만 교체했는데 잘 됨 - 파란교체해 그대로 집어넣기

<tr><td><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>
<div style="cursor:pointer" onclick="if(document.getElementById('head_menu').style.display=='none') {document.getElementById('head_menu').style.display='block';} else {document.getElementById('head_menu').style.display='none';}">
<h2>Head_menu</h2></div></td></tr>
<tr><td><div id="head_menu" style="display:none; position:relative;padding:5px 0px 5px 10px;">
<a href="[##_blog_link_##]">Blog</a>
<a href="[##_taglog_link_##]">Tag</a>
<a href="[##_localog_link_##]">Local</a>
<a href="[##_blog_link_##]media">Media</a>
<a href="[##_guestbook_link_##]">Guest</a>
<a href="[##_owner_url_##]">Login</a>
<a href="[##_rss_url_##]"><span style="color:red;">RSS</span></a></div></td></tr></table></td></tr>

posted by 大道

스크롤오프 - 스킨+스타일

On/HtmlCss 2010.05.29 00:31
  • <input id="fixed-scroll" type="checkbox" onclick="ToggleAnimate();">스크롤기능끄기^^^^^^^^^^^^^^^^^^^^^^이것만을 넣어주면 거의 된다? 스크립트 공식을 바꿔줌은 당근이므로^^ 다만 if문으로 모니터별 왼쪽여백을 주는데서 오류가 발생한 것은 숙제로 남게 된다.

    大道 2010.05.30 08:32
  • if (screen.width==1280) var stmnleft==213; else var stmnleft==85; (혹시 백업해둔다) 스크롤 글로 인하여 161모두 143으로 바뀐다 213-143-143-143-0-0

    大道 2010.05.30 08:44
  • 전체 프레임을 중간 아니라 왼쪽정렬하면 굳이 if를 안사용해도 될 것이다.

    大道 2010.05.30 09:48
  • 왼측에는 쳐박힌 느낌으로 안좋다. 스타일/레이아웃의 헤드와 바디에 float:left를 각각 삽입하니 되기는 한다. 거듭 느낌 안조아 계속 if유형 고민할 것이다.

    大道 2010.05.30 10:15
  • if오작동 교정후 이리하여, 스크롤끄기가 온전하게 완료됐다.
    [정]var stmnLEFT = 200
    if (screen.width==1280) {stmnLEFT = 200;} else {stmnLEFT = 85;}
    [오]if screen.width==1280) {var stmnleft=200;} else {var stmnleft=85;}

    大道 2010.05.30 11:06
스크롤오프/스킨


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />
<title>[##_title_##] :: [##_page_title_##]</title>
<script type="text/javascript">
 <!--
  var stmnLEFT = 500; // 왼쪽 여백 (메뉴가 왼쪽에서 400픽셀 떨어진 곳에 보여집니다)
  var stmnGAP1 = 0; // 위쪽 여백 (메뉴가 위에서 10픽셀 떨어진 곳에 보여집니다)
  var stmnGAP2 = 0; // 스크롤시 브라우저 위쪽과 떨어지는 거리
  var stmnBASE = -50; // 스크롤 시작위치
  var stmnActivateSpeed = 40;
  var stmnScrollSpeed = 100;

  var stmnTimer;

  function ReadCookie(name) {
   var cookies = document.cookie.split(";");
   for(var i=0; i<cookies.length; i++) {
    if(cookies[i].indexOf("=") == -1) {
     if(name == cookies[i])
      return "";
    }
    else {
     var crumb = cookies[i].split("=");
     if(name == crumb[0].trim())
      return unescape(crumb[1].trim());
    }
   }
  }
 
  function SaveCookie(name, value, days, domain) {
   var expires = "";
   var _domain = '';
   if(days) {
    var date = new Date();
    date.setTime(date.getTime() + (days * 86400000));
    expires = "; expires=" + date.toGMTString();
   }
   if(domain) {
    _domain = 'domain='+domain
   }
   document.cookie = name + "=" + value + expires + "; path=/;"+_domain;
  }
 
  function RefreshStaticMenu() {
   var stmnStartPoint, stmnEndPoint;
   
   stmnStartPoint = parseInt(document.getElementById('STATICMENU').style.top, 10);
   stmnEndPoint = Math.max(document.documentElement.scrollTop, document.body.scrollTop) + stmnGAP2;
   if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;
   
   if (stmnStartPoint != stmnEndPoint) {
    stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
    document.getElementById('STATICMENU').style.top = parseInt(document.getElementById('STATICMENU').style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount ) + 'px';
    stmnRefreshTimer = stmnScrollSpeed;
   }
   
   stmnTimer = setTimeout("RefreshStaticMenu();", stmnActivateSpeed);
  }

  function ToggleAnimate() {
   if (document.getElementById('fixed-scroll').checked) {
    clearTimeout(stmnTimer);
    document.getElementById('STATICMENU').style.top = stmnGAP1 + 'px';
    SaveCookie("fixed-scroll", "true", 300);
   } else {
    SaveCookie("fixed-scroll", "false", 300);
    RefreshStaticMenu();
   }
  }

  function InitializeStaticMenu() {
   document.getElementById('STATICMENU').style.left = stmnLEFT + 'px';
   
   if (ReadCookie("fixed-scroll") == "true") {
    document.getElementById('fixed-scroll').checked = true;
    document.getElementById('STATICMENU').style.top = document.body.scrollTop + stmnGAP1 + 'px';
   } else {
    document.getElementById('fixed-scroll').checked = false;
    document.getElementById('STATICMENU').style.top = document.body.scrollTop + stmnBASE + 'px';
    RefreshStaticMenu();
   }
  }
 //-->
</script>

</head>
<body onload="InitializeStaticMenu();">
<a id="top"></a>

<s_t3>
<div class="mainBox">
<div class="topBg"></div>
 <div id="STATICMENU" class="sidebarCenter">
  <img src="./images/bgHappy.gif" alt="" />
  <div class="toggle"><input id="fixed-scroll" type="checkbox" onclick="ToggleAnimate();" style="border:0; width:15px; height:15px;" /><label for="fixed-scroll"> 스크롤기능끄기</label></div>
  <div id="header">
  <div class="title">
   <h1><a href="[##_blog_link_##]">[##_title_##]</a></h1>
   <span class="desc">[##_desc_##]</span>
  </div>  
  <div class="blogMenu">
    <script type="text/javascript">
   AC_FL_RunContent(
    "classid","clsid:d27cdb6e-ae6d-11cf-96b8-444553540000",
    "codebase","http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0",
    "width" , "317",
    "height" , "62",
    "id" , "uploader",
    "wmode", "transparent",
    "movie", "./images/menu",
    "allowScriptAccess", "always",
    "flashvars", "externalData=[##_blog_link_##]&externalData2=[##_blog_link_##]media&externalData3=[##_localog_link_##]&externalData4=[##_taglog_link_##]&externalData5=[##_guestbook_link_##]"
   );
    </script>
    <ul>
     <li class="tab_home"><a href="[##_blog_link_##]">블로그홈</a></li>
     <li class="tab_localog"><a href="[##_localog_link_##]">지역로그</a></li>
     <li class="tab_taglog"><a href="[##_taglog_link_##]">태그</a></li>
     <li class="tab_taglog"><a href="[##_blog_link_##]media">미디어로그</a></li>
     <li class="tab_guestbook"><a href="[##_guestbook_link_##]">방명록</a></li>
    </ul>
    </div>
  <div class="bloginfo"><img src="[##_image_##]" alt="블로그 이미지" /></div>  
  </div><!-- header close -->
 
  <div class="sidebarBox">
  <s_sidebar>
  <!-- 사이드바 -->
   <s_sidebar_element>
   <!-- 공지사항 모듈 -->
    <s_rct_notice>
     <div class="notice">
      <ul>
       <s_rct_notice_rep>
        <li><a href="[##_notice_rep_link_##]">[##_notice_rep_title_##]</a> </li>
       </s_rct_notice_rep>
      </ul>
     </div>
    </s_rct_notice>
   </s_sidebar_element>

   <s_sidebar_element>
   <!-- 카테고리 모듈 -->  
    <div class="categoryList">
     <h3>카테고리</h3>
     [##_category_list_##]
    </div>
   </s_sidebar_element>

   <s_sidebar_element>
   <!-- 최근 댓글 모듈 -->
    <div class="recentComment">
     <h3>최근에 달린 댓글</h3>
     <ul id="recentComments">
      <s_rctrp_rep>
       <li><a href="[##_rctrp_rep_link_##]">[##_rctrp_rep_desc_##].</a></li>
      </s_rctrp_rep>
     </ul>
    </div>
   </s_sidebar_element>

   <s_sidebar_element>
   <!-- 최근 트랙백 모듈 -->
    <div class="recentTrackback">
     <h3>최근에 받은 트랙백</h3>
     <ul>
      <s_rcttb_rep>
       <li><a href="[##_rcttb_rep_link_##]">[##_rcttb_rep_desc_##].</a> </li>
      </s_rcttb_rep>
     </ul>
    </div>
   </s_sidebar_element>
   
  </s_sidebar>
  </div>
 
  <div class="counter">
   <h3>카운터</h3>
   <span class="total">Total : [##_count_total_##]</span>  /  <span>Today : [##_count_today_##]  /  Yesterday : [##_count_yesterday_##]</span>  </div>
  <div class="sidebarCenterBottom">
  <div class="search">      
  <s_search>
   <input type="text" name="[##_search_name_##]" value="[##_search_text_##]" onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"/>
   <input value="검색" type="button" onclick="[##_search_onclick_submit_##]" class="submit"/>
  </s_search>
  </div>
  <div class="banners">
  <a href="[##_rss_url_##]"><img src="./images/rss.gif" alt="get rss" class="rss"  /></a>
  <a href="http://www.tistory.com" onclick="window.open(this.href); return false"><img src="./images/tistoryLogo.gif" alt="tistory!" /></a><a href="http://www.tistory.com/join" onclick="window.open(this.href); return false"><img src="./images/tistoryLogo2.gif" alt="티스토리가입하기" /></a>
  </div>
 </div>
 </div><!-- sidebarCenter End -->
 
 <hr />

 <div class="contentTop">
 <div class="contentBottom">
   <div id="content">
        <s_list>
          <div class="searchList">
            <h3><span>'[##_list_conform_##]'에 해당되는 글 [##_list_count_##]건</span></h3>
            <ol>
              <s_list_rep>
                <li> <span class="date">[##_list_rep_regdate_##]</span> <a href="[##_list_rep_link_##]">[##_list_rep_title_##]</a> <span class="cnt">[##_list_rep_rp_cnt_##]</span> </li>
              </s_list_rep>
            </ol>
          </div>
        </s_list>
        <s_rplist>
          <div class="searchRplist">
            <h3><span>'[##_rplist_conform_##]'에 해당되는 댓글 [##_rplist_count_##]건</span></h3>
            <ol>
              <s_rplist_rep>
                <li> <span class="date">[##_rplist_rep_regdate_##]</span> <a href="[##_rplist_rep_link_##]">[##_rplist_rep_body_##]</a> <span class="cnt">[##_rplist_rep_rp_cnt_##]</span> <span class="name">[##_rplist_rep_name_##]</span> </li>
              </s_rplist_rep>
            </ol>
          </div>
        </s_rplist>
        <s_local>
          <div class="localog">
            <h3>위치로그</h3>
            <s_local_spot_rep>
              <div class="spot" style="margin-left: [##_local_spot_depth_##]px"> [##_local_spot_##] </div>
            </s_local_spot_rep>
            <s_local_info_rep>
              <div class="info" style="margin-left: [##_local_info_depth_##]px"> <a href="[##_local_info_link_##]">[##_local_info_title_##]</a> </div>
            </s_local_info_rep>
          </div>
        </s_local>
        <s_tag>
          <div class="taglog">
            <h3>태그</h3>
            <ul class="tagbox">
              <s_tag_rep>
                <li> <a href="[##_tag_link_##]" class="[##_tag_class_##]">[##_tag_name_##]</a> </li>
              </s_tag_rep>
            </ul>
          </div>
        </s_tag>
        <s_guest>
          <div class="guestbook">
            <h3>방명록</h3>
            <s_guest_input_form>
              <div class="commentWrite">
                <s_guest_member>
                  <s_guest_form>
                    <p>
                      <input type="text" name="[##_guest_input_name_##]" value="[##_guest_name_##]" class="name" />
                      <label for="name"> : 이름 </label>
                    </p>
                    <p>
                      <input type="password" maxlength="8" name="[##_guest_input_password_##]" class="pass" value="[##_guest_password_##]" />
                      <label for="password"> : 패스워드 </label>
                    </p>
                    <p>
                      <input type="text" name="[##_guest_input_homepage_##]" value="[##_guest_homepage_##]" class="home" />
                      <label for="homepage"> : 홈페이지 </label>
                    </p>
                  </s_guest_form>
                </s_guest_member>
                <p>
                  <textarea name="[##_guest_textarea_body_##]" cols="50" rows="6"> </textarea>
                </p>
                <p>
                  <input name="image" type="image" class="submit" onclick="[##_guest_onclick_submit_##]" value="안부 남기기" src="./images/btnConfirm.gif"  />
                </p>
              </div>
              <!-- guestWrite close -->
            </s_guest_input_form>
            <s_guest_container>
              <div class="guestList">
                <ol>
                  <s_guest_rep>
                    <li id="[##_guest_rep_id_##]">
                      <div class="[##_guest_rep_class_##]"> <span class="name">[##_guest_rep_name_##]</span> <span class="control"> <a href="#" onclick="[##_guest_rep_onclick_delete_##]" class="modify">&nbsp;<span>수정/삭제</span></a> <a href="#" onclick="[##_guest_rep_onclick_reply_##]" class="write">&nbsp;<span>댓글쓰기</span></a> </span>
                          <p>[##_guest_rep_desc_##]</p>
                        <span class="date"> [##_guest_rep_date_##]</span> </div>
                      <s_guest_reply_container>
                        <ul  class="reply">
                          <s_guest_reply_rep>
                            <li id="[##_guest_rep_id_##]">
                              <div class="[##_guest_rep_class_##]"> <span class="name">[##_guest_rep_name_##]</span> <span class="date"> [##_guest_rep_date_##]</span> <span class="control"> <a href="#" onclick="[##_guest_rep_onclick_delete_##]" class="modify">&nbsp;<span>수정/삭제</span></a> </span>
                                  <p>[##_guest_rep_desc_##]</p>
                              </div>
                            </li>
                          </s_guest_reply_rep>
                        </ul>
                      </s_guest_reply_container>
                    </li>
                  </s_guest_rep>
                </ol>
              </div>
              <!-- guestList close -->
            </s_guest_container>
          </div>
          <!-- guestbook close -->
        </s_guest>
        <s_notice_rep>
          <div class="entryNotice">
            <div class="titleWrap">
              <h2><a href="[##_notice_rep_link_##]">[##_notice_rep_title_##]</a></h2>
              <span class="category">공지사항</span>[##_notice_rep_date_##] </div>
            <div class="article"> [##_notice_rep_desc_##] </div>
          </div>
        </s_notice_rep>
      <s_article_protected>
        <div class="entryProtected">
          <div class="titleWrap">
            <h2><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>
            <span class="date">[##_article_rep_date_##]</span> </div>
          <div class="article">
            <p class="text">보호되어 있는 글입니다. <br  />
              내용을 보시려면 비밀번호를 입력하세요.<br  />
              <label for="[##_article_password_##]">비밀번호 ::</label>
              <input id="[##_article_password_##]" name="[##_article_password_##]" type="password" maxlength="16" onkeydown="if (event.keyCode == 13) [##_article_dissolve_##]"  />
              <input type="button" class="submit" value="확인" onclick="[##_article_dissolve_##]"  />
            </p>
          </div>
        </div>
      </s_article_protected>
        <s_article_rep>
          <div class="entry">
            <div class="titleWrap">
              <h2><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h2>
              <s_ad_div>
                <div class="admin"> <a href="[##_s_ad_m_link_##]">수정</a> : <a href="#" onclick="[##_s_ad_m_onclick_##]">수정(창으로)</a> |
                  ([##_s_ad_s1_label_##])→<a href="#" onclick="[##_s_ad_s2_onclick_##]">[##_s_ad_s2_label_##]</a> | <a href="#" onclick="[##_s_ad_t_onclick_##]">관련글(트랙백)</a> | <a href="#" onclick="[##_s_ad_d_onclick_##]">삭제</a> </div>
              </s_ad_div>
            </div>
            <!-- titleWrap close -->
            <div class="article"> [##_article_rep_desc_##] </div>
   <span class="category"><a href="[##_article_rep_category_link_##]">[##_article_rep_category_##]</a> </span> <span class="date">[##_article_rep_date_##]</span>
            <s_tag_label>
              <div class="tagTrail"> <span class="tagText">TAG </span> [##_tag_label_rep_##] </div>
            </s_tag_label>
            <div class="actionTrail"> <a href="#tb" onclick="[##_article_rep_tb_link_##]">
              <s_tb_count> Trackback <span class="cnt">([##_article_rep_tb_cnt_##])</span></s_tb_count>
              </a> : <a href="#rp" onclick="[##_article_rep_rp_link_##]">
              <s_rp_count> Comment <span class="cnt">([##_article_rep_rp_cnt_##])</span></s_rp_count>
            </a> </div>
            <s_tb>
              <div class="trackback">
                <h3>TRACKBACK :: [##_tb_address_##]</h3>
                <s_tb_container>
                  <ol>
                    <s_tb_rep>
                      <li id="[##_tb_rep_id_##]">
                        <h4>Subject: <a href="[##_tb_rep_url_##]" onclick="window.open(this.href); return false" rel="external nofollow">[##_tb_rep_title_##]</a></h4>
                        <span class="from">Tracked from <span class="name">[##_tb_rep_site_##]</span></span> <a href="#" onclick="[##_tb_rep_onclick_delete_##]; return false" class="delete">&nbsp;<span>삭제</span></a>
                        <p>[##_tb_rep_desc_##]</p>
                        <span class="date">[##_tb_rep_date_##]</span> </li>
                    </s_tb_rep>
                  </ol>
                </s_tb_container>
              </div>
              <!-- trackback close -->
            </s_tb>
            <s_rp>
              <div id="rp" class="comment">
                <h3>댓글을 달아 주세요 </h3>
                <div class="commentList">
                  <s_rp_container>
                    <ol>
                      <s_rp_rep>
                        <li id="[##_rp_rep_id_##]">
                          <div class="[##_rp_rep_class_##]"> <span class="name">[##_rp_rep_name_##]</span> <span class="control"> <a href="[##_rp_rep_link_##]" class="address">&nbsp;<span>댓글주소</span></a> <a href="#" onclick="[##_rp_rep_onclick_delete_##]" class="modify">&nbsp;<span>수정/삭제</span></a> <a href="#" onclick="[##_rp_rep_onclick_reply_##]" class="write">&nbsp;<span>댓글쓰기</span></a> </span>
                              <p>[##_rp_rep_desc_##]</p>
                            <span class="date"> [##_rp_rep_date_##]</span> </div>
                          <s_rp2_container>
                            <ul class="reply">
                              <s_rp2_rep>
                                <li id="[##_rp_rep_id_##]">
                                  <div class="[##_rp_rep_class_##]"> <span class="name">[##_rp_rep_name_##]</span> <span class="date"> [##_rp_rep_date_##]</span> <span class="control"> <a href="[##_rp_rep_link_##]" class="address">&nbsp;<span>댓글주소</span></a> <a href="#" onclick="[##_rp_rep_onclick_delete_##]" class="modify">&nbsp;<span>수정/삭제</span></a> </span>
                                      <p>[##_rp_rep_desc_##]</p>
                                  </div>
                                </li>
                              </s_rp2_rep>
                            </ul>
                          </s_rp2_container>
                        </li>
                      </s_rp_rep>
                    </ol>
                  </s_rp_container>
                </div>
                <!-- commentList close -->
                <s_rp_input_form>
                  <div class="commentWrite">
                    <s_rp_member>
                      <s_rp_guest>
                        <p>
                          <input type="text" name="[##_rp_input_name_##]" value="[##_guest_name_##]" class="name" onblur="this.style.border= '3px solid #e1e1e1'" onfocus="this.style.border= '3px solid #F09'" />
                          <label for="name"> : 이름 </label>
                        </p>
                        <p>
                          <input type="text" name="[##_rp_input_homepage_##]" value="[##_guest_homepage_##]" class="home" onblur="this.style.border= '3px solid #e1e1e1'" onfocus="this.style.border= '3px solid #F09'" />
                          <label for="homepage"> : 홈페이지 </label>
                        </p>
                        <p>
                          <input type="password" maxlength="8" name="[##_rp_input_password_##]" value="[##_rp_admin_check_##]" class="pass" onblur="this.style.border= '3px solid #e1e1e1'" onfocus="this.style.border= '3px solid #F09'" />
                          <label for="password"> : 패스워드 </label>
                        </p>
                        <p class="secretWrap">
                          <input type="checkbox" id="secret" name="[##_rp_input_is_secret_##]" class="checkbox" />
                          <label for="secret"> SECRET</label>
                        </p>
                      </s_rp_guest>
                    </s_rp_member>
                    <p>
                      <textarea name="[##_rp_input_comment_##]" rows="10" cols="50" class="comment" onblur="this.style.border= '3px solid #e1e1e1'" onfocus="this.style.border= '3px solid #F09'" ></textarea>
                    </p>
                    <p>
                      <input name="image" type="image" class="submit" onclick="[##_rp_onclick_submit_##]" value="댓글 달기" src="./images/btnConfirm.gif" />
                    </p>
                  </div>
                  <!-- commentWrite close -->
                </s_rp_input_form>
              </div>
              <!-- comment close -->
            </s_rp>
          </div>
          <!-- entry close -->
        </s_article_rep>
        <s_paging>
          <div id="paging">
            <s_paging_rep><a [##_paging_rep_link_##] class="number">[##_paging_rep_link_num_##]</a>&nbsp;</s_paging_rep>
          </div>
        </s_paging>
 
   
 <div id="footer">
  <div class="menu">
   <a href="[##_localog_link_##]">지역로그</a> :
   <a href="[##_taglog_link_##]">태그</a> :
   <a href="[##_blog_link_##]media">미디어로그</a> :
   <a href="[##_guestbook_link_##]">방명록</a> :
   <a href="[##_owner_url_##]">관리자</a> :
   <a href="[##_owner_url_##]/entry/post">글쓰기</a>  </div>
  <div class="copyright">
   <a href="[##_blog_link_##]"> [##_blogger_##]</a>'s Blog is powered by
   <a href="http://www.daum.net" onclick="window.open(this.href); return false">Daum</a> /
   Designed by <a href="http://www.tistory.com" onclick="window.open(this.href); return false">Tistory</a>  </div>
 </div>
 
      </div>
 </div>
 </div>
   
 <!-- content close -->

</div>
</s_t3>
</body>
</html>


 

스크롤오프/스타일


@charset "utf-8";
/* 반드시 들어가야 하는 스타일 시작 */

/* 본문 공통 */
body{
  font:0.75em/1.5 Dotum, Verdana, AppleGothic, Sans-serif;
  color:#666;
  background-image:url(images/bg.gif);
  
  background-repeat:repeat;
   background-color: #ddd;
}
a:link          { color:#333;     text-decoration:none;}
a:visited       { color:#333;     text-decoration:none;}
a:hover         { color:red;  text-decoration:underline;}
a:active        { color:red;     text-decoration:none;}

/* 페이징 - 현재 페이지 */
    .selected               { text-align:center;   font-weight:bold;  color:#f30;}
 .no-more                { color:#ccc;}

/* 카테고리 - 이미지 버튼 */
    .ib                     { cursor:pointer;}
/* 카테고리 - 트리 셀 */
    .branch3                { cursor:pointer;}
/* 카테고리 - 카테고리 옆 개수 스타일 */
    .c_cnt                  { font:0.75em Tahoma;  color:#f30;}

/* 달력 월 표시 */
    .cal_month              { font:0.9em Verdana;  height:18px; font-weight:bold; letter-spacing:normal;}
/* 달력 요일 표시(th 영역) */
    .cal_week1              { font:0.95em dotum;    font-weight:normal;}
/* 달력 일요일 표시(th 영역) */
    .cal_week2              { font:0.95em dotum;  color:#f30; }

/* 달력 Week(tr 영역)  */
    .cal_week               {  height:10px;}
    .cal_current_week       { background-color:#333;}
 
/* 달력 Day(td 영역) */
    .cal_day                { font:0.85em Verdana;  color:#999;  text-align:center;}
/* 달력 Day, 일요일 (td 영역)  */
    .cal_day_sunday         { color:#f30 !important;}
    .cal_day_sunday a        { color:#f30 !important;}
 
/* 달력 지난 달 날짜 표시(td)   */
    .cal_day1               { color:#ccc;}
/* 달력 다음 달 날짜 표시(td)   */
    .cal_day2               { color:#ccc;}
/* 달력 이번 달 날짜 표시(td) */
    .cal_day3               { color:#666;}
/* 달력 오늘 날짜 표시(td) */
    .cal_day4               { color:#9e9e9e;  font-weight:bold;}
/* 달력 글쓴 날 링크 스타일 */
    a.cal_click:link        { color:#898989;  font-weight:bold;}
    a.cal_click:visited     { color:#898989;  font-weight:bold;}
    a.cal_click:hover       { color:white;  font-weight:bold;}
 
/* 종류별 코멘트 [##_rp_rep_class_##] */
    .rp_general             { }
    .rp_admin               { }
    .rp_secret              { color:#f30;   font-weight:bold;}
/* 종류별 코멘트 [##_guest_rep_class_##] */
    .guest_general          { }
    .guest_admin            { }
/* 비밀 댓글 (로그아웃시 비밀글 표현)    */
    .hiddenComment { }
 
/* 이미지 아래 캡션 스타일 */
    .cap1                   { color:#999;  text-align:center;}
/* 그림 */
    .imageblock             {  padding:0;  margin:5px 0;}
/* 왼쪽 */
    .left                   { }
/* 가운데 */
    .center                 { }
/* 오른쪽 */
    .right                  { }
/* 그림 2개 배치 */
    .dual                   { background-color:#fff; margin-bottom:5px;}
/* 그림 3개 배치 */
    .triple                 { background-color:#fff; margin-bottom:5px;}
 
/* 본문 - more / less */
    .moreless_fold          { background:url(images/iconMore.gif) top left no-repeat;  padding-left:20px; color:#000;}
    .moreless_top           { background:url(images/iconLess.gif) top left no-repeat;  padding-left:20px; color:#000;}
    .moreless_body          { }
    .moreless_bottom        { background:url(images/iconLess.gif) top right no-repeat;  padding-right:20px; color:#999; text-align:right;}

/* 키워드 */
 .key1 { cursor: pointer; border-bottom: 1px dotted #ccc; }

/* 반드시 들어가야하는 스타일 끝 */

/* 공통영역 */
 * { margin: 0; padding: 0; }
hr              { display:none;}
img             { border:0;}
h1, h2, h3, h4, h5, h6  { margin:0;  padding:0;}
input           { border:1px solid #aaa;}
textarea        { border:1px solid #aaa;}
ol, ul, li { list-style:none;}

/* 블로그 레이아웃 */
body { background:url(images/bg.gif) top center; margin:0; padding:0;}

#content { width:400px; overflow:hidden; padding:60px 48px 0 58px;  min-height:500px; background:url(images/bg2.jpg) 7px 0 no-repeat;}
.contentTop {background:url(./images/bg.jpg) 30px 0 repeat-y; margin-top:-155px; margin-bottom:50px; }
.contentBottom { background:url(images/bg3.jpg) no-repeat; background-position:30px bottom; height:100%;}

.mainBox {background:url(./images/bg.gif) top center; width:948px; position:relative; margin:0 auto;}
.topBg {background:url(./images/bg2.jpg) 7px 0 no-repeat; height:155px; margin:0; z-index:30;}

/*   Header */
#header {  background:url(./images/titleBg.gif) top left no-repeat !important;
   
   height:126px; padding:33px 0 0 15px;
}
#header .title { position:absolute; margin:0 0 0 110px;}
#header .title span { padding:5px 0 0 0; display:block; font:1em dotum; letter-spacing:-1px;}
#header h1 {font:1.3em Verdana;  font-weight:bold;  letter-spacing:-1px;  }
#header h1 a { color:black; padding-bottom:2px; }
#header h1 a:hover { color:#ff0096;  text-decoration:none;}

#header .blogMenu  { width:317px; height:54px; position:absolute; margin:45px 0 0 110px;}
#header .blogMenu ul   { margin:0;  padding:0;  list-style:none; display:none;}
#header .blogMenu li   { display:inline;  background:url(images/bullBar.gif) no-repeat;  margin-left:3px;  padding-left:7px;}
#header .blogMenu li.tab_home { background:none;}
#header .blogMenu a { color:#eee;}
#header .blogMenu a:hover { color:#ff0096;}
#header .desc { display:block; height:15px; padding-top:2px; width:300px;}

#header .bloginfo { padding:0; overflow:hidden; width:100px; height:100px; border:1px solid #c7b9a1; }
#header .bloginfo img { width:92px; height:92px; border:4px solid white;}

.toggle  {text-align:right; margin:-20px 3px 0 0;}
.toggle label, toggle input { cursor:pointer;}

/* ***** content ***** */
#content  h2, #content  h3 { border-bottom:1px solid #ccc;  margin-bottom:3px; padding-bottom:1px;  color:#222; font:1.1em "굴림"; font-weight:bold;}
#content  h2 a, #content  h3 span {border-bottom:2px solid black; margin:0;  width:auto;}
#content  h2 a:hover { text-decoration:none;}

#content .titleWrap { margin:0 0 12px 0;}
#content .titleWrap .category a { font:0.9em dotum; color:#777;}
#content .titleWrap .date { font:0.8em tahoma; margin-left:5px; color:#aaa; letter-spacing:normal;}
#content .titleWrap .admin { border-bottom:1px solid #ccc; padding:5px 0; margin:2px 0; font:0.9em dotum; text-align:right; color:#666;}
#content .titleWrap .admin a{ color:#444; font:1em dotum;}

#content .entry { margin:10px 0 40px 0; color:#888;}
#content .entry h1, #content .entry h4, #content .entry h5, #content .entry  h6 { border-bottom:1px solid #ccc;  margin-bottom:3px; padding-bottom:1px;  color:#222; font:1.1em "굴림"; font-weight:bold;}

#content .article { letter-spacing:normal; width:400px; overflow:hidden; margin-bottom:15px;     font-family:굴림;}
#content .entry .tagTrail { margin:15px 5px 0 0; padding-left:32px; height:auto; background:url(images/entryTag.gif) top left no-repeat;  clear:both; letter-spacing:normal; font:1em dotum;}
#content .entry .tagTrail span { display:none; }
#content .entry .tagTrail a{ color:#aaa;}
#content .entry .actionTrail  { font:0.8em tahoma; letter-spacing:normal; color:#909090; padding: 6px 0 7px 0; border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; margin-top:15px;  clear:both;}
#content .entry .actionTrail a{color:#909090;}
#content .guestList {margin:10px 0 40px 0; color:#888;}

#content .article ol, #content .article ul {  margin:10px 0; padding:0 0 0 23px;}
#content .article ol li { list-style:decimal outside; margin:0; padding:0;}
#content .article ul li { list-style:circle outside; margin:0; padding:0;}
#content .article dt { font-weight:bold;}
#content .article dd { margin-left:10px;}
#content .article BLOCKQUOTE { margin:10px 0 10px 20px; padding-left:6px; border-left:3px solid #eee;}


/* 코멘트 */
.commentWrite { padding:8px 0;}
.commentWrite label { display:none;}
.commentWrite input, .commentWrite textarea { width:332px; border:3px solid #e1e1e1; margin:1px 0; padding-left:60px; padding-top:3px; color:#808080; font:1em gulim; height:15px;}
.commentWrite textarea  { height:70px; background:url(images/bgComment.gif) 0 0 no-repeat #ffffff; padding:22px 9px 9px 9px; width:374px;}
.commentWrite input.name { background:url(images/bgName.gif) 0 0 no-repeat;}
.commentWrite input.home { background:url(images/bgHome.gif) 0 0 no-repeat; font:0.8em tahoma;}
.commentWrite input.pass { background:url(images/bgPass.gif) 0 0 no-repeat; }
.commentWrite p { border:1px solid white;}
.commentWrite .submit { border:0; padding:0; margin:0; width:325px; height:28px; margin-top:4px;}
.comment .secretWrap .checkbox { border:0; padding:0; margin:0; position:absolute; width:20px; height:20px; margin:124px 0 0 328px;}
.comment .secretWrap label { font:0.8em tahoma; letter-spacing:normal; display:block; position:absolute;  margin:128px 0 0 348px; cursor:pointer;}


.comment {position:relative;}
.comment h3 { display:none;}
.commentList {background:#fcfcfc;}
.commentList li { margin-top:6px; border:1px solid #e6e6e6; background:url(images/commentBg.gif) 0 1px repeat-x #fcfcfc; width:377px; padding:10px 10px 8px 10px;}
.commentList li .date { font:0.8em tahoma; letter-spacing:normal; color:#ccc;}
.commentList li .name { float:left; font-weight:bold; margin-right:7px;  color:black;}
.commentList li .name img { vertical-align:middle;}
.commentList li p { clear:left; padding-top:4px; padding-bottom:3px; width:377px; overflow:hidden;}
.commentList li ul { margin:0; padding:0 !important;}
.commentList li ul li { width:353px;}
.commentList li ul li p { width:343px;}

.commentList li .control { float:right; margin-top:-5px; margin-right:-5px;}
.commentList li .control a { display:block; height:0; padding:9px 0 0 0; overflow:hidden; float:left; margin-top:4px; margin-right:3px;}
.commentList li .control .address { background:url(images/iconAdd.gif); width:23px; }
.commentList li .control .modify { background:url(images/iconModify.gif); width:24px;}
.commentList li .control .write { background:url(images/iconReply.gif); width:28px; }
.commentList .reply li .control  { margin-top:-22px;}

.trackback { border-bottom:1px dashed #ccc; padding-bottom:3px;}
.trackback h3 {margin-top:6px; border:1px solid #e6e6e6 !important; background:url(images/commentBg.gif) 0 1px repeat-x #fcfcfc;  padding:8px 10px !important; display:block; font:0.8em tahoma !important; color:#888 !important; letter-spacing:normal;}
.trackback h3 span { border:0 !important; font-weight:normal;}
.trackback li {margin:5px 0; border:1px solid #e6e6e6; background:url(images/commentBg.gif) 0 1px repeat-x #fcfcfc;  padding:10px 10px 8px 10px;}
.trackback li h4 { font:1em gulim; letter-spacing:normal; font-weight:bold; width:373px; overflow:hidden;}
.trackback li p {clear:left; padding-top:7px; margin-top:4px; padding-bottom:3px; font:0.9em dotum; border-top:1px dashed #ccc; width:373px; overflow:hidden;}
.trackback li .date { font:0.8em tahoma; letter-spacing:normal; color:#ccc;}
.trackback li .delete {  display:block; height:0; padding:9px 0 0 0; overflow:hidden; float:right; margin-top:-33px;  background:url(images/iconDelete.gif); width:22px;}

/* 공지 */
.entryNotice { margin-bottom:40px;}

/* 비밀글 */
.entryProtected { margin-bottom:50px;}
.entryProtected p.text   { background:url(images/imgProtected.gif) no-repeat ; padding-left:50px; margin-bottom:10px;}
.entryProtected input    { width:200px;}
.entryProtected .submit  { width:50px; padding-top:2px; height:20px; background-color:#ccc;}

/* 방명록 */
.guestbook {background:#fcfcfc;}
.guestbook li { margin-top:6px; border:1px solid #e6e6e6; background:url(images/commentBg.gif) 0 1px repeat-x #fcfcfc;  padding:10px 10px 8px 10px;}
.guestbook li .date { font:0.8em tahoma; letter-spacing:normal; color:#ccc;}
.guestbook li .name { float:left; font-weight:bold; margin-right:7px; float:left; color:black;}
.guestbook li .name img { vertical-align:middle;}
.guestbook li p { clear:left; padding-top:4px; padding-bottom:3px; width:377px; overflow:hidden;}
.guestbook li ul li p { width:353px;}

.guestbook .commentWrite { border-bottom:1px dashed #ccc;}
.guestbook li .control { float:right; margin-top:-5px; margin-right:-5px;}
.guestbook li .control a { display:block; height:0; padding:9px 0 0 0; overflow:hidden; float:left; margin-top:4px; margin-right:3px;}
.guestbook li .control .address { background:url(images/iconAdd.gif); width:23px; }
.guestbook li .control .modify { background:url(images/iconModify.gif); width:24px;}
.guestbook li .control .write { background:url(images/iconReply.gif); width:28px; }
.guestbook .reply li .control  { margin-top:-22px;}

/* 태그로그 */
.taglog .tagbox { padding:10px 0 30px 0;}
.taglog .tagbox .cloud1, .sidebarCenter .tagbox a.cloud1:visited{font-size:14px; color:#ff6600;}
.taglog .tagbox .cloud2, .sidebarCenter .tagbox a.cloud2:visited {font-size:13px; color:#ff9900;}
.taglog .tagbox .cloud3, .sidebarCenter .tagbox a.cloud3:visited {font-size:12px; color:#669900;}
.taglog .tagbox .cloud4, .sidebarCenter .tagbox a.cloud4:visited {font-size:12px; color:#0099CC;}
.taglog .tagbox .cloud5, .sidebarCenter .tagbox a.cloud5:visited {font-size:11px; color:#999;}
.taglog .tagbox li { display:inline; margin-right:5px;}
.taglog .tagbox a:hover { text-decoration:underline; }

/* 위치로그 */
.localog { padding-bottom:20px;}
.localog h3 { margin-bottom:20px !important;}
.localog .spot              { background:url(images/iconIndentArrow_local.gif) 5px 0 no-repeat;  padding-left:20px;  margin-top:5px;}
.localog .info              { background:url(images/iconIndentArrow_localinfo.gif) 5px 3px no-repeat;  padding-left:15px;  margin-top:2px;}
.localog a:link             { color:#ff6600;}
.localog a:visited          { color:#ff6600;}
.localog a:hover            { color:#ff6600;  text-decoration:underline;}

/* 검색 리스트 */
.searchList ol,
.searchRplist ol            { list-style:none;  padding:5px;  margin:0; margin-bottom:30px;}
.searchList li,
.searchRplist li            { border-bottom:1px solid #eee;  padding-bottom:2px;  margin-bottom:4px; letter-spacing:normal;}
.searchList .date,
.searchRplist .date         { font:0.8em tahoma;  margin-right:10px; }
.searchList .cnt            { font:0.75em Verdana, Helvetica, Arial, Gulim, sans-serif;  color:#f60;}
.searchRplist .name         { font:0.95em Dotum, Arial, sans-serif;    color:#999;  padding-left:8px;}

/* 페이징 */
#paging { text-align:center; font:9px Verdana; font-weight: bold; letter-spacing:normal; padding-bottom:30px;}
.number { margin:0px; padding:0px 2px 0px 3px; font:9px Verdana; font-weight: bold;}
a.number:link, a.number:visited  { background:#b7b7b7; color:#fff;}
a.number:hover {background:#f180ba; text-decoration:none;}

/* 사이드바 센터 */

.sidebarCenterBottom { padding:3px 0 5px 2px; border-top:2px solid #d6cbb7 !important;}
.sidebarCenter { padding:10px 0 0 5px;  font-size:0.9em;  position:absolute; left:500px; top:-50px; width:453px;}

.sidebarCenter a { color:#7e7e7e;}
.sidebarCenter a:hover { color:red;}
.sidebarCenter a:visited { color:#7e7e7e;}

.sidebarBox div { padding:4px 0 6px 0;  border-top:1px solid #d6cbb7;}
.sidebarCenter div ul{  clear:both; padding-left:109px; }

.sidebarCenter ol, .sidebarCenter ul { margin:0; padding:0;  list-style:none;}
.sidebarCenter li { display:inline; margin-right:5px;}
.sidebarCenter .recentTrackback ul li{ display:inline;}
.sidebarCenter .date, .sidebarCenter .cnt { font:0.8em tahoma; letter-spacing:normal;}

.sidebarCenter .notice { border-top:none !important;}
.sidebarCenter .notice li { padding-left:16px; margin-top:-1px; padding-top:1px; background:url(images/iconNotice2.gif) 0 0 no-repeat;}

.sidebarCenter .categoryList ul, .sidebarCenter .categoryList li { list-style:none; margin:0; padding:0; display:inline;}
.sidebarCenter .categoryList li {padding:0 0 0 13px; background:url(images/btn_category0.gif) 0 0 no-repeat;}
.sidebarCenter .categoryList li ul { padding:0; margin:0;}
.sidebarCenter .categoryList li ul li {padding:0 0 0 20px; background:url(images/btn_category2.gif) 7px 0 no-repeat;}
.sidebarCenter .categoryList li ul li ul {padding:0; margin:0;}
.sidebarCenter .categoryList li ul li ul li {padding:0 0 0 20px; background:url(images/btn_category.gif) 7px 0 no-repeat;}
.sidebarCenter .categoryList .c_cnt { font:0.7em tahoma; color:#cc6633; font-weight:normal; letter-spacing:normal;}

.sidebarCenter .tagbox { background:#3b3b3b; margin-top:-1px;}
.sidebarCenter .tagbox .cloud1, .sidebarCenter .tagbox a.cloud1:visited{font-size:14px; color:#ff6600;}
.sidebarCenter .tagbox .cloud2, .sidebarCenter .tagbox a.cloud2:visited {font-size:13px; color:#ff9900;}
.sidebarCenter .tagbox .cloud3, .sidebarCenter .tagbox a.cloud3:visited {font-size:12px; color:#669900;}
.sidebarCenter .tagbox .cloud4, .sidebarCenter .tagbox a.cloud4:visited {font-size:12px; color:#0099CC;}
.sidebarCenter .tagbox .cloud5, .sidebarCenter .tagbox a.cloud5:visited {font-size:11px; color:#999;}
.sidebarCenter .tagbox li { margin:0 3px -1px 0;}
.sidebarCenter .tagbox a:hover { text-decoration:underline; }

.sidebarCenter .counter { font:0.9em tahoma; letter-spacing:normal; clear:both; padding:4px 0 6px 0;  border-top:1px solid #d6cbb7;}
.sidebarCenter .counter .total {  background:url(images/barCounter.gif) center left no-repeat; color:#555; padding-left:109px;}

/* 사이드바 센터 타이틀 이미지 */
.sidebarCenter .notice ul { padding-left:100px; background:url(images/barNotice1.gif) center left no-repeat;}
.sidebarCenter .recentPost ul { background:url(images/barRecentPost1.gif) center left no-repeat; }
.sidebarCenter .recentComment ul { background:url(images/barRecentComments1.gif) center left no-repeat; }
.sidebarCenter .recentTrackback ul { background:url(images/barRecentTrackback1.gif) center left no-repeat; }
.sidebarCenter .tagbox ul {  background:url(images/barTagcloud1.gif) center left no-repeat; }
.sidebarCenter .archive ul { background:url(images/barArchive1.gif) center left no-repeat; }
.sidebarCenter .categoryList {background:url(images/barCategory1.gif) center left no-repeat; padding:0 0 0 100px; }

/* 사이드바 */
.sidebar { width:150px;  overflow:hidden; position:absolute; top:140px; line-height:normal; display:none;}
.sidebar.left { right:50%; margin-right:296px;}
.sidebar.right { left:50%; margin-left:297px;}

.sidebar div { margin-bottom:12px;}
.sidebar a { color:#aaa;}
.sidebar a:hover { color:white;}
.sidebar a:visited {color:#aaa;}

.sidebar .name { font:0.9em dotum;}
.sidebar .date, .sidebar .cnt{ font:0.8em tahoma;}
.sidebar .cnt { color:red; }
.sidebar .date { color:#aaa; margin-left:3px;}

.sidebar .category .c_cnt {  letter-spacing:normal;}

.sidebar .notice li { background:url(images/iconNotice.gif) 0 1px no-repeat; padding-left:37px;}
.sidebar .category div { margin:0; padding:0;}

.sidebar .tagbox { background:#3b3b3b; padding:5px;}
.sidebar .tagbox .cloud1, .sidebar .tagbox a.cloud1:visited{font-size:14px; color:#ff6600;}
.sidebar .tagbox .cloud2, .sidebar .tagbox a.cloud2:visited {font-size:13px; color:#ff9900;}
.sidebar .tagbox .cloud3, .sidebar .tagbox a.cloud3:visited {font-size:12px; color:#669900;}
.sidebar .tagbox .cloud4, .sidebar .tagbox a.cloud4:visited {font-size:12px; color:#0099CC;}
.sidebar .tagbox .cloud5, .sidebar .tagbox a.cloud5:visited {font-size:11px; color:#999;}
.sidebar .tagbox li { margin:0 3px -1px 0; display:inline;}
.sidebar .tagbox a:hover { text-decoration:underline; }

.sidebar h3 {display:block; line-height:25px; text-indent:-500px;}
.sidebar .category h3{background:url(./images/barCategory.gif) no-repeat; }
.sidebar .notice h3{background:url(./images/barNotice.gif) no-repeat; }
.sidebar .recentPost h3{background:url(./images/barRecentPost.gif) no-repeat; }
.sidebar .recentComment h3{background:url(./images/barRecentComment.gif) no-repeat; }
.sidebar .recentTrackback h3{background:url(./images/barRecentTrackback.gif) no-repeat; }
.sidebar .tagbox h3{ display:none; }
.sidebar .link h3{background:url(./images/barLink.gif) no-repeat; }
.sidebar .archive h3{background:url(./images/barArchive.gif) no-repeat; }
.sidebar .calendar h3{background:url(./images/barCalendar.gif) no-repeat; }

.sidebar .recentPost li,
.sidebar .recentComment li,
.sidebar .recentTrackback li,
.sidebar .archive li,
.sidebar .link li { padding-left:10px; background:url(images/sidebarBul.gif) 1px 3px no-repeat; padding-bottom:6px;}


/* 가려질애들. */
.sidebarCenter .name { display:none;}
.sidebarCenter h3 { display:none;}
.sidebarCenter .calendar { display:none;}
.sidebarCenter .link { display:none;}
.sidebar .categoryList { display:none;}

/* 하단 배너  */
.sidebarCenterBottom .search { position:absolute; }
.sidebarCenterBottom input {width:100px; border:3px solid #c5b59d; padding-left:40px; padding-top:3px; color:#626262; font:1em gulim; height:15px; background:url(images/bgSearch.gif); margin-top:3px;}
.sidebarCenterBottom .search .submit { display:none; }
.sidebarCenterBottom .banners { text-align:right; margin-top:-3px; padding-top:3px;}
.sidebarCenterBottom .banners .rss {float:left; margin:0 0 6px 291px; padding:7px 0;}

/* ***** footer ***** */
#footer {  text-align:center; border-top:1px solid #eee; margin-top:10px; padding:30px 10px 40px 10px;  font:11px dotum; letter-spacing:-1px; color:#666; }
#footer a { color:#666;}
#footer a:hover  { color:#333;}
#footer .copyright { margin-top:5px;}

posted by 大道

가치있는 미완성 - sidebottoms

On/HtmlCss 2010.05.28 12:31
  • 또한 정히 불편한 사람은 끄도록 기능 달아주면 좋겠다. 만사형통이다.

    大道 2010.05.28 12:46
  • 미완으로 두는건 좌측바에 왜 놓으면 안되나? 선입견을 벗어라. 범주가 날라다닐 때 배치모듈에 지장 안준다. 범주를 최상에 두면 제자리로 돌아와 그럭저럭 잘 덥는다. 다른 모듈 클릭에 별로 지장없다. - 요지는 다른 모듈 있다해도 날라다니는 한 범주의 뜻한 바가 지장 안받는다.

    大道 2010.05.28 12:47
  • 범주깔면 스크롤범주가 안펴지는 현상중이라 투명하게 해보고 다시 얘기하리다.

    大道 2010.05.28 12:56
  • 결론 - 꼭 필요한 모듈이라면 같이 끌고 다닌다.

    大道 2010.05.28 13:10
스킨화일


~~~~~~~</s_paging>

<!-- @@ sidebar Start @@ -->
    <div class="sidebarCenter">
<script type="text/javascript">
function allblur() {
  for (i = 0; i < document.links.length; i++) {
    var obj = document.links[i];
    if(obj.addEventListener) obj.addEventListener("focus", oneblur, false);
    else if(obj.attachEvent) obj.attachEvent("onfocus", oneblur);
  }
}
 
function oneblur(e) {
  var evt = e ? e : window.event;
  if(evt.target) evt.target.blur();
  else if(evt.srcElement) evt.srcElement.blur();
}
function clickshow(num){
 menu = document.getElementById("block"+num);
 if( menu != null && typeof menu != "undefined" )
  {
   if (menu.style.display=="block"){
   menu.style.display="none"; //닫고
  }
 else{
  menu.style.display="block";//하위메뉴를 펼친다.
  }
 }
}
</script>
     
      <!-- @@ sidebarCener Start @@ -->
      <div class="sidebarTop">
   <div class="sideTopimg"> <img src="./images/sidebarTop.gif" alt="" /></div>
        <s_sidebar_element>
          <!-- 공지사항 모듈 -->
          <s_rct_notice>
            <div class="notice">
              <ul>
                <s_rct_notice_rep>
                  <li><a href="[##_notice_rep_link_##]">[##_notice_rep_title_##]</a> </li>
                </s_rct_notice_rep>
              </ul>
            </div>
          </s_rct_notice>
        </s_sidebar_element>
      
       <s_sidebar>
          <!-- 사이드바 1 -->
          <s_sidebar_element>
            <!-- 태그모듈 -->
            <div class="tagLog">
              <h3>태그목록</h3>
              <div class="sidebox">
                <ul>
                  <s_random_tags>
                    <li><a href="[##_tag_link_##]" class="[##_tag_class_##]">[##_tag_name_##]</a></li>
                  </s_random_tags>
                </ul>
              </div>
            </div>
          </s_sidebar_element>
        </s_sidebar>
      </div>

<div class="sidebarOpen"> <img src="./images/sidebarMoreview.gif" alt="사이드바 열기" width="166" height="30"  style="cursor:pointer;"  onclick="clickshow(2)"   /> </div>
      <div id="block2" style="display:none;">
        <div class="sidebarMid">
          <s_sidebar>
            <!-- 사이드바 2 -->
       <s_sidebar_element>
              <!-- 링크모듈 -->
              <div class="link">
                <h3>링크</h3>
                <div class="sidebox">
                  <ul>
                    <s_link_rep>
                      <li><a href="[##_link_url_##]" onclick="window.open(this.href); return false"> [##_link_site_##].</a></li>
                    </s_link_rep>
                  </ul>
                </div>
              </div>
            </s_sidebar_element>
          </s_sidebar>

<div class="both"></div>
        </div>
        <div class="sidebarBottom">
          <s_sidebar>
            <!-- 사이드바 3 -->
            <s_sidebar_element>
              <!-- 최근댓글 모듈 -->
              <div class="recentComment">
                <h3>최근댓글</h3>
                <div class="sidebox">
                  <ul id="recentComments">
                    <s_rctrp_rep>
                      <li><a href="[##_rctrp_rep_link_##]">[##_rctrp_rep_desc_##].</a> <span class="info_wrap"> <span class="name">[##_rctrp_rep_name_##]</span> <span class="date">[##_rctrp_rep_time_##]</span> </span> </li>
                    </s_rctrp_rep>
                  </ul>
                </div>
              </div>
            </s_sidebar_element>
           </s_sidebar>
          <div class="both"></div>
        </div>
      </div>
 <!-- @@ sidebarCenter End @@ -->
    </div>
    <hr />
   
<div id="footer">~~~~~~~

스타일 화일


 /*내가 넣는 사이드3바 스타일***********************/

.sidebarCenter .sidebarTop { margin: 0 13px;}
.sidebarTop .sidebox {padding-bottom:5px;}
.sidebarTop .category,
.sidebarTop .bloginfo,
.sidebarTop .calendar {display:none;}
.sidebarTop ul {list-style:none; text-align:justify;}
.sidebarTop li {display:inline; padding-right:8px;}
.sidebarTop li a {font:12px Dotum,Tahoma,Arial; color:#726257; letter-spacing:0;}
.sidebarTop li a:visited {color:#726257;}
.sidebarTop li a:hover {color:#000; text-decoration:none;}
.sidebarTop h3,
.sidebarMid h3,
.sidebarBottom h3  {padding-top:20px; height:0; overflow:hidden; margin-bottom:8px; margin-top:5px;}
.sidebarTop .recentComment   h3,
.sidebarMid .recentComment   h3,
.sidebarBottom .recentComment h3 { background:url(images/sidebottom_comment.gif) no-repeat top left;}
.sidebarTop .link h3,
.sidebarMid .link h3,
.sidebarBottom .link h3 { background:url(images/sidebottom_link.gif) no-repeat top left;}
.sidebarTop .tagLog  h3 {display:none;}
.sidebarMid .tagLog  h3,
.sidebarBottom .tagLog h3 { background:url(images/sidebottom_tag.gif) no-repeat top left;}
.sidebarTop .categoryList ul,
.sidebarTop .categoryList li {list-style:none; margin:0; padding:0; display:inline;}
.sidebarTop .categoryList li {padding:0;}
.sidebarTop .categoryList li ul {padding:0; margin:0;}
.sidebarTop .categoryList li ul li { padding-left:10px;}
.sidebarTop .categoryList li ul li ul {padding:0; margin:0;}
.sidebarTop .categoryList li ul li ul li { padding-left:10px;}
.sidebarCenter .sideTopimg {position:absolute; margin:-70px 0 0 -23px;}

/* 사이드바 컨텐츠 */
.sidebarMid .bloginfo,
.sidebarBottom .bloginfo,
.sidebarMid .recentPost,
.sidebarBottom .recentPost,
.sidebarMid .archive,
.sidebarBottom .archive,
.sidebarMid .recentTrackback,
.sidebarBottom .recentTrackback,
.sidebarMid .recentComment,
.sidebarBottom .recentComment,
.sidebarMid .tagLog,
.sidebarBottom .tagLog,
.sidebarMid .link,
.sidebarBottom .link,
.sidebarMid .counter,
.sidebarBottom .counter,
.sidebarMid .calender,
.sidebarBottom .calender,
.sidebarMid .category,
.sidebarBottom .category{ width:157px !important; overflow:hidden; padding:0; margin:0 5px 0 5px; float:left;}
.sidebarBottom .recentTrackback .info_wrap,
.sidebarBottom .recentComment .info_wrap  {  margin-bottom:3px; color:#000; display:inline;}

/* 사이드바 타이틀 */
.sidebarTop h3,
.sidebarMid h3,
.sidebarBottom h3  {padding-top:20px; height:0; overflow:hidden; margin-bottom:8px; margin-top:5px;}
.sidebarTop .categoryInner   h3,
.sidebarMid .category  h3,
.sidebarBottom .category  h3 { background:url(images/sidebottom_category.gif) no-repeat top left;}
.sidebarTop .recentPost  h3,
.sidebarMid .recentPost  h3,
.sidebarBottom .recentPost  h3 { background:url(images/sidebottom_entries.gif) no-repeat top left;}
.sidebarTop .recentComment   h3,
.sidebarMid .recentComment   h3,
.sidebarBottom .recentComment h3 { background:url(images/sidebottom_comment.gif) no-repeat top left;}
.sidebarTop .recentTrackback  h3,
.sidebarMid .recentTrackback  h3,
.sidebarBottom .recentTrackback  h3 { background:url(images/sidebottom_trackback.gif) no-repeat top left;}
.sidebarTop .archive h3,
.sidebarMid .archive h3,
.sidebarBottom .archive h3 { background:url(images/sidebottom_archive.gif) no-repeat top left;}
.sidebarTop .link h3,
.sidebarMid .link h3,
.sidebarBottom .link h3 { background:url(images/sidebottom_link.gif) no-repeat top left;}
.sidebarTop .tagLog  h3 {display:none;}
.sidebarMid .tagLog  h3,
.sidebarBottom .tagLog h3 { background:url(images/sidebottom_tag.gif) no-repeat top left;}
.sidebarMid .calender  h3,
.sidebarBottom .calender  h3 { background:url(images/sidebottom_calendar.gif) no-repeat top left;}

/* 사이드바-공지사항 */
.sidebarCenter .notice { padding-bottom:10px;}
.sidebarCenter .notice li            { display:inline; background:none;}
.sidebarCenter .notice a:link,
.sidebarCenter .notice a:visited     { color:#534640; background:url(images/iconNotice.gif) 0 0 no-repeat; padding:0 0 0 38px;}
.sidebarCenter .notice a:hover       { color:#000; background:url(images/iconNotice_on.gif) 0 0 no-repeat;  padding:0 0 0 38px; text-decoration:none;}

/* 사이드바 태그로그 */
.sidebarCenter .tagLog ul                  { margin:0; text-align:justify;}
.sidebarCenter .tagLog li                  { display:inline; padding:0; background:none;}
.sidebarCenter .tagLog a                   { letter-spacing:-1px;}
.sidebarCenter .tagLog a:hover             { color:#000; text-decoration:none; background-color:#DECCB1;}
.sidebarCenter .tagLog li  .cloud1          { font-weight:bold;  font-size:12px;  color:#ED1B23;}
.sidebarCenter .tagLog li a.cloud1:visited  { color:#ED1B23;}
.sidebarCenter .tagLog li  .cloud2          { font-weight:bold;  font-size:12px;  color:#64A60B;}
.sidebarCenter .tagLog li a.cloud2:visited  { color:#64A60B;}
.sidebarCenter .tagLog li  .cloud3          { font-weight:bold;  font-size:12px;  color:#2E3092;}
.sidebarCenter .tagLog li a.cloud3:visited  { color:#2E3092;}
.sidebarCenter .tagLog li  .cloud4          { font-size:12px;  color:#666; font-weight:bold;}
.sidebarCenter .tagLog li a.cloud4:visited  { color:#666;}
.sidebarCenter .tagLog li  .cloud5          { font-size:12px;  color:#726257;}
.sidebarCenter .tagLog li a.cloud5:visited  { color:#726257;}

.sidebarTop .sidebox {padding-bottom:5px;}
.sidebarOpen {clear:both; text-align:center; margin:5px 0;}

.sidebarMid  ul,
.sidebarBottom  ul {padding:0;  margin:0;  list-style:none;}
.sidebarMid  li,
.sidebarBottom  li {background:url(images/bul.gif) 0 2px no-repeat;  padding-left:7px;}
.sidebarMid  li a,
.sidebarBottom  li a {color:#352E2C;}
.sidebarMid  li a:visited,
.sidebarBottom  li a:visited {color:#352E2C;}
.sidebarMid  li a:hover,
.sidebarBottom  li a:hover {color:#000; text-decoration:underline;}

.sidebarCenter   { width:680px; background:url("images/sidebarBgimg.gif");  padding:5px 10px 10px 10px; margin-top:90px;}
.sidebarCenter .sidebarTop { margin: 0 13px;}
.sidebarCenter .sidebarMid,
.sidebarCenter .sidebarBottom {clear:both; margin:10px 0 0 0; background:none;}
.sidebarCenter .both {clear:both;}
.sidebarCenter .name {color:#988675}
.sidebarCenter .cnt {color:#F06161;}
.sidebarCenter .categoryList .c_cnt { font:0.8em Tahoma #F06161 !important; font-weight:normal; letter-spacing:normal;}
.sidebarCenter .name {color:#988675}
.sidebarCenter .date {color:#988675}
.sidebarCenter .notice { padding-bottom:10px;}
.sidebarCenter .notice li            { display:inline; background:none;}
.sidebarCenter .notice a:link,
.sidebarCenter .notice a:visited     { color:#534640; background:url(images/iconNotice.gif) 0 0 no-repeat; padding:0 0 0 38px;}
.sidebarCenter .notice a:hover       { color:#000; background:url(images/iconNotice_on.gif) 0 0 no-repeat;  padding:0 0 0 38px; text-decoration:none;}
.sidebarCenter .date {color:#988675}

posted by 大道

vars - 모니터모두 스크롤메뉴 좌측여백 맞춤

On/HtmlCss 2010.05.26 16:46

■ IF문
* else if 는 필요한 경우 계속 추가를...
* else 는 위의 모든 조건을 만족하지 않을 경우

if(조건) {
명령문
}if(조건) {
명령문1
}
else {
명령문2
}
if(조건1) {
명령문1
}
else if(조건2) {
명령문2
}

if(조건1) {
명령문1
}
else if(조건2) {
명령문2
}
else {
명령문3
}

<script language="javascript">
inta=10
if(inta==10) {
document.write("10 이네요")
}
</script>

<script language="javascript">
inta=100
if(inta==10) {
document.write("10 이네요")
}
else {
document.write("10 이 아니군")
}
</script>


<script language="javascript">
inta=100
if(inta==10) {
document.write("10 이네요")
}
else if(inta==100){
document.write("100 이네요")
}
</script>

<script language="javascript">
inta=200
if(inta==10) {
document.write("10 이네요")
}
else if(inta==100){
document.write("100 이네요")
}
else{
document.write("10도 아니고 100도 아니네")
}
</script>

posted by 大道