CSS : pseudo-class

🧚 가상 클래스 선택자 (Pseudo class)

	sellector	description
마우스	:hover	마우스 커서가 올라갈 때 효과가 적용됨
	:active	마우스로 '누르고 있는 상황'에서 적용돔
	:focus	폼이나 버튼을 클릭할 때 효과가 적용됨
링크	:link	링크를 클릭하지 않았을 때 효과가 적용됨
	:visited	링크를 클릭해서 접속하고 나서 효과가 적용됨
블록	:first-letter	블록형태 태그에 첫 글자에 스타일이 적용됨
	:first-line	블록형태 태그의 첫번째 줄에 스타일이 적용된다.
구조	nth-child(even, odd)	짝수 또는 홀수 번째 자식태그에 스타일을 적용함
	nth-child(1)	첫 번째 자식태그에 스타일 적용함

🔎 :hover :active

                          [원래 버튼]

                        [커서를 올렸을 때]

<div>
        <label for="jame">
            <input id="jame" type="button" value="버튼">
        </label>
    </div>

#jame:hover {
    width: 50px;
    height: 30px;
    background-color: yellow;
}

:active, :focus, :hover 의 차이가 크게 존재하지 않는다. 태그를 살짝 바꾸고 새로고침해서 확인하기 바란다.

hover:마우스를 올려놨을 때
active:클릭하고 있을 때
focus:클릭했을 때

📎 링크형식의 가상선택자

 <a href="https://www.dongguk.edu/main" target="_blank">동국대</a>
    <a href="https://www.naver.com/" target="_blank">네이버</a>

a:link {
    background-color: black;
}
a:visited {
    background-color: black;
}

위 처럼 코드를 작성할 수 있고, :link는 링크를 클릭하지 않았을 때의 기본상태에서, visited는 한 번 방문했을 때, 지정한 스타일이 적용된다.

⬜️⬛️ 블록 :first-letter, :first-line 코드 및 예시

<div class="first">
        <h2>블록입니다.</h2>
    </div>
.first::first-letter {
    background-color: aqua;
}
.first::first-line {
    background-color: aqua;
}