이야기 마을

DIV의 position style 을 보면

static
relative
absolute
fixed
inherit

이렇게 있다... 설명하자면...


static
CSS로 특별한 값을 지정해 주지 않아도 적용되는 기본값이다.
HTML 파일에서 중첩되지 않은 여러개의 div를 작성하면, 위에서 부터 차곡 차곡 쌓이는 기본적인 형태이다.
 
relative
한개의 div가 있고 relative로 설정할 경우엔 static과 큰 차이는 없다. 하위에 div가 있을 경우엔 하위의 div를 absolute 배열 할 수 있다.
 
absolute
흔히 레이어라는 개념으로 알고 있는 값이다. div에 top, right, bottom, left 값을 지정해서 원하는 위치에 고정되게 띄울 수 있다.
 
fixed
기본적으로 absolute와 같다. absolute는 canvas의 스크롤에 따라 올라가고 내려가지만 fixed의 경우는 스크롤에 상관없이 지정한 위치에 고정된다.
 
inherit
상위에서 지정한 값을 상속한다.



라고 한다.....뭐 여기서 젤 많이 쓰이는게
absolute와 relative 정도 인데...두가지 차이만 잘 이용하면 편할때가 간혹 생긴다.




이 두가지 속성의 차이를 보자면....

absolute 의 경우
말 그대로 절대적인 위치값이다... 브라우저를 띄우고 보았을때 브라우저에서 젤 좌측상단이 top 0, left 0이 되는것이다.
div태그를 이용해서 포지션 속성을 이 absolute 로 해놓고 top과 left를 0 으로 지정해놓으면 이 div태그를 html 소스의 어느곳에 위치시키던지 항상 젤 상단의 좌측에 나타나게 된다는 것이다. r u okay?


relative 의 경우
이 것은  absolute 와는 다르게 상대적인 위치값이다...뭐 말이야 이렇게 된다고 해도 직접 보지 않으면 잘 이해가 안된다.
div태그를 이용해서 포지션 속성을 relative 로 해놓고 top과 left를 0으로 지정해보자 테이블도 몇개 있고 이미지도 몇개 있는 소스에서 이 div태그를 여기저기에 옮겨보며 확인 해보자 다른 태그같이 그 위치로 이동한다.
테이블 두개가 있을 경우 그 사이에 이 태그를 집어넣으면 top과 left 0 이라도 테이블 두개의 사이에 위치한다
그뒤에 top 과 left의 값을 변경해보자~
그럼 그 기본 위치에서부터 입력한 값만큼 이동될것이다


이런 차이가 있다....-0-;;;


예전에 필요해서 찾아 썼다가 쓸일 없다고 잊고있었는데.....
다시 쓰려고 보니 까먺었다가 찾아보고나서 사용하게 되었다....잊어먹는 습관....-0-;;;;
역시 적어놓는게 좋다....

음......귀찮은 작업? 뭐 보면 알겠지만...

간단한 기본 레이아웃 페이지 설정을 해주면
자동으로 스타일과 레이어를 이용해 원하는 레이아웃을 받을수 있다....뭐 직접 보면..-0-;;;;



http://www.inknoise.com/experimental/layoutomatic.php

이 글은 다른분이 올리신 방법을 약간 수정 했습니다.

아이프레임 사용시 문서크기를 자동으로 조절하려면 아래 소스를 아이프레임 내의 제일 하단에 넣어 주세요.
<script>        
       document.body.scrollIntoView(true);        
       parent.document.all.inner1.height = document.body.scrollHeight;
</script>

그리고 아이프레임 소스를 아래와 같이 만들어 주세요.



<iframe id=inner1 src='test.htm' width=600 height=0 frameborder=0 scrolling=no marginwidth=0 marginheight=0 leftmargin=0 topmargin=0></iframe>



문서의 크기에 맞게 조절하기 위해서 iFrame으로 호출될 문서에 스크립트를 썼습니다.
문서가 다 읽히면 그 문서의 길이를 구해 다시 iFrame 의 높이를 조절하는 겁니다.
폭은 width=600 의 값을 조절해 주시면 되겠죠?
document.body.scrollIntoView(true); 현 문서의 맨 마지막으로 이동을 명령합니다. (faile) 라고 해주면 맨 아래로 갑니다.

parent.document.all.inner1.height = document.body.scrollHeight;

inner1 은 iframe 의 id 또는 name 값입니다.
iframe 의 입장에서는 자신을 포함하고 있는 문서가 부모(parent) 가 됩니다.
해석을 하면 부모.문서.모든것중.inner1.높이 에 현재 내 문서(iframe안의 문서)의 스크롤까지 포함한 높이로 바꿔줘라..입니다.

만약 아이프레임 내부에 게시판이 들어간다면 관리자 모드 게시판 환경설정에서 "게시판 하단에 출력할 내용"의 </div>앞에   <script>         document.body.scrollIntoView(true);         parent.document.all.inner1.height = document.body.scrollHeight; </script> 를 넣으시면 됩니다.

또 아이프레임 상태에서 최근게시물을 표시하면 일반적으로 새창으로 게시판만 덜렁뜨는데 이것은 새로운 문서 한장을 만들고 그곳에 최근게시물을 만들어 주시고 링크를 거시면 됩니다.
최근게시물 상단에는 기본 제로 경로 설정이 되어있어야합니다.

또한 링크 타겟을 주시면 완벽하게 두장의 html문서 만으로 홈페이지가 완성됩니다.

음악을 링크 걸 경우에도 초기 페이지가 변경이 안되니 음악이 끊길 염려가 없겠지요?

기존의 노프레임이나 프레임을 나눠 불편한것을 해소시킬수 있을것입니다.

음...어디서 주서온건지......음...네이버던가....-0-;;;;;;;
할튼 뭐 스무스 스크롤이라 해야하나??
네이버 딱 보면 인기검색어 올라가는거 같이 되는 스크롤....음...네이번가 보다...-0-;;;;


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





//서브 화면 이벤트에서 사용 여러항목 순차적 스크롤 smooth scroll? marquee scroll?
function smScroll(layername) {
    this.name = "smScroll";
    this.divId = layername;
    this.item = new Array();
    this.itemcount = 0;
    this.currentspeed = 0;
    this.scrollspeed = 50;
    this.pausedelay = 1000;
    this.pausemouseover = false;
    this.stop = false;
    this.height = 100;
    this.width = 100;
    this.stopHeight=0;
    this.i=0;
    this.reloadData = 0;

    this.add = function () {
        var text = arguments[0];
        this.item[this.itemcount] = text;
        this.itemcount = this.itemcount + 1;
    };

    this.start = function () {
        if ( this.itemcount == 1 ) {
            this.add(this.item[0]);
        }
        this.display();
        this.currentspeed = this.scrollspeed;
        this.stop = true;
        setTimeout(this.name+'.scroll()',this.currentspeed);
        window.setTimeout(this.name+".stop = false", this.pausedelay);
    };
   
    this.display = function () {
        var htmlCode;
        htmlCode = '<div id="'+this.name+'" style="height:'+this.height+'; width:'+this.width+'; position:relative; overflow:hidden; " OnMouseOver="'+this.name+'.onmouseover(); " OnMouseOut="'+this.name+'.onmouseout(); ">';
        for(var i = 0; i < this.itemcount; i++) {
            htmlCode += '<div id="'+this.name+'item'+i+'"style="left:0px; width:'+this.width+'; position:absolute; top:'+(this.height*i)+'px; ">';
            htmlCode += this.item[i];
            htmlCode += '</div>';
        }
        htmlCode += '</div>';

        document.getElementById(this.divId).innerHTML=htmlCode;  
    };
   
    this.scroll = function () {
        if ( this.pause == true ) {
            window.setTimeout(this.name+".scroll()",this.pausedelay);
            this.pause = false;
        } else {
            this.currentspeed = this.scrollspeed;
            if ( !this.stop ) {
                for (var i = 0; i < this.itemcount; i++) {
                    obj = document.getElementById(this.name+'item'+i).style;
                    obj.top = parseInt(obj.top) - 1;
                    if ( parseInt(obj.top) <= this.height * (-1) ) obj.top = this.height * (this.itemcount-1);
                    if ( parseInt(obj.top) == 0 ) {
                        this.currentspeed = this.pausedelay;
                        this.i = i;
                    }
                }
            }
            if( !this.stop && i == this.itemcount && parseInt(obj.top) == 0 && this.reloadData == 1 ) {
                this.reloadData = 0;
            }
            else {
                window.setTimeout(this.name+".scroll()",this.currentspeed);
            }
        }
    };
   
    this.rolling = function () {
        if ( this.stop == false  ) {
            this.next();
        }
        window.setTimeout(this.name+".rolling()",this.scrollspeed);
    }
   
    this.onmouseover = function () {
        if ( this.pausemouseover ) {
            this.stop = true;
        }
    };
   
    this.onmouseout = function () {
        if ( this.pausemouseover ) {
            this.stop = false;
        }
    };
   
    this.next = function() {
   
        for (i = 0; i < this.itemcount; i++) {
            obj = document.getElementById(this.name+'item'+i).style;
            if ( parseInt(obj.left) < 1 ) {
                width = this.width + parseInt(obj.left);
                break;
            }
        }
        for (i = 0; i < this.itemcount; i++) {
            obj = document.getElementById(this.name+'item'+i).style;
            if ( parseInt(obj.left) < 1 ) {
                obj.left = this.width * (this.itemcount-1);
            } else {
                obj.left = parseInt(obj.left) - width;
            }
        }
   
    }
   
    this.prev = function() {
   
        for (i = 0; i < this.itemcount; i++) {
            obj = document.getElementById(this.name+'item'+i).style;
            if ( parseInt(obj.left) < 1 ) {
                width = parseInt(obj.left) * (-1);
                break;
            }
        }
        if ( width == 0 ) {
            total_width = this.width * (this.itemcount-1);
            for (i = 0; i < this.itemcount; i++) {
                obj = document.getElementById(this.name+'item'+i).style;
                if ( parseInt(obj.left) + 1 > total_width ) {
                    obj.left = 0;
                } else {
                    obj.left = parseInt(obj.left) + this.width;
                }
            }
        } else {
            for (i = 0; i < this.itemcount; i++) {
                obj = document.getElementById(this.name+'item'+i).style;
                if ( parseInt(obj.left) < 1 ) {
                    obj.left = 0;
                } else {
                    obj.left = parseInt(obj.left) + width;
                }
            }
        }
    }
   
    this.unext = function () {
        this.onmouseover();
        this.next();
        window.setTimeout(this.name+".onmouseout()",this.pausedelay);
    }
   
    this.uprev = function () {
        this.onmouseover();
        this.prev();
        window.setTimeout(this.name+".onmouseout()",this.pausedelay);
    }
}


<script>

eventstop = new smScroll('list');
eventstop.name = 'eventstop';
eventstop.height = 32;
eventstop.width  = 181;
eventstop.scrollspeed  = 1;
eventstop.pausedelay   = 5000;
eventstop.pausemouseover = true;

eventstop.add("<a href='#' onfocus='blur();'><span class='boldtxt fontevent '>[ 이벤트 하나 ]</span> 문화대축제 이벤트에참여 하시면, 10월 문화혜택을 즐...</a>");
eventstop.add("<a href='#' onfocus='blur();'><span class='boldtxt fontevent '>[ 이벤트 두울 ]</span> 문화대축제 이벤트에참여 하시면, 10월 문화혜택을 즐...</a>");
eventstop.add("<a href='#' onfocus='blur();'><span class='boldtxt fontevent '>[ 이벤트 세엣 ]</span> 문화대축제 이벤트에참여 하시면, 10월 문화혜택을 즐...</a>");
//eventstop.add("진행중인 이벤트가 없습니다.");

</script>
 
            <table width="207"  border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="13"><img src="/img/left_eventbg_l.gif"></td>
                <td background="/img/left_eventbg_m.gif" class="small wtxt">
                    <div id='list' ></div>
                </td>
                <td width="13"><img src="/img/left_eventbg_r.gif"></td>
              </tr>
            </table>

<script>
eventstop.start();
</script>