고정 헤더 영역
상세 컨텐츠
본문
포스트에 직접 넣는 박스태그 + 스크롤바 종합 - 샐리님의 얼음집에서 트랙뷁
박스태그 자료는 Moo!!의 게임과 공상,
스크롤바 자료는 Clip for 눈love.
이미 스킨 편집팁 밸리에 등록된 글들입니다만 따로 흩어져 있어서 하나로 합쳐봤습니다.
이 그림은 스크롤바 구성요소고요.
padding은 내부에 주는 쿠션값.
박스의 세로길이는 height에서 지정한 만큼입니다. (여기서는 80px로 했음) 스크롤바를 빼려면 over~끝까지 생략하면 됩니다.
가로 폭을 꽉 채울거면 width:100%도 빼도 됩니다. (박스 가로 폭을 줄이려고 80%니 50%니 값을 변환시킬 때 필요한 숫자임)
첫번째 박스에만 적어놓은 <color:blue;>는 글자 색 지정인데, 생략하면 다른 박스들처럼 기본글자색으로 나옵니다.
<border-color:green;>을 붙이면 점선을 붙이고 그에 대한 색깔을 설정 할 수 있고, <border:1px>뒤에 한칸 띄운 뒤 solid(실선)나 dotted(점선), dashed(점실선)를 붙여서 색깔을 지정해도 된다.
...그러니까 사실 박스를 구성하는 데에 있어서 가장 기본적인 필수요소는 굵은 글씨입니다.
여기서부터는 스크롤바 모양을 따로 지정하지 않았습니다.
스크롤바 자료는 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>
