πŸ’…CSS/⚑ver.0

πŸ’…Decorate from CSS : 가상 클래슀 μ„ νƒμž

4:Bee 2024. 2. 13. 13:30
728x90

이번 μ‹œκ°„μ—λŠ” κ°€μƒν΄λž˜μŠ€ μ„ νƒμž(pseudo class selector)λ₯Ό ν¬μŠ€νŒ… ν•΄λ³Ό 것이닀. 가상 클래슀 μ„ μž­μžλŠ” νŠΉμ • μƒνƒœλ‚˜ νŠΉμ§•μ„ κ°€μ§„ μš”μ†Œλ₯Ό μ„ νƒν•˜κΈ° μœ„ν•΄ μ‚¬μš©λ˜λŠ” CSS μ„ νƒμžμ΄λ‹€. μ΄λŸ¬ν•œ ν΄λž˜μŠ€λŠ” μš”μ†Œμ˜ μƒνƒœλ‚˜ νŠΉμ§•μ— 따라 λ™μ μœΌλ‘œ μŠ€νƒ€μΌμ„ μ μš©ν•˜λŠ” 데 μ‚¬μš©λœλ‹€. 가상 클래슀 μ„ νƒμžλŠ” 콜둠(:)으둜 μ‹œμž‘ν•˜λ©°, ν•΄λ‹Ή μš”μ†Œμ˜ μƒνƒœλ‚˜ νŠΉμ§•μ„ μ •μ˜ν•˜λŠ”λ° μ‚¬μš©λœλ‹€. λŒ€ν‘œμ μΈ μ˜ˆμ‹œλ‘œλŠ” hover와 같은 것듀이 μžˆλ‹€. μš°μ„  htmlνƒœκ·Έλ₯Ό μ‚΄νŽ΄λ³΄λ©΄ μ•„λž˜μ™€ κ°™λ‹€.

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="./style.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <a href="https://www.naver.com/">방문함</a>
  <a href="https://www.daum.net">λ°©λ¬Έμ•ˆν•¨</a>
  <input type="text">
</body>

</html>

이것듀을 λ¨Όμ € 클릭 ν–ˆμ„ λ•Œ λ°˜μ‘μ„ν•˜λŠ” κ°•μƒν΄λž˜μŠ€λŠ” μ•„λž˜μ™€ κ°™λ‹€.

 
a:active {
  color: green;
}
 

그리고 μš°λ¦¬κ°€ κ°€μž₯ 많이 μ‚¬μš©λ˜λŠ” hoverκΈ°λŠ₯은 μ•„λž˜μ™€ κ°™λ‹€.

 
a:hover {
  color: yellow;
}
 

aνƒœκ·Έκ°€ 선택 λ˜μ—ˆμ„ λ•Œ λ°˜μ‘μ„ν•˜λŠ” 가상 클래슀 μ„ νƒμžλŠ” focusκ°€ μžˆλ‹€.


a:focus {
  color: white;
}

그리고 방문이 λ˜μ—ˆμ„ λ•ŒλŠ” 기본적으둜 λ³΄λΌμƒ‰μ΄μ§€λ§Œ 이λ₯Ό λ³€κ²½ν•˜κΈ° μœ„ν•΄μ„  visitedλ₯Ό μ‚¬μš©ν•˜λ©΄ λœλ‹€.

 
a:visited {
  color: red;
}
 

λ§ˆμ§€λ§‰μœΌλ‘  링크가 κ±Έλ € μžˆλŠ” aνƒœκ·ΈλŠ” νŒŒλž€μƒ‰μœΌλ‘œ ν‘œκΈ°κ°€ λ˜λŠ”λ° 이것을 λ³€κ²½ν•˜κΈ° μœ„ν•΄μ„  linkλ₯Ό μ‚¬μš©ν•˜λ©΄ λœλ‹€.

 
a:link {
  color: black;
}
 

μΆ”κ°€μ μœΌλ‘œ inputνƒœκ·Έμ— focusλ₯Ό μ‚¬μš©ν•˜λ©΄ 값을 κΈ°μž…ν•˜λŠ” ꡬ간이 계속 μ„ νƒλ˜μ–΄ μžˆλ‹€ μΈμ‹ν•œλ‹€. μ•„λž˜ μ½”λ“œλ₯Ό μ‚¬μš©ν•˜λ©΄ inputνƒœκ·Έκ°€ 선택 λ˜μ—ˆμ„ λ•Œ λ°•μŠ€ μ•ˆμͺ½μ€ κ²€μ€μƒ‰μœΌλ‘œ 변경될 것이닀.

 

input:focus {
  background-color: black;
  color: white;
}
 

 

728x90