'스타일시트'에 해당되는 글 2건

  1. 2008.07.04 이미지 없이 라운딩 박스 표현하기
  2. 2007.12.31 스타일시트로 스크롤바 설정하기




<style>

.rtop, .rbottom{display:block;}
.rtop *, .rbottom *{display:block; height:1px; overflow:hidden;}

.r1{margin:0 5px; background:#CCCCCC}
.r2{margin:0 3px; border-left:2px solid #CCCCCC; border-right:2px solid #CCCCCC; background:#EEEEEE}
.r3{margin:0 2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; background:#EEEEEE}
.r4{margin:0 1px; height:2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; background:#EEEEEE}
.box{ margin:0; padding:5px 10px; border-left:#CCCCCC solid 1px; border-right:#CCCCCC solid 1px;  background:#EEEEEE; font-size:12px}
</style>

 

<div id="container" style="background: #fff">
   <b class="rtop">

      <b class="r1"></b>

      <b class="r2"></b>

      <b class="r3"></b>

      <b class="r4"></b>

   </b>
   <div class="box">이미지 없이 라운딩 박스 + 보더 표현하기!</div>
   <b class="rbottom">

      <b class="r4"></b>

      <b class="r3"></b>

      <b class="r2"></b>

      <b class="r1"></b>

   </b>

</div>


Posted by 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요

:: scroll bar- 가로/세로 없애기(보이기
아래 스타일을 적용합니다.
<body style="width:100%;overflow-x:hidden;overflow-y:scroll">
overflow-x = x축 스크롤바  
overflow-y = y축 스크롤바
hidden( 감추기)  scroll(보이기 )

 :: 모두 안보이게 간단히 하려면..
     
<body scroll="no">


::스크롤바을 원하는 색으로 바꾸기(스타일 시트)
아래를 <head> 와 </head> 사이에 넣으세요

<style type="text/css">
<!--
body
{scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: black;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF}
//-->

</style>

스코롤바는 모두 7가지 색깔로 되어있지요..
아래부분을 참조하여 수정하면 되죠^^
scrollbar-face - 움직이는 바 전체색
scrollbar-shadow - 바의 오른쪽과 밑쪽 그림자색
scrollbar-highlight - 바의 왼쪽과 위쪽의 얇은 선색
scrollbar-3dlight - 바의 왼쪽위쪽에 진하게 드러가는 선
scrollbar-darkshadow - 바의 오른쪽과 밑쪽에 들어가는 얇은 색
scrollbar-track - 바가 없는 아래부분의 색
scrollbar-arrow - 위 아래 화살표 색

::자동으로 내려가는 스크롤바~
 
<head> 와 </head> 사이에 아래를...

<script language="javascript">
var position = 0;
function scroller()
{
if (position != 500)
{
position++;
scroll(0,position);
clearTimeout(timer);
var timer = setTimeout("scroller()",10); timer;
}
}
</script>

다음 소스를 <body>안에 넣으세요..
<body
onload="scroller()">

Posted by 행복한 프로그래머 궁금쟁이박

댓글을 달아 주세요