의사클래스 - only-child, only-of-type, empty, empty, root [Jquery, CSS]

공부/Jquery,CSS  2016.03.10 22:58

안녕하세요 명월입니다.

이번 포스트는 선택자 중 의사클래스인 only-child, only-of-type, empty, empty, root를 공부하겠습니다.
의사클래스는 오늘까지가 마지막인 듯 싶네요.


요즘 블로그를 재개하면서 포스트를 만들기 위해서 CSS랑 HTML태그를 다시 공부하고 있습니다. 그러면서 많이 느끼는 점이 많은데..느낀 점을 적어보면..
항상 무슨 문제가 생기고 진척이 나지 않을 때는 내가 모르는 곳에서의 문제보다는 가장 알고 있다라고 한 부분에서 문제가 나더라구요..


예로 요즘에 블로그 스킨이 엉망진창이 되서 다시 처음부터 짜고 있습니다. 그 중 사이드 메뉴바를 만드는데 처음에 자꾸 틀이 망가지고 엉망이 되더라구요..
자꾸 엄한 float와 position 속성만 들여다 보고 왜 그럴까 하루종일 분해 조립 분해 조립했네요...그런데 나중에 알고 보니 display: block 요넘 때문이었는데..
항상 단순히 display:block none만 사용하다 보니 저는 그게 당연히 화면에서 보이고 안 보이고의 차이인 줄 만 알았는데 요넘이 inline도 있고 list-item도 있고
알고 봤더니 형상을 정의하는 녀석이었네요.. 가장 잘 알고 있다고 생각한 display가 알고 보니 틀을 구성하는 데 있어서 심오한 역할을 하는 줄 몰랐네요...


그래서 잘 아는 것도 복습하는 의미로 포스트를 하고 또 보고 또 보고 하는데도 그래도 이런 실수를 하네요...그냥 오늘 작업하다가 크게 깨달은 점이 있어서 글을 남겨봅니다.


감상문은 여기까지이고 only-child, only-of-type, empty, empty, root를 공부하겠습니다.


먼저 예제를 만들어 보겠습니다.



의사클래스 예제


그리고 다음 소스를 적용을 해서 확인해 보겠습니다.



결과를 확인하고 각 선택자에 대해 설명을 하겠습니다.


의사클래스 결과


먼저 only-child의 의사 클래스는 test클래스 밑의 p태그가 하나 있는 것을 찾습니다. 그렇다면 위에서는 p가 있는 클래스 태그가 첫번째와 두번째 단락인데 그 중 두번째는 span 태그가 있기 때문에 첫번째 것맛 선택이 됩니다.
그리고 두번째의 only-of-type은 span태그의 개수를 찾는 것입니다. 즉 두번째와 세번째 단락이 span을 가지고 있으나 두번째 단락은 span이 두개를 가지고 있는 관계로 세번째 단락만 선택이 되겠네요.
empty는 자식이 값이 없는 것은 선택합니다. 여기서 주의 할 점이 단지의 속성적인 자식이 아닌 <태그>값</태그>이런 형태도 자식이 있는 것이니 이 점을 주의해야 겠습니다. 단순히 자식 노드가 없다고 자식이 없는데 선택이 안 된다고 헷갈리시면 안되겠습니다...(저만 헷갈리나요..ㅎㅎㅎㅎ)
세번째는 :root는 그냥 html과 같은 형태입니다.html를 선택하면 되는데 왜 의사 클래스로 :root가 있는 지는 의문이네요...


의사 클래스는 여기까지가 전부고 의사 클래스 이외의 상태의사, 타켓의사 클래스가 있으나 요건 조금 개념이 다르니 다음 포스트에서는 일반 선택자와 속성 선택자를 공부하겠습니다.
잘 안쓰고 헤깔리는 것 위주로 포스팅을 하려고 했는데.. 오늘 느끼는 바가 있어서 알더라도 복습하는 생각으로 선택자를 전부 포스팅을 하겠습니다.


댓글 0개가 달렸습니다.
댓글쓰기