가상 선택자 종류 - gasang seontaegja jonglyu

무아지경

그동안 별 생각없이 즐겨 사용하던 ::after, ::before (가상요소)에 대해 다시 생각하게 되었습니다.

다시 생각하게 된 계기는 아래 글에 포스팅 되어 있습니다.

https://yeoninim.tistory.com/54

[CSS] float 속성 해제 방법(overflow:hidden, ::after)

마크업을 하다 보면 float를 사용 하는 경우가 많이 있습니다. 비슷한 기능으로 Flex(Flexible Box) 가 있으나...저는 IE9버전까지 항상 생각해야 하기 때문에 사용 할 수가 없어서 float만 열심히 사용 하

yeoninim.tistory.com

어쨋든...이번 계기로 가상요소에 대해 자세히 공부하게 되었네요..

덕분에 몰랐던 선택자도 발견 하게되었습니다.

가상 요소

::first-line, ::first-letter, ::selection 이 세가지 가상요소는 처음 봤습니다.

::first-line 의 경우는 잘 사용하지 않을 것 같고 ::first-letter 의 경우는 디자인적으로 쓸일이 있을 것 같네요.

그리고 더블콜론::( ::before, ::after ) 과 싱글콜론:( :before, :after )의 차이를아시나요??

더블콜론의 경우 CSS3부터 사용 되어 왔고 싱글콜론은 CSS2까지 사용 되어왔다고 합니다.

실제로 CSS3를 지원 하지 않는 IE8의 경우는 싱글콜론만 지원된다고 합니다.

최신 기술이니 더블콜론만 사용하야여 하느냐....는 아닙니다.

저는 싱글콜론만 사용하고 있습니다. IE 구버전을 신경 써야 하기 때문에 어쩔 수 없긴 한데요.

싱글콜론은 구 버전 브라우저는 물론 최신 브라우저 까지 인식한다고 하니 IE 구 버전을 신경 쓰셔야 한다면 싱글콜론으르 사용 하셔도 될 것 같습니다.

가상클래스

:only-child 와 :only-of-type 는 저는 처음 알았습니다. 공부할 게 또 하나 늘었네요..

계층 선택자

이 중에서 형제 선택자와 인접 형제 선택자는 체크박스로 스위치모양 디자인 할 때 나 체크박스를 이용해 탭디자인을 만들때 사용 해본 경험이 있습니다.

속성 선택자

속성 선택자는 반이상은 사용 안해본 선택자 이네요. 뭔가 유용하게 쓰일 수 있을 것 같습니다.

이외에도 제가 알지 못하는 요소들이 많이 있더라구요.

검색하면서 정리가 잘 되어 있는 분의 블로그를 찾아서 좀 베껴왔습니다.

아래 주소로 가시면 더 많은 내용들이 정리 되어 있습니다.

https://webzz.tistory.com/357

[CSS] 선택자

CSS 선택자 CSS는 선택자를 통해 요소를 선택할 수 있습니다. CSS CSS는 선택자를 통해 요소를 선택할 수 있습니다. 기본 선택자 종류 예시 이름 태그 선택자 p {color:#fff;} p 태그를 선택하여 글씨 색

webzz.tistory.com