*자간조절*(글자와 글자 사이의 간격)

<table>
   <tr>
       <td style="letter-spacing:-2px"></td>
   </tr>


 


*자간조절*(띄어쓰기부분의 넓이 조절) ex)안녕하세요.

<table>
   <tr>
      <td style="word-spacing:-2px">안녕하세요. 불사신 조드 입니다.</td>
   </tr>

 

*행간조절*

(각 td의 넓이를 조절하여 행간을 조절하는게 아니라 한개의 td안에서 <br>을 이용했을때의 행간조절)

<table>
   <tr>
      <td style="line-height:15px">안녕하세요. <br>불사신 조드 입니다.</td>
   </tr>

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

다음과 같이 스타일을 지정해주고...

#opacity{background:url(../img/board/opacity.gif) no-repeat;filter:alpha(style=0, opacity=25, finishopacity=0);
border:1px solid #000000;}



버튼이 들어가는 td에 정의한 id 넣어주고, td안에 있는 테이블을 레이어로 감싸준다. 끝!!

<tr>
<td height="43" id="opacity">
<div style="position:relative;top:0;left;0">
<table cellspacing="0" cellpadding="0">
  <tr>
<td width="250"> </td>
<td width="60"><img src="../img/board/btn_modify.gif" width="45" height="18"></td>
<td width="60"><img src="../img/board/btn_del.gif" width="45" height="18"></td>
<td><img src="../img/board/btn_list.gif" width="45" height="18"></td>
  </tr>
</table>
</div>
</td>
</tr>

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

<style type="text/css">
<!--
#quick {
position:relative;
left:3px;
top:199px;
width:176px;
height:330px;
z-index:1;
}
-->
</style>



헤드부분에 위와 같이 스타일을 지정해주고(div안에 style로 지정해줘도 된다.)

아래와 같이 td안에 레이어를 넣어준다.

당신이 원하는 곳에 넣어라. 날아다니는 레이어라서 별 상관없었구려.

ablsolute(절대)안에 relative(상대)가 들어간 모습....



<td height="263" valign="top">
<div style="position:absolute;">
<div id="quick">
<? include"../inc/select_menu.html"; ?>
</div>
</div>
<img src="../img/main/main_img.gif" width="907" height="263">

</td>

저작자표시 비영리 변경금지
<html>
<head>
<title></title>
<style type="text/css">
    #center {
        position: absolute;
    }
    #slider {
        position: absolute;
        width: 600px;  /*메뉴 가로크기*/
        height: 300px; /*메뉴 세로크기*/
        left: 0px;
        top: 0px;
        overflow: hidden;
    }
    #slider .slide {
        position: absolute;
        top: 0px;
        height: 300px;
        width: 400px;
        background: #000;
        overflow: hidden;
        border-left: #000 solid 1px;
        cursor: default;
    }
    #slider .title   { /*서브메뉴제목*/
        color: #FFF;
        font-weight: bold;
        font-size: 13px;
        font-family:verdana;
        letter-spacing:-1px;

    }
    #slider .backgroundText {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 100%;
        background: #000;
        filter: alpha(opacity=40);
        opacity: 0.4;
    }
    #slider .text {
        position: absolute;
        top: 1%;
        top: 100%;
        color: #FFF;
        font-family: verdana;
        font-size: 11px;
        width: 250px;
        left: 10px;
    }
    #slider .diapo {
        position: absolute;
        filter: alpha(opacity=100);
        opacity: 1;
        visibility: hidden;
    }
</style>

<script type="text/javascript">
/* ==== slider nameSpace ==== */
var slider = function() {
    /* ==== private methods ==== */
    function getElementsByClass(object, tag, className) {
        var o = object.getElementsByTagName(tag);
        for ( var i = 0, n = o.length, ret = []; i < n; i++) {
            if (o[i].className == className) ret.push(o[i]);
        }
        if (ret.length == 1) ret = ret[0];
        return ret;
    }
    function setOpacity (obj,o) {
        if (obj.filters) obj.filters.alpha.opacity = Math.round(o);
        else obj.style.opacity = o / 100;
    }
    /* ==== Slider Constructor ==== */
    function Slider(oCont, speed, iW, iH, oP) {
        this.slides = [];
        this.over   = false;
        this.S      = this.S0 = speed;
        this.iW     = iW;
        this.iH     = iH;
        this.oP     = oP;
        this.oc     = document.getElementById(oCont);
        this.frm    = getElementsByClass(this.oc, 'div', 'slide');
        this.NF     = this.frm.length;
        this.resize();
        for (var i = 0; i < this.NF; i++) {
            this.slides[i] = new Slide(this, i);
        }
        this.oc.parent = this;
        this.view      = this.slides[0];
        this.Z         = this.mx;
        /* ==== on mouse out event ==== */
        this.oc.onmouseout = function () {
            this.parent.mouseout();
            return false;
        }
    }
    Slider.prototype = {
        /* ==== animation loop ==== */
        run : function () {
            this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5;
            this.view.calc();
            var i = this.NF;
            while (i--) this.slides[i].move();
        },
        /* ==== resize  ==== */
        resize : function () {
            this.wh = this.oc.clientWidth;
            this.ht = this.oc.clientHeight;
            this.wr = this.wh * this.iW;
            this.r  = this.ht / this.wr;
            this.mx = this.wh / this.NF;
            this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);
        },
        /* ==== rest  ==== */
        mouseout : function () {
            this.over      = false;
            setOpacity(this.view.img, this.oP);
        }
    }
    /* ==== Slide Constructor ==== */
    Slide = function (parent, N) {
        this.parent = parent;
        this.N      = N;
        this.x0     = this.x1 = N * parent.mx;
        this.v      = 0;
        this.loaded = false;
        this.cpt    = 0;
        this.start  = new Date();
        this.obj    = parent.frm[N];
        this.txt    = getElementsByClass(this.obj, 'div', 'text');
        this.img    = getElementsByClass(this.obj, 'img', 'diapo');
        this.bkg    = document.createElement('div');
        this.bkg.className = 'backgroundText';
        this.obj.insertBefore(this.bkg, this.txt);
        if (N == 0) this.obj.style.borderLeft = 'none';
        this.obj.style.left = Math.floor(this.x0) + 'px';
        setOpacity(this.img, parent.oP);
        /* ==== mouse events ==== */
        this.obj.parent = this;
        this.obj.onmouseover = function() {
            this.parent.over();
            return false;
        }
    }
    Slide.prototype = {
        /* ==== target positions ==== */
        calc : function() {
            var that = this.parent;
            // left slides
            for (var i = 0; i <= this.N; i++) {
                that.slides[i].x1 = i * that.Z;
            }
            // right slides
            for (var i = this.N + 1; i < that.NF; i++) {
                that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;
            }
        },
        /* ==== HTML animation : move slides ==== */
        move : function() {
            var that = this.parent;
            var s = (this.x1 - this.x0) / that.S;
            /* ==== lateral slide ==== */
            if (this.N && Math.abs(s) > .5) {
                this.obj.style.left = Math.floor(this.x0 += s) + 'px';
            }
            /* ==== vertical text ==== */
            var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0;
            if (Math.abs(v - this.v) > .5) {
                this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';
                this.v = v;
                this.cpt++;
            } else {
                if (!this.pro) {
                    /* ==== adjust speed ==== */
                    this.pro = true;
                    var tps = new Date() - this.start;
                    if(this.cpt > 1) {
                        that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0);
                    }
                }
            }
            if (!this.loaded) {
                if (this.img.complete) {
                    this.img.style.visibility = 'visible';
                    this.loaded = true;
                }
            }
        },
        /* ==== light ==== */
        over : function () {
            this.parent.resize();
            this.parent.over = true;
            setOpacity(this.parent.view.img, this.parent.oP);
            this.parent.view = this;
            this.start = new Date();
            this.cpt = 0;
            this.pro = false;
            this.calc();
            setOpacity(this.img, 100);
        }
    }
    /* ==== public method - script initialization ==== */
    return {
        init : function() {
            // create instances of sliders here
            // parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity
            this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 70);
            setInterval("slider.s1.run();", 16);
        }
    }
}();

</script>
</head>

<body onload="slider.init();">
<div id="center">
    <div id="slider">
        <div class="slide">
            <img class="diapo" src="http://www.blueb.co.kr/SRC/javascript/image8/m001.gif" alt="">
            <div class="text">
                  <span class="title">SUB MENU 1</span><br>
                    | smenu 1 | smenu2 | smenu3 | smenu4 |
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="http://www.blueb.co.kr/SRC/javascript/image8/m002.gif" alt="">
            <div class="text">
                  <span class="title">SUB MENU 2</span><br>
                    | smenu 1 | smenu2 | smenu3 | smenu4 |
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="http://www.blueb.co.kr/SRC/javascript/image8/m003.gif" alt="">
            <div class="text">
                  <span class="title">SUB MENU 3</span><br>
                    | smenu 1 | smenu2 | smenu3 | smenu4 |
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="http://www.blueb.co.kr/SRC/javascript/image8/m004.gif" alt="">
            <div class="text">
                  <span class="title">SUB MENU 4</span><br>
                    | smenu 1 | smenu2 | smenu3 | smenu4 |
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="http://www.blueb.co.kr/SRC/javascript/image8/m005.gif" alt="">
            <div class="text">
                  <span class="title">SUB MENU 5</span><br>
                    | smenu 1 | smenu2 | smenu3 | smenu4 |

            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="http://www.blueb.co.kr/SRC/javascript/image8/m006.gif" alt="">
            <div class="text">
                  <span class="title">SUB MENU 6</span><br>
                    | smenu 1 | smenu2 | smenu3 | smenu4 |
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="http://www.blueb.co.kr/SRC/javascript/image8/m007.gif" alt="">
            <div class="text">
                  <span class="title">SUB MENU 7</span><br>
                    | smenu 1 | smenu2 | smenu3 | smenu4 |
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="http://www.blueb.co.kr/SRC/javascript/image8/m008.gif" alt="">
            <div class="text">
                  <span class="title">SUB MENU 8</span><br>
                    | smenu 1 | smenu2 | smenu3 | smenu4 |
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="http://www.blueb.co.kr/SRC/javascript/image8/m009.gif" alt="">
            <div class="text">
                  <span class="title">SUB MENU 9</span><br>
                    | smenu 1 | smenu2 | smenu3 | smenu4 |
            </div>
        </div>

    
    </div>
</div>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 

저작자표시 비영리 변경금지
   <table style="border-width:2px;border-color:#72ac8b;border-style:solid">
         <tr>
            <td align=centr>테두리 스타일</td>
            <td align=center>solid (내부가 채워진 선 모양)</td>
         </tr>
      </table>
      <br><br>
      <table style="border-width:2px;border-color:#72ac8b;border-style:ridge">
         <tr>
            <td align=centr>테두리 스타일</td>
            <td align=center>ridge (선이 입체적으로 돌출)</td>
         </tr>
      </table>
      <br><br>
      <table style="border-width:2px;border-color:#72ac8b;border-style:dotted">
         <tr>
            <td align=centr>테두리 스타일</td>
            <td align=center>dotted (점선 모양으로 표시)</td>
         </tr>
      </table>
      <br><br>
      <table style="border-width:2px;border-color:#72ac8b;border-style:dashed">
         <tr>
            <td align=centr>테두리 스타일</td>
            <td align=center>dashed (끊어진 선 모양으로 표시)</td>
         </tr>
      </table>
      <br><br>
      <table style="border-width:2px;border-color:#72ac8b;border-style:double">
         <tr>
            <td align=centr>테두리 스타일</td>
            <td align=center>double (선을 두줄로 표시)</td>
         </tr>
      </table>
      <br><br>
      <table style="border-width:2px;border-color:#72ac8b;border-style:inset">
         <tr>
            <td align=centr>테두리 스타일</td>
            <td align=center>inset (안으로 들어간 듯한 테두리)</td>
         </tr>
      </table>
      <br><br>
      <table style="border-width:2px;border-color:#72ac8b;border-style:outset">
         <tr>
            <td align=centr>테두리 스타일</td>
            <td align=center>outset (밖으로 나온듯한 테두리)</td>
         </tr>
      </table>
      <br><br>
      <table style="border-width:2px;border-color:#72ac8b;border-style:groove">
         <tr>
            <td align=centr>테두리 스타일</td>
            <td align=center>groove (홈이 파인듯한 표시)</td>
         </tr>
      </table>
      <br><br>
      <table style="border-width:2px;border-color:#72ac8b;border-style:none">
         <tr>
            <td align=centr>테두리 스타일</td>
            <td align=center>none (나오지않거나 기본형)</td>
         </tr>
      </table>
      <br><br>
      <table style="border-width:2px;border-color:#72ac8b;border-style:hidden">
         <tr>
            <td align=centr>테두리 스타일</td>
            <td align=center>hidden (숨김)</td>
         </tr>
      </table>

 

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

테이블 스타일로 구현

<table style="border-collapse:collapse;" border=1 bordercolor=teal>
   <tr>
      <td>내용1입니다.</td>
      <td>내용2입니다.</td>
   </tr>
   <tr>
      <td>내용3입니다.</td>
      <td>내용4입니다.</td>
   </tr>
</table>

<br><br><br>

<!-- 테이블 셀간격을 이용한 구현 -->
<table bgcolor=red border=0 cellspacing=1>
   <tr bgcolor=white>
      <td>내용1입니다.</td>
      <td>내용2입니다.</td>
   </tr>
   <tr bgcolor=white>
      <td>내용3입니다.</td>
      <td>내용4입니다.</td>
   </tr>
</table>

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

Table인 경우는 아래와 같은 정보를 사용할 수 있습니다.
<table height="(세로)" width="(가로)" border="(선 두께)" cellspacing="(테이블 여백)" cellpadding="(테이블 여백)">

Td인 경우는 아래와 같은 정보를 사용할 수 있습니다.
<td height="(해당 칸 높이)" bgcolor="#CCCCFF(배경색)">

<STRONG>
글자를 <STRONG>굵고 진하게</STRONG> 나타낸다.
글자를 굵고 진하게 나타낸다.

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

<style>
<!--
       #postit{position:absolute;width:250;padding:5px;background-color:lightyellow;border:1px solid black;visibility:hidden;z-index:100;cursor:hand;}
-->
</style>

 


<body>

<div id="postit" style="left:150px;top:150px">
<div align="right"><b><a href="javascript:closeit()">[닫기]</a></b></div>

<b>포스트잇 스크립트</b><br>
<p>페이지를 열면 작은 공지창 처럼 뜨는 포스트잇 스크립트 입니다<br>
마우스로 원하는 위치에 끌어 놓을 수 있답니다</p>
<p>이 공지창은 브라우저를 열때마다 뜨게 할 수도 있고, 한번만 열리게 할 수도 있습니다</p>
</div>

<script>
var once_per_browser=0; //0은 브라우저 실행시마다 1은 딱 한번만

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ns4)
       crossobj=document.layers.postit;
else if (ie4||ns6)
       crossobj=ns6? document.getElementById("postit") : document.all.postit;

function closeit(){
       if (ie4||ns6)
               crossobj.style.visibility="hidden";
       else if (ns4)
               crossobj.visibility="hide";
}

function get_cookie(Name) {
       var search = Name + "=";
       var returnvalue = "";

       if (document.cookie.length > 0) {
               offset = document.cookie.indexOf(search);

               if (offset != -1) {  
                       offset += search.length;
                       end = document.cookie.indexOf(";", offset);

                       if (end == -1)
                               end = document.cookie.length;

                       returnvalue=unescape(document.cookie.substring(offset, end));
               }
       }

       return returnvalue;
}

function showornot(){
       if (get_cookie('postdisplay')==''){
               showit();
               document.cookie="postdisplay=yes";
       }
}

function showit(){
       if (ie4||ns6)
               crossobj.style.visibility="visible";
       else if (ns4)
               crossobj.visibility="show";
}

if (once_per_browser)
       showornot();
else
       showit();

</script>


<script language="JavaScript1.2">

function drag_drop(e){
       if (ie4&&dragapproved){
               crossobj.style.left=tempx+event.clientX-offsetx;
               crossobj.style.top=tempy+event.clientY-offsety;
               return false;
       }
       else if (ns6&&dragapproved){
               crossobj.style.left=tempx+e.clientX-offsetx;
               crossobj.style.top=tempy+e.clientY-offsety;
               return false;
       }
}

function initializedrag(e){
       if (ie4&&event.srcElement.id=="postit"||ns6&&e.target.id=="postit"){
               offsetx=ie4? event.clientX : e.clientX;
               offsety=ie4? event.clientY : e.clientY;

               tempx=parseInt(crossobj.style.left);
               tempy=parseInt(crossobj.style.top);

               dragapproved=true;
               document.onmousemove=drag_drop;
       }
}

document.onmousedown=initializedrag;
document.onmouseup=new Function("dragapproved=false");

</script>
</body>
</html>

 

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

문서 크기에 맞게 아이프레임 자동 조절

<head> </head> 안에 넣어주세요

<script>
   function initsize() {
                               self.resizeTo(document.body.scrollWidth, document.body.scrollHeight);
                             }
</script>

<body> 사이에 넣어주세요

<body bgcolor="#FFFFFF" onLoad="initsize();">

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

주소줄에 아이콘 넣기

[meta]
[link rel="SHORTCUT ICON" href="http://경로를적으세요/favicon.ico"]
[/meta]

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

+ Recent posts

티스토리툴바