스타일 시트 활용(3) - 문서내에 작은 스크롤상자 만들기

css의 overflow 속성을 이용하면 깔쌈한 스크롤 박스를 만들수 있습니다.
이 효과를 쓰시면 html 문서내에 iframe을 적용한 효과 비슷하게 나오지만 더욱더 활용도가 높습니다.
iframe처럼 문서 하나 더 들어가지도 않고 스타일시트로 효과도 줄 수 있으니까요. 그럼 한번 구경해 볼까요

      
      스타일 시트를 적용해본 글상자입니다. iframe 과 비슷한 효과가 나왔지요.

      그렇지만 iframe과는 달리 문서 하나를 더 만들지 않고도


      이와같은 멋진 효과를 낼 수 있다는것이 장점입니다.

먼저 head 부분에 다음과 같이 집어넣으세요.

        <style type="text/css">
         #box {width: 500; height: 50;  ---(1)
        overflow: auto; ---(2)
        padding:5px; ---(3)
        border:1 solid blue; ---(4)
        color: black;  font-size:9pt;}
        </style>

그리구 body 부분에는

<div id= "box">박스안에 들어갈 내용을 넣으세요.</div>


(1) 부분을 보시면 .box란건 보셨어도 #box란 형식은 처음보시죠. ID 속성이라구 하는건데요,
클래스 속성하고 틀린점은 [선택자+(#)+ID 이름] 형식이랍니다.
단점은 ID를 홈페이지 내에서 하나밖에 지정할 수 없다는 점이지요. 우리가 쓰는 통신 아이디처럼이요 .
예를 보시면 P#ID1{color:red} 라고 head에 지정해 주시면
본문에서
들어갈 내용

라고 되어 있는 부분이 스타일이 먹게 되지요.
따라서 #box 라고 되어 있으면 본문에서 <뭐뭐뭐 id="box"> 라고 되어있는부분이 적용이 되겠지요.
위의 예는 DIV 태그를 사용해서 구현한 거시구여.

(2) 여기서 핵심이라 할수 있는 overflow 속성은 글이 상자 크기의 범위를 벗어날때 표시방법을 이야기 해주는 것입니다.
속성에는 visible(내용이 박스보다 많아도 보여주기), Hidden(잘라버리기),Auto(자동 스크롤바 생성), Scroll(항상) 이있지요

(3) table 에서의 cellpadding 하구 같은 개념입니다. 글상자와 글사이의 간격을 설정하는 부분이지요

(4) 이것두 아까 스타일 폼 예제에서 설명 드렸지요. 글상자 굵기하구 색깔을 설정하는 곳입니다.