HTML_CSS_008_TAG_의사(가상)클래스

의사클래스

• 특정 상태를 초점

<!-- html -->
<div></div>

/* CSS 태그에 옵션(의사)을 넣을 수 있다 */
div:option{ }

/* 마우스 커서가 올라오면 */
div:hover{ }

/* 사용자가 요소 활성화(클릭?같은) */
div:active{ }

/* 사용자가 요소 비활성화 */
div:disabled{ }

/* 사용자가 요소 포커스 */
div:focus{ }

/* 특정 요소 선택 */
div:nth-child(n){ }
div:nth-of-type(n){ }

의사요소

• 특정 부분에 초점 스타일 적용

/* 선택요소의 자식요소 맨뒤에 생성/추가 */
div::after{ }
/* 선택요소 자식요소  앞에 생성/추가 */
div::before{ }
/* 특정 요소에 특징 추가 */
div::first-line{ }
div::first-letter{ }
li::marker{ }

Ex

/* CSS */
div {
  width:10px;
  height:10px;
  background-color : red;
}
/* 마우스를 div태그 영역에 올리면 background_color가 blue로 변경된다 */
div:hover{
  background-color : blue;
}

참고사이트

• 의사 클래스
  • https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
• 의사 요소
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements