강의

멘토링

로드맵

Inflearn brand logo image

인프런 커뮤니티 질문&답변

hanyn님의 프로필 이미지
hanyn

작성한 질문수

풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

모던 HTML/CSS/VanillaJS+ES6 로 상용화도 가능한 반응형 모던 웹페이지 만들기3

:hover 와 ::after (콜론 하나와 두개 차이?)

작성

·

930

0

:hover 처럼 콜론 하나를 쓰는 것도 있고

::after 로 콜론 두개를 쓰는 것도 있던데

어떤 차이가 있는건가요 ?? 의미가 있는지 궁금합니다.

답변 1

0

안녕하세요. 답변 도우미입니다.

CSS에서 콜론(:)을 한 번 사용하는 것과 두 번 사용하는 것(::)은 다음과 같은 세부적인 차이점이 있습니다.

  1. 단일 콜론 :: 단일 콜론은 CSS1 및 CSS2에서 정의된 가상 클래스(pseudo-classes)를 나타내는 데 사용됩니다. 가상 클래스는 문서의 특정 부분을 선택하며, 해당 부분의 상태나 위치 등에 따라 스타일을 적용합니다. 예를 들어, :hover는 마우스 포인터가 요소 위에 있을 때 적용되는 스타일을 정의합니다.

  2. 이중 콜론 ::: 이중 콜론은 CSS3에서 도입되었으며 가상 요소(pseudo-elements)를 나타냅니다. 가상 요소는 문서의 특정 부분이 아니라, 문서의 일부를 생성하거나 선택하는 데 사용됩니다. 예를 들어, ::after는 선택한 요소의 내용 뒤에 콘텐츠를 삽입합니다.

감사합니다.

hanyn님의 프로필 이미지
hanyn

작성한 질문수

질문하기