1. 한 일 (교육을 통해 명확하게 알게 된 부분 | 이해한 부분 정리) 👩‍🏫

Pseudo-classes (의사 클래스) 사용하기

Pseudo-classes

선택한 요소를 특별한 상태로 만든다.
1. hover
2. active
3. focus

기술적 특징


1. hover

사용자가 마우스를 요소 위에 올렸을 때 적용

<style>
a {
  background-color: blue;
  transition: background-color .5s;
}

a:hover {
  background-color: gold;
}
/* 지정해 줄 태그 다음에 위치시킨다 */
/* 이렇게 되면  마우스가 올라갔을 때 blue->gold로 바뀐다 */
</style>

2. active

사용자가 버튼을 누르거나 링크를 클릭할 때 적용

<style>
a:active {
  background-color: yellow;
}
</style>
<body>
<a href="https://www.w3schools.com">W3schools.com</a><br>
</body>

3. focus

클릭된 input 요소를 선택함

<form>
  <label for="my-button">내 버튼: </label>
  <button id="my-button" type="button">
  	제 라벨이나 저를 클릭해보세요!
  </button>
</form>

<style>
form :active {
  color: red;
}

form button {
  background: white;
}
</style>

2. 배운 것들 (배운 점 및 시사할 점 | 느낀 점 | 어려운 점) 😎

a. 자주 사용되는 의사클래스인 hover, active, focus에 대해 볼 수 있었다. 위 태그들 외에도 MDN에 다양한 종류들이 있는 것 같으니, 필요할 때 골라 쓸 수 있도록 하자.

b.느낀 점

생각다 어렵지 않았던 의사 클래스였다. 근데 왜 이름이 의사 클래스일까

3. 앞으로 할 일 (어떻게 적용할 것인가) 🤔

필요할 때 잘 찾아서 적용하기!

profile
도쿄에서 프론트엔드 개발자가 되기까지 스스로를 돌아보는 벨로그입니다.

0개의 댓글