가상 클래스 + 가상 요소

😄 가상 클래스

• 실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 지정해서 스타일을 지정하는 것 (싱글콜론(:) 사용)
  
  
• 가상클래스는 어떤 상태를 의미하는 것일뿐 HTML 문서 상에 있는 것이 아니다. 주의하자
  
  
• 가상 클래스를 효과적으로 사용하면 불필요한 HTML, CSS, JavaScript의 코드를 효과적으로 줄일 수 있다
  
  
• 가상 클래스는 특별한 상태를 기술, 가상 요소는 특정 부분을 스타일링

😄 code 1. 가상 클래스

/* HTML */
<div class="parent">
	<p>1</p>
	<p>2</p>
    <p>3</p>
</div>

<a href="https://www.naver.com/">네이버</a>

<input type="text" />

/* CSS */
.parent:hover {
	color: red;
}

.parent p:first-child {
    color: blue;
}

.parent p:nth-child(2) {
    color: orange;
}

.parent p:last-child {
    color: aqua;
}

.parent p:not(:first-child) {
    color: blue;
}

a:link {
	color: red;
}

a:visited {
	color: aqua;
}

input:focus {
	background-color: green;
}
	
p:active {
	color: orange;
}

:hover -> 요소에 커서 올렸을 때 스타일 지정

:first-child -> 부모의 자식 요소중에서 첫번째 요소에 스타일 지정

:nth-child(2) -> 부모의 자식 요소중에서 두번째 요소에 스타일 지정

:last-child -> 부모의 자식 요소중에서 마지막 요소에 스타일 지정

:not(:first-child) -> 부모의 자식 요소중에서 첫번째 자식 요소 제외한 나머지 자식 요소에 스타일 지정

:link -> 미방문한 링크에 스타일 지정

:visited -> 방문한 링크에 스타일 지정

:focus -> focus가 있을 때 스타일 지정

:active -> 요소를 클릭하는 순간만 스타일 지정

:checked -> 사용자가 체크박스에서 체크했을 때 스타일 지정

:disabled -> 요소가 비활성 상태일 때 스타일 지정

:enabled -> 요소가 활성화 상태일 때 스타일 지정

코드를 설명하기 위해 편의상 한꺼번에 작성했을 뿐 실제로 가상 클래스는 순서가 존재합니다. 따라서 위의 코드처럼 여러개의 가상클래스를 동시에 사용하면 가상 클래스 순서에 따라 원하지 않는 결과가 나올 수도 있으니 주의해서 사용하시길 바랍니다.

😄 가상 요소

• 존재하지 않는 요소를 가상으로 생성해준다 (더블콜론(::) 사용)
  
  
• 가상 요소는 block 요소에만 사용 할 수 있다
  
  
• 가상 클래스는 특별한 상태를 기술, 가상 요소는 특정 부분을 스타일링

가상 요소는 아래의 5가지가 있다

::before -> block 요소 앞에 내용 삽입 (content 값 필수)

::after -> block 요소 뒤에 내용 삽입 (content 값 필수)

::first-letter -> block의 첫번째 문자 선택

::first-line -> block의 첫 줄 선택

::selection -> 사용자가 드래그로 선택한 block 전체 or 일부 선택

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍