프로그래밍/HTML5

html/css 가상요소선택자와 가상클래스선택자의 차이점

콘파냐 2020. 11. 20. 22:09
반응형

선택자라는 단어의 의미를 짚어보면 타겟이 있어야 한다는 것을 알 수 있다. id선택자, class 선택자, 태크 선택자는 각 타겟들이 요소의 속성인 id, class, tag가 된다.

하지만 가상 클래스 선택자, 또는 가상요소선택자는 언뜻 이해가 안되기도 한다. 왜 가상, 요소가 붙었나..

그럼 좀 더 의미를 되새겨보자.

DOM에서 요소는 실체가 있는 것들이다. 그리고 클래스나 id는 출생년도나, 주민등록번호처럼 요소를 카테고리할 수 있는 속성으로 볼 수 있다. 분명 이 둘은 다른 것임을 알 수 있다.

가상클래스는 이런 속성이 실제로 마크업 상에 명시되지는 않은 속성을 지칭하는 말이다. 예를들어 마우스를 올려놓았을 때나 클릭을 했을 때를 하나의 속성으로 본다는 것이다. 이런 속성들은 사용자가 만드는 행동이라 그때 그때 다르다. 한마디로 동적일 수 있다. 이런 순간적인 상태를 선택하여 CSS를 적용하기 위해 가상클래스 선택자가 쓰인다.

focus, checked도 어렵지 않게 이해된다. focus 역시 사용자에 의해 포커싱되고, checked도 마찬가지다.

물론 nth-last-child는 언뜻 이해가 안될 수 있다. 곱씹어 살펴보면 class나 id로 지목한 것이 아니라 단지 마지막에 있는 상태를 지칭한다. 요소의 배치에 따라서 달라질 수 있기 때문에 id와 class로 선택하는 것과 다르다.

용어가 중요하다기 보다는 대략 이런 맥락으로 선택자가 만들어진 거구나 정도로 이해하면 좋을 듯 하다.

가상요소선택자는 더 쉽게 이해할 수 있다. 문서에 없는 요소를 만들어 선택을 한다는 것이다.

가장 자주 쓰는 선택자는 after가 있다. after 선택자는 지정된 요소에 가상요소를 자식으로 마지막에 붙인다. 이렇게 가상으로 만들어진 요소는 실제로 보이지 않더라도 css를 적용하여 특정 효과를 줄 수 있다. 다음글은 after의 가장 대표적인 사용 예로 아주 중요하다. 모르면 반드시 읽어보면 좋겠다.

프로그래밍/HTML5] - css float 속성 해제 after 대한 이해

first-letter역시 가상요소 선택자다. 예를들어

<p> 안녕하세요 </p>

위와 같은  p태그 요소에 내용의 첫 번째 글자만 선택하여 색을 바꾸고 싶다면,

이렇게 하면 된다.

안녕하세요 라는 글자는 p태그 자체가 아니라 포함된 내용이므로 가상요소 선택자가 아니면 선택할 방법이 없다.

'안'이라는 영역만 가상요소로 만들어(::first-leter 선택자로) 선택하여 색을 입힌 것이다.

그 외에 차이점

이 두 선택자는 문법적인 차이점도 있는데 콜론의 개수다. 

가상 클래스 선택자는 콜론 한개, 가상 요소 선택자는 콜론이 두개다. 


단 after와 before는 어떤 이유에선지 :콜론한개로 쓰일 수 있다.

가상 요소 선택자

가상 클래스 선택자

위에서 각 선택자의 종류들이 나와 있다.

본 블로그에서도 하나씩 정리할 것이다.


반응형