Pseudo-Element :before ::before의 차이점

Pseudo-Element :before ::before의 차이점

 

안녕하세요. 웹로드케스트입니다.

 

웹페이지 작업할 때

가상요소인 ::before, ::after 많이 사용하시죠?

세미콜론을 하나만 쓸 때도 있고 두 개를 쓸 때도 있는데 그 차이점에 대해 포스팅하겠습니다.

 

 

 

 

1. 가상요소(Pseudo-Element)란?

먼저 가상요소에 대해 잠깐 짚고 넘어갈게요.

 

Pseudo-Element 가상요소라고 부르는데, 

HTML 에서 Element는 쉽게 말해서 <h1></h1>와 같은 태그를 의미합니다.

HTML Element는 하나의 덩어리로 이뤄져 있습니다.

 

CSS에서 가상(Pseudo)으로 태그(Element)를 쓰게 된다면 

굳이 HTML 요소를 사용하지 않아도 CSS만으로 가상으로 덩어리를 만들 수 있게 됩니다.

 

 

여기서 세미콜론으로 쓰는 모양새가 Pseudo Classes랑 비슷해요.  추가 예시 남겨둘게요

 

 

Pseudo Elements와 Pseudo Classes는 달라요!

Pseudo Elements)
::before, ::after, ::first-letter, ::first-line, ::selection

Pseudo Classes)
:active, :checked, :disabled, :focus, :hover 등

 

 

 

 

2. :before, ::before의 차이점

can i use pseudo-elements

can i use 웹사이트에서 검색해봤을 때 나오는 화면입니다.

:, ::의 차이는 크로스브라우징 이슈라고도 볼 수 있어요

 

IE8 이상부터 싱글 콜론(:) 사용이 가능하고

IE9 이상부터는 더블 콜론(::) 사용이 가능해요!

 

그럼 기왕이면 IE8부터 맞추면 좋을 테니 싱글 콜론(:)을 쓰자! 라고 생각할 수도 있을 것 같은데요

single colon(:)과 double colon(::)사이에서 어떤 걸 써야 할지 고민되는 분들에게..!

 

 

W3C왈,

The double colon replaced the single-colon notation for pseudo-elements in CSS3. This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

 

위에서 예시로 설명해드린  Pseudo Elements와 Pseudo Classes 기억나시나요?

pseudo-classes가 가 (:)을 쓰고 있으니 와 구별하기 위해

pseudo-elements는 (::)을 쓰는 것이 좋습니다.

과거의 W3C 명세에서는 :, :: 구별을 두지 않아 대부분의 브라우져에서 모두 지원했다고 합니다.