CSS - 의사 클래스
의사 클래스는 무엇인가요?
안녕하세요, 미래의 CSS 마법사 여러분! 오늘 우리는 CSS 의사 클래스의 마법의 세계로 뛰어들어 보겠습니다. 이 어려운 용어에 겁먹지 마세요 - 정말 복잡하지 않습니다. 사실, 한 번 익숙해지면, 의사 클래스를 마치 프로처럼 사용할 수 있을 거예요!
그렇다면 의사 클래스는 정확히 무엇인가요? 상상해 보세요, webpage에서 요소를 그들의 상태나 조건에 따라 스타일링할 수 있는 초능력이 있다면 어떨까요? 바로 의사 클래스가 하는 일입니다! 사용자가 요소 위에 올 때, 첫 번째 자식 요소인지, 혹은 페이지의 언어는 무엇인지와 같은 것을 기반으로 스타일을 적용할 수 있습니다.
문법
구체적인 의사 클래스에 들어가기 전에, 문법을 간단히 살펴보겠습니다. 실제로 매우 간단합니다:
셀렉터:의사 클래스 {
프로퍼티: 값;
}셀렉터 뒤에 있는 콜론 (:)을 보세요? 이게 바로 의사 클래스를 사용하고 있음을 알 수 있습니다. 쉽죠?
의사 클래스 Hover
가장 흔하고 재미있는 의사 클래스 중 하나인 :hover부터 시작해 보겠습니다. 이 작은 보석은 사용자가 마우스를 요소 위에 올 때 스타일을 변경할 수 있게 해줍니다. 마법 같죠!
<button class="my-button">Hover을 해보세요!</button>.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.my-button:hover {
background-color: lightblue;
color: black;
}이 예제에서, 버튼은 처음에 파랑색과 하얀 텍스트로 시작합니다. 하지만 마우스를 올리면 - 푸른색으로 변합니다! 黑色 텍스트로 변합니다. 이제 직접 시도해 보세요!
의사 클래스 Active
다음은 :active 의사 클래스입니다. 이 의사 클래스는 사용자가 버튼과 같은 요소를 활성화할 때 발생합니다.
<button class="my-button">Click을 해보세요!</button>.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.my-button:active {
background-color: darkblue;
transform: scale(0.95);
}이제 버튼을 누르고 있을 때, 파랑색으로 변하고 약간 축소됩니다. 버튼이 "Hey, 나는 클릭당하고 있어!"라고 말하는 것 같죠!
의사 클래스 Focus
:focus 의사 클래스는 접근성을 향상시키는 데 특히 유용합니다. 요소가 포커스를 받을 때 적용됩니다. 사용자가 입력 필드를 클릭하거나 탭할 때 발생할 수 있습니다.
<input type="text" class="my-input" placeholder="무언가를 입력하세요...">.my-input {
border: 2px solid #ccc;
padding: 5px;
}
.my-input:focus {
border-color: blue;
outline: none;
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}이 CSS를 사용하면 입력 필드가 포커스를 받을 때 파랑색 테두리와 부드러운 파랑색 광沢를 가집니다. 사용자를 양식으로 안내하는 좋은 방법입니다!
의사 클래스 nth Child
이제 :nth-child() 의사 클래스로 좀 더 복잡한 스타일을 살펴보겠습니다. 이 의사 클래스는 형제 요소 그룹 내에서의 위치에 따라 요소를 선택할 수 있습니다.
<ul class="my-list">
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
<li>네 번째 항목</li>
<li>다섯 번째 항목</li>
</ul>.my-list li:nth-child(odd) {
background-color: #f2f2f2;
}
.my-list li:nth-child(3n) {
color: blue;
}이 예제에서, 우리는 모든 홀수 번째 목록 항목에 연한 회색 배경을 적용하고, 각 3번째 항목에 파랑색 텍스트를 적용합니다. 목록에 패턴을 만드는 것 같죠!
의사 클래스 First-Child
:first-child 의사 클래스는 형제 요소 그룹 중 첫 번째 요소를 선택합니다. 목록의 첫 번째 항목이나 기사의 첫 번째段落에 특별한 대우를 주는 데 유용합니다.
<div class="container">
<p>저는 첫 번째段落입니다!</p>
<p>저는 일반段落입니다.</p>
<p>저도 마찬가지입니다.</p>
</div>.container p:first-child {
font-weight: bold;
color: blue;
}이제 첫 번째段落이 나머지段落과 차별화됩니다. 첫 번째 요소에 VIP 패스를 주는 것 같죠!
의사 클래스 Last-Child
last-child 의사 클래스는 first-child의 반대입니다. 형제 요소 그룹 중 마지막 요소를 선택합니다.
<ul class="my-list">
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
<li>마지막 항목!</li>
</ul>.my-list li:last-child {
font-style: italic;
color: green;
}이 CSS를 사용하면 목록의 마지막 항목이 특별한 녹색과 이탤릭 스타일을 가집니다. 것을 마무리하는 좋은 방법입니다!
의사 클래스 Lang
lang 의사 클래스는 좀 더 특수화된 것입니다. 문서나 요소의 언어에 따라 요소를 선택할 수 있습니다.
<p lang="en">Hello, World!</p>
<p lang="fr">Bonjour, le Monde!</p>
<p lang="es">¡Hola, Mundo!</p>p:lang(en) {
color: blue;
}
p:lang(fr) {
color: red;
}
p:lang(es) {
color: green;
}이 CSS는 각 인사말을 그 언어에 따라 색칠합니다. 웹사이트에 다국어 색코드를 만드는 것 같죠!
의사 클래스 Not
마지막으로 :not() 의사 클래스를 살펴보겠습니다. 이 의사 클래스는 지정된 셀렉터와 일치하지 않는 요소를 선택합니다.
<div class="container">
<p>저는段落입니다.</p>
<p class="special">저는 특별한段落입니다!</p>
<p>저는 또 다른段落입니다.</p>
</div>.container p:not(.special) {
color: gray;
}이 경우, "special" 클래스를 가진段落을 제외한 모든段落이 회색으로 칠해집니다. "이것을 제외하고 모든 것을 스타일링하라"고 말하는 것 같죠!
CSS 의사 클래스 목록
CSS에는 많은 의사 클래스가 더 있습니다. 여기 몇 가지 흔한 의사 클래스 목록을 제공합니다:
| 의사 클래스 | 설명 |
|---|---|
| :hover | 마우스가 올 때 요소를 선택합니다 |
| :active | 활성화 중인 요소를 선택합니다 |
| :focus | 포커스를 가진 요소를 선택합니다 |
| :nth-child() | 형제 요소 그룹 내에서의 위치에 따라 요소를 선택합니다 |
| :first-child | 첫 번째 자식 요소를 선택합니다 |
| :last-child | 마지막 자식 요소를 선택합니다 |
| :lang() | 언어에 따라 요소를 선택합니다 |
| :not() | 지정된 셀렉터와 일치하지 않는 요소를 선택합니다 |
| :link | 방문하지 않은 링크를 선택합니다 |
| :visited | 방문한 링크를 선택합니다 |
| :checked | 체크된 입력 요소를 선택합니다 |
| :disabled | 비활성화된 요소를 선택합니다 |
| :empty | 자식 요소가 없는 요소를 선택합니다 |
이제 여러분은 CSS 의사 클래스의 세계를 여행했고, 기본에서 좀 더 고급 기술에 이르기까지 다양한 방법을 배웠습니다. 이를 습득하는 열쇠는 연습입니다. 따라서 자신의 프로젝트에서 이러한 의사 클래스를 실험해 보세요. 얼마 지나지 않아 다양한 사용자 작업에 반응하는 동적인 웹사이트를 만들 수 있을 것입니다. 행복하게 코딩하세요!
Credits: Image by storyset