CSS에서 :과::의 차이점은 무엇입니까?

나는 정보가 내 뇌에 머물기 전에 "CSS에서 :와::의 차이점"을 검색하는 데 몇 년을 보냈습니다. 익숙한 소리? 그렇다면 이 포스트는 당신을 위한 것입니다.

첫 번째: 이 블로그 게시물의 제목에 대한 빠른 답변이 필요한 경우 더 이상 볼 필요가 없습니다!

:는 :visited 또는 :hover와 같은 의사 클래스를 나타냅니다.

::는 ::first-of-type 또는 ::after와 같은 의사 요소용입니다.

더 자세한 설명이 필요하면 몇 가지 예를 살펴보겠습니다.

"pseudo"은(는) 무슨 뜻인가요?

의사라는 단어의 영어 정의는 "가짜"또는 "진짜가 아님"입니다. 그렇다면 가짜 클래스와 가짜 요소는 도대체 무엇을 의미할까요? 의사 클래스 및 의사 요소는 HTML에 수동으로 작성되지 않고 DOM(또는 문서 트리)에 나타나지 않지만 대신 CSS에 의해 생성됩니다!

유사 클래스란 무엇입니까?

의사 클래스를 사용하면 페이지에 작성된 HTML 외부 정보(예: 사용자 상호 작용 또는 브라우저에 저장된 정보)를 기반으로 CSS의 요소를 선택할 수 있습니다. 의사 클래스는 단일 콜론(:)과 의사 클래스 이름으로 액세스할 수 있습니다.

의사 클래스를 사용하여 해당 상태에 따라 요소의 스타일을 지정할 수 있습니다. 페이지에서 방문한 링크가 다른 색상으로 표시되는 경우가 종종 있습니다. CSS에서 앵커 태그( :visited )의 의사 클래스a를 대상으로 지정하여 스타일을 지정하면 됩니다.

a:visited {
  color: #c58af9;
}

Google 검색 엔진에서 이를 실제로 관찰할 수 있습니다. google.com으로 이동하여 방문한 적이 있는 것을 검색합니다. 브라우저 개발 도구를 열고 CSS 관리자에서 a:visited 선택기를 찾으십시오.



방문한 링크와 같은 브라우저 정보의 영향을 받을 뿐만 아니라 의사 클래스는 요소 위로 마우스를 가져가거나 초점을 맞추는 것과 같은 페이지의 사용자 작업에 의해 영향(추가 또는 제거)될 수 있습니다. 다음은 Google 검색 결과에서 작동하는 :hover 의사 클래스입니다.

a:hover {
  text-decoration: underline;
}

CSS에서 대상으로 지정할 수 있는 다양한 유형의 의사 클래스에 대해 자세히 알아보려면 extensive documentation on MDN 을 확인하세요.

의사 요소는 무엇입니까?

의사 요소 선택기를 사용하면 CSS를 사용하여 DOM 요소의 특정 부분에 스타일을 지정할 수 있습니다. 의사 요소는 이중 콜론(::) 다음에 의사 요소 선택자로 액세스됩니다. 의사 클래스와 달리 의사 요소는 상태에 따라 요소의 스타일을 지정하는 데 사용할 수 없습니다.

여기에 예가 있습니다. 종종 기사 기반 웹 사이트는 수천 년 동안 존재해 온 인쇄 규칙인 "드롭 캡"을 사용하며, 텍스트 블록의 시작을 표시하기 위해 매우 큰 단일 문자를 사용합니다. CSS에서 ::first-letter 의사 요소를 대상으로 지정하여 이를 달성할 수 있습니다.

p::first-letter {
  font-size: 300%;
}

다음은 내 블로그 게시물에서 첫 문자 장식이 어떻게 보이는지 보여주는 시각적 예입니다.


::first-line 선택기를 사용하여 요소의 첫 번째 행을 대상으로 지정할 수도 있습니다.

p::first-line {
  font-size: 300%;
}

CSS 파일에서 사용할 수 있는 다른 일반적인 의사 요소 선택자는 다음과 같습니다.

::before

::after

::first-of-type

::last-of-type

및 ::placeholder .

official MDN documentation 에서 CSS에서 대상으로 지정할 수 있는 다양한 유형의 유사 요소에 대해 자세히 읽어보십시오.

그리고 그게 다야! 이번이 CSS에서 :와 ::의 차이를 구글링하는 마지막 시간이 되길 바랍니다!