[펌] 박스(+스크롤 바)태그 종합편

포스트에 직접 넣는 박스태그 + 스크롤바 종합 - 샐리님의 얼음집에서 트랙뷁

박스태그 자료는 Moo!!의 게임과 공상,
스크롤바 자료는 Clip for 눈love.
이미 스킨 편집팁 밸리에 등록된 글들입니다만 따로 흩어져 있어서 하나로 합쳐봤습니다.
이 그림은 스크롤바 구성요소고요.

padding은 내부에 주는 쿠션값.
박스의 세로길이는 height에서 지정한 만큼입니다. (여기서는 80px로 했음) 스크롤바를 빼려면 over~끝까지 생략하면 됩니다.
가로 폭을 꽉 채울거면 width:100%도 빼도 됩니다. (박스 가로 폭을 줄이려고 80%니 50%니 값을 변환시킬 때 필요한 숫자임)
첫번째 박스에만 적어놓은 <color:blue;>는 글자 색 지정인데, 생략하면 다른 박스들처럼 기본글자색으로 나옵니다.
<border-color:green;>을 붙이면 점선을 붙이고 그에 대한 색깔을 설정 할 수 있고, <border:1px>뒤에 한칸 띄운 뒤 solid(실선)나 dotted(점선), dashed(점실선)를 붙여서 색깔을 지정해도 된다.

...그러니까 사실 박스를 구성하는 데에 있어서 가장 기본적인 필수요소는 굵은 글씨입니다.

<div style="color:blue; background:lightcyan; border:1px solid lightskyblue; padding:9px; width:100%; overflow-y:scroll; HEIGHT:80px; scrollbar-3dlight-color:#FFF; scrollbar-arrow-color: #99CCFF; scrollbar-track-color:#FFF; scrollbar-darkshadow-color:#FFF; scrollbar-face-color: #EEF7FF; scrollbar-highlight-color:#99CCFF; scrollbar-shadow-color:#99CCFF;">내용</div>

<div style="background:#EEE; border:1px dotted SILVER; padding:9px; width:100%; overflow-y:scroll;height:80px; scrollbar-face-color: #EEE; scrollbar-highlight-color: SILVER; scrollbar-shadow-color: SILVER; scrollbar-3dlight-color: #FFF; scrollbar-arrow-color: SILVER; scrollbar-track-color: #FFF; scrollbar-darkshadow-color:#FFF;"> 내용</div>

<div style="background:IVORY; border:3px dotted TAN; padding:9px; width:100%; overflow-y:scroll; height:80px; scrollbar-face-color: IVORY; scrollbar-highlight-color: TAN; scrollbar-shadow-color: TAN; scrollbar-3dlight-color: #FFF; scrollbar-arrow-color: TAN; scrollbar-track-color: #FFF; scrollbar-darkshadow-color:#FFF;"> 내용</div>

<div style="background:#FFE9E1; border:1px dashed #FAC6C6; padding:9px; width:100%; overflow-y:scroll; height:80px; scrollbar-face-color:#FFF0F5; scrollbar-highlight-color: #FAC6C6; scrollbar-shadow-color: #FAC6C6; scrollbar-3dlight-color: #FFF; scrollbar-arrow-color: #FAC6C6; scrollbar-track-color: #FFF; scrollbar-darkshadow-color:#FFF;">내용</div>

<div style="background:#E4FFDA; border:3px dashed #4BAF4B; padding:9px; width:100%; overflow-y:scroll; height:80px; scrollbar-face-color:#E4FFDA; scrollbar-highlight-color: #4BAF4B; scrollbar-shadow-color: #4BAF4B; scrollbar-3dlight-color: #FFF; scrollbar-arrow-color: #4BAF4B; scrollbar-track-color: #FFF; scrollbar-darkshadow-color:#FFF;">내용</div>

여기서부터는 스크롤바 모양을 따로 지정하지 않았습니다.

<div style="background-IMAGE : URL(http://md.egloos.com/skn/img/a/01/01/2/bg_1.gif); border:3px double SILVER; padding:9px; width:100%; overflow-y:scroll; height:50px;">내용</div>

<div style="background-IMAGE : URL(http://md.egloos.com/skn/img/a/01/01/2/bg_2.gif); border:1px solid LIGHTSKYBLUE; padding:9px; width:100%;overflow-y:scroll; height:50px;">내용</div>

<div style="background-IMAGE : URL(http://md.egloos.com/skn/img/a/01/00/5/bg1.gif); border:1px solid SILVER; padding:9px; width:100%; overflow-y:scroll; height:50px;">내용</div>

<div style="background-IMAGE : URL(http://md.egloos.com/skn/img/a/01/00/5/bg2.gif); border:1px solid TAN; padding:9px; width:100%; overflow-y:scroll; height:50px; ">내용</div>

<div style="background-IMAGE : URL(http://md.egloos.com/skn/img/a/01/00/5/bg3.gif); border:1px solid #FAC6C6; padding:9px; width:100%; overflow-y:scroll; height:50px;">내용</div>

<div style="background-IMAGE : URL(http://md.egloos.com/skn/img/a/01/00/5/bg4.gif); border:1px solid #AECDFF; padding:9px; width:100%; overflow-y:scroll; height:50px;">내용</div>

<div style="background-IMAGE : URL(http://md.egloos.com/skn/img/a/01/00/5/bg5.gif); border:1px solid #4BAF4B; padding:9px; width:100%; overflow-y:scroll; height:50px;">내용</div>