웹마스터 팁

<html>
<HEAD>
<title>Happyscript.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<SCRIPT LANGUAGE="VBSCRIPT">
<!--
        function fnReset()
                        // Unbold all spans
                s3d1.style.fontWeight = "normal"
                s3d2.style.fontWeight = "normal"        
                sArrow1.style.fontWeight = "normal"
                sArrow2.style.fontWeight = "normal"
                sBase1.style.fontWeight = "normal"
                sBase2.style.fontWeight = "normal"
                sDark1.style.fontWeight = "normal"
                sDark2.style.fontWeight = "normal"
                sFace1.style.fontWeight = "normal"
                sFace2.style.fontWeight = "normal"
                sHighlight1.style.fontWeight = "normal"
                sHighlight2.style.fontWeight = "normal"
                sShadow1.style.fontWeight = "normal"
                sShadow2.style.fontWeight = "normal"
        end function

        function fnChange(sInProp)        
                fnReset()
                Select Case sInProp                        
                        Case "3d"                                          
                                oTextArea.style.scrollbar3dLightColor = o3d.value
                                s3d2.innerText = o3d.value        
                                s3d2.style.fontWeight = "bold"
                                s3d1.style.fontWeight = "bold"
                                o3dc.style.background = o3d.value        
                        Case "arrow"
                                oTextArea.style.scrollbarArrowColor = oArrow.value
                                sArrow2.innerText = oArrow.value
                                sArrow2.style.fontWeight = "bold"
                                sArrow1.style.fontWeight = "bold"
                                oArrowc.style.background = oArrow.value
                        Case "base"
                                oTextArea.style.scrollbartrackColor = oBase.value
                                sBase2.innerText = oBase.value
                                sBase2.style.fontWeight = "bold"
                                sBase1.style.fontWeight = "bold"                
                                oBasec.style.background = oBase.value
                        Case "dark"
                                oTextArea.style.scrollbarDarkShadowColor = oDark.value
                                sDark2.innerText = oDark.value
                                sDark2.style.fontWeight = "bold"
                                sDark1.style.fontWeight = "bold"        
                                oDarkc.style.background = oDark.value
                        Case "face"
                                oTextArea.style.scrollbarFaceColor = oFace.value
                                sFace2.innerText = oFace.value
                                sFace2.style.fontWeight = "bold"
                                sFace1.style.fontWeight = "bold"                
                                oFacec.style.background = oFace.value
                        Case "highlight"
                                oTextArea.style.scrollbarHighlightColor = oHighlight.value        
                                sHighlight2.innerText = oHighlight.value
                                sHighlight2.style.fontWeight = "bold"
                                sHighlight1.style.fontWeight = "bold"                
                                oHighlightc.style.background = oHighlight.value        
                        Case "shadow"
                                oTextArea.style.scrollbarShadowColor = oShadow.value                                
                                sShadow2.innerText = oShadow.value
                                sShadow2.style.fontWeight = "bold"
                                sShadow1.style.fontWeight = "bold"        
                                oShadowc.style.background = oShadow.value        
                End Select        
        end function
-->
</SCRIPT>

<style type="text/css">
<!--
td {  font-size: 9pt; color: #008ED2}
input,textarea {  font-size: 9pt}
-->
</style>
</HEAD>

<body>
<P>
  
<table border="0" cellspacing="1" cellpadding="2" width="602" align="center">
  <tr>
    <td valign="TOP" width="601">
      <table width="595" align="center" border="0" cellspacing="1" cellpadding="2" bgcolor="#00BCF2">
        <tr>
          <td align=CENTER valign="CENTER" height="200" width="594" bgcolor="#F4FDFF">
            <table bgcolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="2" border="0">
              <tr>
                <td bgcolor="#D0F5FF" align="center" width="49%">Preview</td>
                <td bgcolor="#D0F5FF" align="center" width="51%">Source</td>
              </tr>
              <tr>
                <td bgcolor="#F4FDFF" width="49%">
                  <table border="0" cellspacing="0" cellpadding="4" align="center" bgcolor="#FFFFFF">
                    <tr>
                      <td>
                        <div align="center">
                          <textarea cols=38 rows=5 wrap=off id="oTextArea"  name="textarea">
I Knew I Loved You - Savage Garden

maybe its intuition
but some things you just don't question
like in your eyes, I saw my future in an instant
and there it goes, I think I found my best friend
I know that may sound more than a little crazy
but I believe...

I knew I loved you before I met you
I think I dreamed you into life
I knew I loved you before I met you
I have been waiting all my life

there'+ 's just no reason only
the sense of completion
and in your eyes I see
the missing pieces I'm searching for
I think I have found my way home
I know that may sound more than a little crazy but I believe...

I knew I loved you before I met you
I think I dreamed you into life
I knew I loved you before I met you
I have been waiting all my life

a thousand angels dance around you
I am complete now that I have found you

I knew I loved you before I met you
I think I dreamed you into life
I knew I loved you before I met you
I have been waiting all my life
I knew I loved you before I met you
I think I dreamed you into life
I knew I loved you before I met you
I have been waiting all my life




</textarea>
                        </div>
                      </td>
                    </tr>
                  </table>
                </td>
                <td bgcolor="#F4FDFF" width="51%"><span id="code" style="overflow-y:auto;">
                  <STYLE><br>
                  BODY { <span id="s3d1">scrollbar-3dlight-color:</span><span id="s3d2"></span>;<br>
                  <span id="sArrow1">scrollbar-arrow-color:</span><span id="sArrow2"></span>;<br>
                  <span id="sBase1">scrollbar-track-color:</span><span id="sBase2"></span>;<br>
                  <span id="sDark1">scrollbar-darkshadow-color:</span><span id="sDark2"></span>;<br>
                  <span id="sFace1">scrollbar-face-color:</span><span id="sFace2"></span>;<br>
                  <span id="sHighlight1">scrollbar-highlight-color:</span><span id="sHighlight2"></span>;<br>
                  <span id="sShadow1">scrollbar-shadow-color:</span><span id="sShadow2"></span>}<br>
                  </STYLE><br></span></td>
              </tr>
            </table>
            <table bgcolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="2" border="0">
              <tr>
                <td bgcolor="#D0F5FF">
                  <div align="center">Color selection</div>
                </td>
              </tr>
              <tr>
                <td bgcolor="#F4FDFF">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="53%" valign="top">
                        <table cellpadding="2" width="310" cellspacing="0">
                          <tr>
                            <td align="RIGHT" width="182">scrollbar-3dlight-color
                            </td>
                            <td style="padding-left:5" width="126">
                              <input type="text" name="textfield"  id="o3d" onChange="fnChange('3d')" size="10">
                                                            <input type="text" name="textcol"  id="o3dc" size="1">
                                                          <input type="radio" name="colors" value="r_3d" checked>
                            </td>
                          </tr>
                          <tr>
                            <td align="RIGHT" width="182">scrollbar-arrow-color
                            </td>
                            <td style="padding-left:5" width="126">
                              <input type="text" name="textfield" id="oArrow" onChange="fnChange('arrow')" size="10">
                              <input type="text" name="textcol"  id="oArrowc" size="1">
                              <input type="radio" name="colors" value="r_arrow">                                                          
                            </td>
                          </tr>
                          <tr>
                            <td align="RIGHT" width="182">scrollbar-track-color
                            </td>
                            <td style="padding-left:5" width="126">
                              <input type="text" name="textfield" id="oBase" onChange="fnChange('base')" size="10">
                              <input type="text" name="textcol"  id="oBasec" size="1">
                              <input type="radio" name="colors" value="r_base">
                            </td>
                          </tr>
                          <tr>
                            <td align="RIGHT" width="182">scrollbar-darkshadow-color
                            </td>
                            <td style="padding-left:5" width="126">
                              <input type="text" name="textfield" id="oDark" onChange="fnChange('dark')" size="10">
                              <input type="text" name="textcol"  id="oDarkc" size="1">
                              <input type="radio" name="colors" value="r_dark">
                            </td>
                          </tr>
                          <tr>
                            <td align="RIGHT" width="182">scrollbar-face-color
                            </td>
                            <td style="padding-left:5" width="126">
                              <input type="text" name="textfield" id="oFace" onChange="fnChange('face')" size="10">
                              <input type="text" name="textcol"  id="oFacec" size="1">
                              <input type="radio" name="colors" value="r_face">
                            </td>
                          </tr>
                          <tr>
                            <td align="RIGHT" width="182">scrollbar-highlight-color
                            </td>
                            <td style="padding-left:5" width="126">
                              <input type="text" name="textfield" id="oHighlight" onChange="fnChange('highlight')" size="10">
                              <input type="text" name="textcol"  id="oHighlightc" size="1">
                              <input type="radio" name="colors" value="r_highlight">
                            </td>
                          </tr>
                          <tr>
                            <td align="RIGHT" width="182">scrollbar-shadow-color
                            </td>
                            <td style="padding-left:5" width="126">
                              <input type="text" name="textfield" id="oShadow" onChange="fnChange('shadow')" size="10">
                              <input type="text" name="textcol"  id="oShadowc" size="1">
                              <input type="radio" name="colors" value="r_shadow">
                            </td>
                          </tr>
                        </table>
                      </td>
                      <td width="47%" valign="top" align="center">
                        <table border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td colspan="2">
                              <table border="0" width="100%">
                                <tr>
                                  <td align="center" width="100%"> <font size="2">
<script language="JavaScript">
<!--
var hex = new Array(6)
hex[0] = "FF"
hex[1] = "CC"
hex[2] = "99"
hex[3] = "66"
hex[4] = "33"
hex[5] = "00"

function display(triplet) {
        // colorcode.value = "#" + triplet;
        if(colors[0].checked == true)
        {
                o3d.value = "#" + triplet;
                fnChange('3d');
                o3dc.style.background = "#" + triplet;
        } else if(colors[1].checked == true)
        {
                oArrow.value = "#" + triplet;
                fnChange('arrow');
                oArrowc.style.background = "#" + triplet;
        } else if(colors[2].checked == true)
        {
                oBase.value = "#" + triplet;
                fnChange('base');
                oBasec.style.background = "#" + triplet;
        } else if(colors[3].checked == true)
        {
                oDark.value = "#" + triplet;
                fnChange('dark');
                oDarkc.style.background = "#" + triplet;
        } else if(colors[4].checked == true)
        {
                oFace.value = "#" + triplet;
                fnChange('face');
                oFacec.style.background = "#" + triplet;
        } else if(colors[5].checked == true)
        {
                oHighlight.value = "#" + triplet;
                fnChange('highlight');
                oHighlightc.style.background = "#" + triplet;
        } else if(colors[6].checked == true)
        {
                oShadow.value = "#" + triplet;
                fnChange('shadow');
                oShadowc.style.background = "#" + triplet;
        }
}

function drawCell(red, green, blue) {
        document.write('<TD BGCOLOR="#' + red + green + blue + '">')
        document.write('<A HREF="javascript:display('' + (red + green + blue) + '')" >')
        document.write('<IMG SRC="#" BORDER=0 HEIGHT=13 WIDTH=13>')
        document.write('</A>')
        document.write('</TD>'+ ')
}

function drawRow(red, blue) {
        document.write('<TR>')
        for (var i = 0; i < 6; i++) {
                drawCell(red, hex[i], blue)
        }
        document.write('</TR>')
}

function drawTable(blue) {
        document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>')
        for (var i = 0; i < 6; ++i) {
                drawRow(hex[i], blue)
        }
        document.write('</TABLE>')      
}

function drawCube() {
        document.write('<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=1><TR>')
        for (var i = 0; i < 6; ++i) {
           if (i == 3) {
             document.write('</Tr><Tr>')}
                document.write('<TD BGCOLOR="#FFFFFF">')
                drawTable(hex[i])
                document.write('</TD>')
        }
        document.write('</TR></TABLE>')
}

drawCube()
// -->
</script>
                                    </font></td>
                                </tr>
                              </table>
                            </td>
                          </tr>

                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
            <table width="100%" border="0" cellspacing="0" cellpadding="2">
              <tr>
                <td bgcolor="#D0F5FF" align="center">How to use</td>
              </tr>
              <tr>
                <td bgcolor="#F4FDFF">원하는 색상을 선택하거나 CSS소스를 넣으세요<br>
                  체크박스를 클릭하여 차례대로 선택하세요<br>
                  색상을 지정할때마다 스크롤바의 색상이 직접 보여지면서 소스가 완성됩니다<br>
                  완성한후 Source를 복사하여 html문서의 <head>부분에 넣어주시면 됩니다

                  
                  <b><br>
                  <font color="#0000FF">Internet explorer 5.5 이상에서만 작동합니다</font></b>
                  <br>
                  </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<input type=button name=simabuttonviewsource value="View Source" onClick='window.location="view-source:"+window.location.href'>
</body>
</html>