c16. CSS 가상-클래스

CSS 가상-클래스

방문한 적이 있거나, 마우스 올라가거나 클릭하면 텍스트의 색상이 바뀝니다.

마우스 올리거나 클릭하면 스타일이 바뀝니다.

---

 CSS 가상-클래스 는 태그의 특별한 상태를 정의하기 위해 사용됩니다. 예를 들면,

	사용자 마우스가 태그위로 올라 갔을 때의 스타일 지정
	링크에 대해 방문 했을 때와, 방문하지 않았을 때의 스타일의 차이 지정
	커서가 포커스 (focus) 되었을 때의 태그의 스타일 지정

가상-클래스 (pseudo-classes) 의 구문은 아래와 같이 씁니다.

	selector:pseudo-class {
	property:value;
	}

<style>
/* a 태그의 링크를 선택했을때 텍스트 색상 지정하는 가상-클래스 예*/
a:active {
color: blue;
}
</style>

---

가상 클래스 (pseudo-classes) 와 본래의 CSS 클래스 (CSS classes) 는 조합하여 사용할 수 있습니다.

a.myButton:hover {
	background-color: green;
}
a.myButton:active {
	position:relative;
	top:1px;
}

---

<style>
/* 방문한 적이 없는 링크 */
a:link {color: DarkBlue;}

/* 방문한 적이 있는 링크 */
a:visited {color: Chocolate;}

/* 마우스가 올라 갔을 때 */
a:hover {color: Chartreuse;}

/* 마우스를 클릭 했을 때 */
a:active {color: DarkOrchid;}

a.myButton {
-moz-box-shadow: 3px 4px 0px 0px #1564ad;
-webkit-box-shadow: 3px 4px 0px 0px #1564ad;
box-shadow: 3px 4px 0px 0px #1564ad;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
background-color:#79bbff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #337bc4;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
font-weight:bold;
padding:12px 44px;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
}
a.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
background-color:#378de5;
}
a.myButton:active {
position:relative;
top:2px;
}
</style>
<p><b><a href="http://www.bestcssbuttongenerator.com/" target="_blank">방문한 적이 있거나, 마우스 올라가거나 클릭하면 텍스트의 색상이 바뀝니다.</a></b></p>
<a class="myButton" href="http://www.bestcssbuttongenerator.com/" target="_blank" >마우스 올리거나 클릭하면 스타일이 바뀝니다.</a>

---

[광고] Udemy 동영상 강의로 보기