[HTML/CSS] pseudo-class로 인터랙티브 버튼 만들기

🐳Coding apple HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, 고급 animation 까지 강의를 보고 정리한 글입니다 🐳

💫 Pseudo-class 셀렉터

.btn:hover {
  background : chocolate;/*마우스를 올려놓을 때*/
}
.btn:focus {
  background : red;/*클릭 후 계속 포커스 상태일 때*/
}
.btn:active {
  background : brown;/*클릭 중일 때*/
}

pseudo-class : 여러 상태에 따른 스타일 지정 가능

• pseudo-class 종류

:any-link/*방문 전, 방문 후 링크 한번에 선택할 때*/
:playing/*동영상, 음성이 재생중일 때*/
:paused/*동영상, 음성이 정지시*/
:autofill/*input의 자동채우기 스타일*/
:disabled/*disabled된 요소 스타일*/
:checked/*체크박스나 라디오버튼 체크되었을 때*/
:blank/*input이 비었을 때*/
:valid/*이메일 input 등에 이메일 형식이 맞을 경우*/
:invalid/*이메일 input 등에 이메일 형식이 맞지 않을 경우*/
:required/*필수로 입력해야할 input의 스타일*/
:nth-child(n)/*n번째 자식 선택*/
:first-child/*첫째 자식 선택*/
:last-child/*마지막 자식 선택*/

• hover, focus, active 스타일 순서

1. hover
2. focus
3. active

• <input> 사용

input:focus {
  border : 2px solid red;
}

<input>에 커서가 찍혀있을 때 <input>에 스타일을 주고 싶을 때 사용

• <a> 사용

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

text-decoration : none : 링크의 밑줄 제거