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. 앞으로 할 일 (어떻게 적용할 것인가) 🤔
필요할 때 잘 찾아서 적용하기!
도쿄에서 프론트엔드 개발자가 되기까지 스스로를 돌아보는 벨로그입니다.