• 메인홈으로
  • 전체메뉴 보기
  • 이달의 교육
  • 아카데미 교육
  • 창업스쿨
  • 1:1 방문컨설팅
  • 지역별교육&파트너
  • 무료 스튜디오
  • 쇼핑몰 자격증
  • 맨위로
하이퍼링크 스타일만들기 2019.03.21


[하이퍼링크 결과화면]




[HTML 소스]
<html>

<head>
      <title> stylesheet : rollover text</title>
      <meta charset="UTF-8">
      <style>

    A:link.test1 { color: blue }
    A:hover.test1 { color: red }

    A:link.test2 { color: blue }
    A:hover.test2 { font-size:15pt }

    A:link.test3 { color: blue }
    A:hover.test3 { font-weight: bold; font-style: italic }

    A:link.test4 { text-decoration: none; color: blue }
    A:visited.test4 { text-decoration: none }
    A:hover.test4 { background: cyan; color:blue }

    A:link.test5 { color: blue }
    A:hover.test5 { font-family:궁서; font-weight: bold; font-size: 12pt }

    A:link.test6 { color: blue; text-decoration: none }
    A:visited.test6 { text-decoration: none }
    A:hover.test6 { text-decoration: underline; color:red }

    A:link.test7 { color: blue }
    A:hover.test7 { color: darkred; font-weight: bold; background:#FFC1C1 }

    A:link.test8 { color: blue; text-decoration: none }
    A:visited.test8 { text-decoration: none }
    A:hover.test8 { color: darkred; font-weight: bold; background:#FFC1C1 ; border:15 solid brown; padding:5px }


    .batang {
                font-family:돋움;
                 font-size:10pt;
                 line-height:170%;
                 letter-spacing:-1px;
                 text-align:justify;
                 margin-top:0;
                 margin-bottom:0;
                 width:350px;
                 padding-top:20px;
                 border-top:10px cyan solid;}/*바탕글*/

    .title { 
                filter:shadow(color=#00008B, direction=135) ;
                 width:600px;
                 font-family:바탕;
                 font-weight:900;
                 font-size:30pt;
                 color:#90EE90 ;
                 line-height:300%;
 }

    ul.hover {list-style:none}
</style>
</head>

<body bgcolor=ffffff>
<table align=center width="569">
     <tr>
      <td width="563">
    <div class="title">글자 롤오버</div>
    <div class=batang>
        글자만으로 롤오버단추 만들기 : <br>
        스타일시트만으로도 충분! <br>
        얼마든지 멋진 효과를 만들 수 있습니다!
    <ol>
            <li><a href=" http://edu.godo.co.kr " class=test1>글자 색깔이 바뀝니다</a>
            <li><a href=" http://edu.godo.co.kr" class=test2>글자 크기가 바뀝니다</a>
            <li><a href=" target='_blank'> http://edu.godo.co.kr " class=test3>글자가 두꺼워지고 이탤릭으로 바뀝니다</a>
            <li><a href=" http://edu.godo.co.kr " class=test4>배경 색깔이 바뀝니다</a>
            <li><a href=" http://edu.godo.co.kr " class= test5>아예 글꼴이 바뀝니다</a>
            <li><a href= " http://edu.godo.co.kr " class=test6>색깔이 바뀌고 밑줄이 생깁니다</a>
            <li><a href="http://edu.godo.co.kr" class=test7>글자 색깔과 배경, 글자 두께가 바뀝니다</a>
            <li><a href="http://edu.godo.co.kr" class=test8>테두리 선까지도 굵게 해줄 수 있습니다</a>
    </ol>
</div>

  </td>
 </tr>
</table>
</body>

</body>
</html>
 

목록보기