잡동사니 블로그

발췌  : KIPA 작성 웹표준 지침

 

 

 

 

 

 

<div id="articles">

    <ul id="notice">

    ...

    </ul>

    <ul id="news">

    ...

    </ul>

    <ul id="stats">

    ...

    </ul>

</div>

 

article 은 세개의 하위 리스트를 포함하는 블록이고 하위의 ul은 모두 float를 사용하여 가로로 배치되어 있다. 이때에 상위 블록인 #articles에 background속성으로 색을 지정해 주면 색이 나타나지 않는 것을 알 수 있다. float된 ul들은 화면상에서 공간을 차지 하지 않기 때문에 #articles가 float된 ul만을 하위에 가지고 있으면 #articles의 높이가 0이 되어서 마치 배경색이 적용이 안되는 것같이 보이게 된다. 이를 해결하기 위해 과거에는 새로운 엘리먼트를 추가하거나 content속성을 이용하는 등 여러가지 방법이 있었지만 지금은 overflow 속성을 이용해는 방법이 가장 좋은 방법으로 여겨지고 있다.

#articles {

    width: 700px;

    margin: 20px auto;

    background: #ddd;

    overflow: auto;

}

위와 같이 상위 엘리먼트에 overflow에 auto값을 주게 되면 원하는 배경색이 나오는 것을 볼 수 있다.

국정브리핑 하다가 만들어봤담..

 

공공기관에서는 많이 쓰이니깐 좋을듯.

 

<script type="text/javascript" language="JavaScript" src="http://news.go.kr/ticker/korean_news_scroll.js" ></script>
                                         
                         <script type="text/javascript" language="JavaScript">
        <!--
        document.write("<ul>");
        for(i=0; i<NewsTitles.length; i++){
                  document.write("<li style='margin:0;padding:0;height:2em;width:175px;text-overflow:ellipsis; overflow:hidden;'><nobr>");
                  document.write(NewsTitles[i]);
                  document.write("<\/nobr><\/li>");
              }
              document.write("<\/ul>");      
        //-->
       </script>   

 

 

<script type="text/javascript">
         <!--
       doTickerUpper(document.getElementById("국정브리핑 div 아이디 "),2,NewsTitles.length);
      //-->
         </script>

 

 

 

function doTickerUpper(target, target_height, target_num) {
    var mover = target.getElementsByTagName("ul").item(0);

    // set
    mover.style.position = "absolute";
    mover.style.margin = "0 0 0 0";
    mover.style.top = "0em";
    mover.topPosition = 0;
 mover.status = "true";
 mover.onmouseover = function(){  
  this.status = "false";
 }
 mover.onmouseout = function(){  
  this.status = "true";
 }

    // duplicate text
    mover.style.height = target_height * target_num * 2 + "em";
    mover.innerHTML += mover.innerHTML;
 
    // set action
    mover.tickerAction = window.setInterval(
        function()
        {
   if(mover.status != "false"){
             if (mover.topPosition * -1 > (target_height * (target_num))) {
                 mover.topPosition = -0.05;
             } else {
                 mover.topPosition -= 0.05;
             }
   }
            mover.style.top = mover.topPosition + "em";
        }
    , 40);
}

 

 

------------------ 인터벌을 넣은 수정버전 --------------------------

 

/**
 * 사용자 메인 화면 공지사항 티커 스크롤되도록 하는 함수
 * @param {Object} target 스크롤 대상 객체
 * @param {Object} target_height 스크롤 너비
 * @param {Object} target_num 스크롤 갯수
 */
function doTickerUpper(target, target_height, target_num,move_length, interval,rest_interval) {
    var mover = target.getElementsByTagName("ul").item(0);

    // set
    mover.style.position = "absolute";
    mover.style.margin = "0 0 0 0";
    mover.style.top = "0em";
    mover.topPosition = 0;
 mover.status = "true";
 
 mover.moveheight = 0.0;
 var interval = (typeof interval != "undefined")? interval : 40;
 var rest_interval = (typeof rest_interval != "undefined")? rest_interval : 200;
 mover.onmouseover = function(){   
  this.status = "false";
 }
 mover.onmouseout = function(){  
  this.status = "true";
 }

    // duplicate text
    mover.style.height = target_height * target_num * 2 + "em";
    mover.innerHTML += mover.innerHTML;
 
    // set action
    mover.tickerAction = function()
        {
   var timer = interval;   
   if(mover.status != "false"){
             if (mover.topPosition * -1 > (target_height * (target_num))) {
                 mover.topPosition = -move_length;     
             } else {
                 mover.topPosition -= move_length;
             }
    
    mover.moveheight  += move_length;    
    if(mover.moveheight >= target_height){
     timer = rest_interval;
     mover.moveheight = 0.0;    
    }
    
   }
            mover.style.top = mover.topPosition + "em";
   window.setTimeout(mover.tickerAction, timer);
        } 
 mover.tickerAction();
   
}