Pseudo-class

pseudo class?

• CSS 의사 클래스(가상클래스, pseudo class)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태일 때 만족한다.
• 선택하고자하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용

pseudo class 문법

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

.btn:hover {
  background : chocolate; /*마우스를 갖다댔을 때*/
}
.btn:focus {
  background : red; /*커서가 찍혀있을 때*/
}
.btn:active {
  background : brown; /*누르고 있을 때*/
}

a:link {
  color : red; /*방문 전 a 링크*/
}
a:visited {
  color : black; /*방문 후 a 링크*/
}

• pseudo class 셀렉터를 붙이면 여러 상태에 따른 스타일을 지정해 줄 수 있다.

• 👉 순서는 꼭 이런식으로 해야 오류없이 잘 동작한다.

• 클래스(class)나 아이디(id)에도 의사 클래스(pseudo-class)를 사용할 수 있다.

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

선택자#아이디이름:의사클래스이름 {속성: 속성값;}

• 다양한 pseudo class 확인하기 →

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

티씨피스쿨 - 의사 클래스

CSS 설계 (아키텍처)

• 기본 뼈대 스타일 따로, 가변적인 스타일 따로 클래스를 설계한다.
  • 기본 스타일은 btn이라는 클래스로 설정
  • 가변적인 부분들은 필요할 때 마다 class를 새로 만들어서 관리

.btn {
  padding : 10px;
  font-size : 18px;
  border : none;
  border-radius : 5px;
  cursor : pointer;
}

.btn-red {
  background-color : red;
  color : white;
}

.btn-blue {
  background-color : blue;
  color : white;
}