[CSS 예제] 마우스 위치에 따른 글자 효과주기 :: 소림사의 홍반장!
실행 소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>CSS 2</title>

<style type="text/css">

div {

        border: medium solid black;

        height: 100px;

}

.red {

        color: red;

}

#center {

        text-align: center;

}

.back {

        background-color: yellow;

}

div p {

        /* div 안에 p (div 자식 p) */

        color: green;

}

 

/* 아직 안가본 곳 , 가본 곳 */

a:LINK, a:VISITED {

        text-decoration: none; color: black;   

}

 

a:HOVER {     /* 마우스 커서 올렸을때 */

        text-decoration: underline; color: #0F0; font-weight: bold;

}

 

a:ACTIVE {    /* 마우스 버튼을 눌렀을때 */

        text-decoration: none; color: black;

}

 

</style>

</head>

<body>

        <!-- inline css : 태그에 직접 적용 -->

        <div style="height: 200px;">

               <a href="http://pizzahut.co.kr">오늘 뭐 먹지??</a>

        </div>

       

        <div class="red back">     <!-- class 여러개 적용시 한칸 띄운다 -->

               털광필, 몽골용단

               <p>배고파!!! 배고파!!! 배고파!!!</p>

        </div>

        <p class="red" id="center">

               레드!!!

        </p>

        <h1 class="red">빠알간색</h1>

       

        <!-- class 여러개 줄 수 있지만 id 하나만 사용한다! -->

        <!--   자바스크립트에서 문제 생기기 때문에 -->

       

       

       

       

</body>

</html>

 



실행 결과
털광필, 몽골용단

배고파!!! 배고파!!! 배고파!!!

레드!!!

빠알간색

 

다른 카테고리의 글 목록

Dev. 웹/CSS 카테고리의 포스트를 톺아봅니다