[css] 의사 클래스(가상 클래스, pseudo-class)

---

 

의사 클래스(가상 클래스, pseudo-class)

의사 클래스 - CSS: Cascading Style Sheets | MDN

▶의사 클래스(가상 클래스, pseudo-class)

· 선택자에 덧붙이고자 할 때 사용하는 키워드

· 요소가 특정 상황(특정 조건을 만족할 때,

예를 들면 마우스 커서가 요소 위에 올려져 있는 경우)에 해당할 때, 효과를 내려면 의사 클래스를 사용한다

· 선택자는 id나 class가 될 수도 있다.

id나 class선택자 뒤에 :의사클래스가 붙는다는 말! 하단 예시의 .btn:hover처럼!

 

▶기본형

선택자:의사클래스 {
 속성: 속성값;
}

 

의사 클래스 유형

 

:link	· 사용자가 방문한 적 없는 페이지
:visited	· 사용자가 한 번이라도 방문한 적이 있는 페이지
:hover	· 커서가 요소 위에 올라가 있을 때 나타나는 효과를 설정할 때 사용
:active	· 사용자가 활성시킨 요소 · 예를 들어 마우스를 사용하는 경우,  '활성'은 마우스로 버튼을 누르는 순간부터 떼는 순간까지의 시점에 해당됨
:focus	· 선택 받은(집중 받은) 요소 · 보통 마우스로 클릭(한 번만 클릭해도 변경된 효과가 계속 유지되는 경우, 예를 들어 특정 칸을 클릭 했을 때 해당 칸의 색이 변하는 경우)하거나, 키보드 tab키로 해당 요소를 선택했을 경우에 해당됨

:checked
:enabled
:disabled

:target
:root

 

의사 클래스 적용 예시

 

▶css에서,

.btn {
  font-size: 1.8rem;
  padding: 1rem;
  width: 20rem;
  text-align: center;
  border: 0.1rem solid #56a5eb;
  margin-bottom: 1rem;
  text-decoration: none;
  color: #56a5eb;
  background-color: white;
}

.btn:hover {
  cursor: pointer;
  box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
  transform: translateY(-0.1rem);
  transition: transform 150ms;
}

.btn[disabled]:hover {
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn은 → class선택자에 해당됨