콜론 - 단일 콜론, 이중 콜론

단일 콜론 (:) - 의사 클래스 (pseudo-class)

- 의사 클래스는 요소의 특정 상태를 나타내는 데 사용됩니다.

- 예를 들어, :hover는 마우스 커서를 요소 위에 올렸을 때의 상태를 나타냅니다. 일반적으로 의사 클래스는 요소가 특정 상태에 있을 때 스타일을 적용하는 데 사용됩니다. 즉,  a:hover는 링크 요소에 마우스를 올렸을 때 스타일을 적용합니다.

이중 콜론 (::) - 의사 요소 (pseudo-element)

- 의사 요소는 요소의 특정 부분을 스타일링하는 데 사용됩니다.

- 예를 들어, ::before는 요소의 시작 부분에 콘텐츠를 삽입하고, ::placeholder는 입력 요소의 자리 표시자 텍스트를 스타일링합니다. 즉,  input::placeholder는 입력 필드의 자리 표시자 텍스트의 스타일을 정의합니다.

 

 

한 가지 중요한 점은, CSS3 이전에는 의사 요소도 단일 콜론을 사용했지만, CSS3부터는 의사 클래스와 의사 요소를 구분하기 위해 이중 콜론을 사용하기로 정해졌습니다. 따라서 최신 표준을 따르는 것이 좋습니다.