<h3> 동적 의사 클래스를 이용해서 링크에 이벤트효과 주기 ! </h3>
<a href="https://www.naver.com">클릭 시 네이버로 이동 합니다.</a>
<p> 마우스를 올려 놓으면 놀라운 변화가 생겨요 ! </p>
<br>

<h3> focus 가상 클래스는, 입력 요소에서 성능을 발휘해요 ! </h3>
<form>
  <input type="text" id="id" name="id" value="마우스로 이 곳을 클릭 해보세요!" />
</form>
a:link {
  color: red;
}

a:visited {
  color: gray;
}

a:hover {
  color: blue;
}

a:active {
  color: yellow;
}

p {
  background-color: beige;
  text-align: center;
  padding: 20px;
}

p:hover {
  background-color: aquamarine;
}

input {
  border: 3px solid black;
  padding: 10px;
  width: 250px;
  text-align: center;
  outline: none;
}

input:focus {
  border: 3px dashed red;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.