step06. - 01~02. pseudo class
<style>
/*
Pseudo Class (가상 클래스)
- 시각적으로 확인 할수 없지만 특정 상황해서 있다고 간주 되는 클래스
*/
.box{
width: 100px;
height: 100px;
border: 1px solid red;
}
/* hover 가상 클래스 선택자 */
.box:hover{
background-color: yellow;
}
/* focus 가상 클래스 선택자 */
input:focus{
background-color: yellow;
}
button:focus{
color: red;
}
/* active 가상 클래스 선택자 (버튼을 누르고 있는 경우)*/
button:active{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<input type="text"/>
<input type="text"/>
<button>버튼</button>
<button>버튼</button>
</body>
- 프세우도 아니다. '수도' 라고 읽는다. '가상의' 라는 의미를 가진다.
- .box:hover의 경우 문서 객체에 class를 설정하지 않아도 마우스를 올렸을 때 hober class가 들어가고 떼면 사라진다. 이 가상의 이름을 불러오는 것이 ':' 이다. 특정 상황에 css를 변화시킬 수 있다.
- pseudo class 또한 hover, focus, active와 같이 정해진 약속들이 있다.
<style>
a{
text-decoration: none; /* 밑줄 제거 */
}
a:hover{
text-decoration: underline; /* 밑줄 추가 */
}
/* 한번도 방문하지 않은 링크 가상 클래스 선택자 */
a:link{
color: #000;
}
/* 이미 방문 했던 링크 가상 클래스 선택자 */
a:visited{
color: green;
}
</style>
</head>
<body>
<a href="http://acronacademy.co.kr">study</a>
<a href="http://daum.net">daum</a>
<a href="http://naver.com">naver</a>
</body>
- 이렇게는 잘 안쓰인다고 한다. 원래 link는 밑줄이 있는 것이 default이다. 이런 것이 있다는 것만 알아두자.
댓글