📌 CSS 의사 클래스 & 의사 요소 완벽 가이드
CSS 의사 클래스와 의사 요소는`1 웹 페이지에서 특정 상태나 부분에 스타일을 적용할 때 유용하게 사용됩니다. 이번 포스트에서는 이들에 대해 자세히 알아보고, 각 선택자가 실제로 어떻게 동작하는지 예시를 통해 설명하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible"
contect="IE=edge"
>
<title>의사클래스</title>
<style>
.menu{
padding: 10px;
border-bottom: 1px solid black;
}
.menu > li{
display: inline-block;
text-align: center;
}
li > a{
display: inline-block;
width: 80px;
padding: 10px;
text-decoration: none;
}
a:hover{
color: white;
background-color: gray;
font-size: 20px;
}
a:active{
color: white;
background-color: black;
font-size: 20px;
}
/* n = 자연수 2n = 2의배수, 2n-1 홀수만 선택 */
li:nth-child(3){
font-size: 20px;
}
a::first-letter{
color: red;
}
a::after{
content:"보기";
color: brown;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">사전</a></li>
<li><a href="#">뉴스</a></li>
<li><a href="#">증권</a></li>
<li><a href="#">지도</a></li>
</body>
</html>🎯 1. 의사 클래스 (Pseudo-classes)
의사 클래스는 요소의 특정 상태를 기반으로 스타일을 적용하는 선택자입니다. 예를 들어, 사용자가 마우스를 올리면 스타일을 변경하거나, 링크가 클릭되었을 때 스타일을 변경할 수 있습니다.
🔹 주요 의사 클래스
속성값설명
| :hover | 마우스 포인터가 요소에 올라가 있을 때 적용됩니다. |
| :active | 요소가 활성화(클릭)된 상태일 때 적용됩니다. |
| :focus | 요소가 포커스를 받을 때 적용됩니다. |
| :disabled | 비활성화된 요소에 적용됩니다. |
| :nth-child() | 형제 요소 중 순서에 맞는 요소를 선택합니다. |
✅ 예시 (hover)
h1:hover {
color: red; /* 마우스를 올리면 글자가 빨간색으로 변함 */
}- hover 의사 클래스는 사용자가 h1 요소 위에 마우스를 올리면, 텍스트 색상을 빨간색으로 변경합니다.
🎯 2. 의사 요소 (Pseudo-elements)
의사 요소는 선택한 요소의 특정 부분에 스타일을 적용할 때 사용합니다. 예를 들어, 요소의 첫 번째 문자나 첫 번째 줄만 스타일을 지정할 수 있습니다.
🔹 주요 의사 요소
속성값설명
| ::after | 요소의 뒤에 가상 요소를 추가합니다. |
| ::before | 요소의 앞에 가상 요소를 추가합니다. |
| ::first-line | 블록 요소의 첫 번째 줄에 스타일을 적용합니다. |
| ::marker | 목록 항목의 기호에 스타일을 적용합니다. |
| ::placeholder | 입력 필드의 플레이스홀더에 스타일을 적용합니다. |
✅ 예시 (first-line)
li::first-line {
font-size: 20px; /* 첫 번째 글자 크기를 20px로 변경 */
}- ::first-line 의사 요소는 li 요소의 첫 번째 줄에만 스타일을 적용하여, 첫 번째 글자 크기를 20px로 변경합니다.
📝 3. 의사 클래스와 의사 요소 활용 예시
🔹 hover와 active
- **hover**는 마우스 오버 상태에서 스타일을 변경하고,
- **active**는 클릭 상태에서 스타일을 변경하는 데 사용됩니다.
✅ 예시 (active)
a:active {
color: green; /* 클릭 시 링크 색상 변경 */
}🔹 ::before와 ::after
- **::before**와 **::after**는 요소의 앞이나 뒤에 콘텐츠를 추가할 때 사용됩니다. 이를 통해 아이콘이나 기타 요소를 추가할 수 있습니다.
✅ 예시 (before)
a::before {
content: "🔗"; /* 링크 앞에 아이콘을 추가 */
}🚩 4. 결론
- 의사 클래스는 상태 기반으로 스타일을 적용하며, hover, active, focus 등이 대표적입니다.
- 의사 요소는 특정 부분에 스타일을 적용하며, ::before, ::after, ::first-line 등이 있습니다.
- CSS에서 의사 클래스와 의사 요소를 활용하면 상태 변화나 특정 부분 강조 등 다양한 스타일링이 가능합니다.
이제 의사 클래스와 의사 요소를 활용하여 웹 페이지의 디자인을 더욱 동적이고 정교하게 만들어 보세요! 🎨✨
'HTML & CSS' 카테고리의 다른 글
| Chapter 3-15. 선택자 더 알아보기(CSS) (0) | 2025.03.31 |
|---|---|
| Chapter 3-14. 겹치거나 넘치는 요소다루기<z-index,overflow>(CSS) (0) | 2025.03.31 |
| Chapter 3-13. 위치 지정하기 <position>(CSS) (0) | 2025.03.31 |
| Chapter 3-12. 문서의 흐름 <float>(CSS) (0) | 2025.03.31 |
| Chapter 3-11. 요소의 유형 <display>(CSS) (0) | 2025.03.31 |