[CSS] 셀렉터 난이도 있는 개념 모음(+ Dinner 게임 하는 법)

 

CSS를 쓰다보면 특정한 셀렉터를 쓰고 싶을때 어떻게 써야 할지 막힐 때가 있다.

이를 쉽고, 재밌게 배울 수가 있는 방법이 있는데 바로 css dinner 게임으로 익히는 것이다.

 

이는 깃허브에서 제공하는 무료프로그램으로

https://flukeout.github.io/

CSS Diner

위의 창을 누르면 해볼 수 있다.

 

 

게임을 하는 방법은 이렇게 가운데 문제가 뜨면 (ex plate를 골라라)

왼쪽 아래의 흰창 첫째줄에 정답인 셀렉터를 쓰고 엔터키를 누르면 된다.

 

바로 옆 검은 페이지에는 html 코드가 적혀 있으므로 이를 참고하면 되고

막힐때는 가장 오른쪽의 힌트와 설명이 적혀 있으므로 이를 보고 하면된다.

 

내가 골라야 하는 접시 또는 과일 들은 문제 바로 밑에서 흔들리고 있고,

문법이 맞지 않게 셀렉터를 작성하면 입력창이, 다른 셀렉터를 골라 입력한 거면 다른 셀렉터가 진동하므로

이를 통해 내가 잘 하고 있는지 확인 할 수 있다.

 

 

---

[풀면서 난이도 있다고 생각했던 문제모음]

 

5번 (#부모 아이디 > 자식이름으로 가능한가요?, 답은 yes)

답 : #fancy > pickle

 

부모 연산자를 고를때 태그 없이 #id로 아이디만 적어도 된다.

참고로 부모 자식 셀렉터를 고를때 꼭 '>'를 하지 않아도 정답으로 인식됐다.

이는 반대로 자식 연산자만 고를때 태그 없이 #으로만도 가능하며 이는 .class도 마찬가지였다.

 

 

12번 (특정셀렉터 바로 옆 셀렉터 하나만 고르고 싶을 때)

답 : plate + apple

 

어떤 셀렉터 바로 옆에 있는 특정 셀렉터만 고르고 싶을때는 

옆에 있었으면 하는 셀렉터 + 원하는 셀렉터 형식으로 작성해주면 된다.

이때 들었던 의문이 그럼 뭐가 옆인데? 안에 포함되어 있는 자식관계도 옆인가? 였는데

정답은 yes로 그냥 무조건 그 다음에 쓴것 (설령 자식관계라도) 이였다.

 

 

13번 (특정 셀렉터 바로 옆 셀렉터들을 고르고 싶을 때)

답 : bento ~ pickle

 

어떤 셀렉터 바로 옆에 있는 하나의 셀렉터가 아닌 여러개의 셀렉터를 고르고 싶을 때는

옆에 있었으면 하는 셀렉터 ~ 원하는 셀렉터들의 형식으로 작성해주면 된다.

 

 

15번 (하위에 있는 여러개의 요소 중 가장 위에 있는 요소를 고르고 싶을 때)

답 : orange:first-child

 

여러개의 같은 셀렉터가 있을때 가장 위에 있는(가장 먼저 쓴) 셀렉터를 고르고 싶을 때 

원하는 셀렉터 이름 : first-child라고 써주면 된다.

이 때 중요한 것은 ~~-child 이든 이 말을 쓰려면 얘가 부모요소가 있어야 하는 즉 자식 또는 자손요소일때 사용가능하다는 것이다. 그리고 부모 셀렉터 이름 : first-child라고 쓰기 헷갈리기 쉬운데 이는 올바르지 않은 문법으로

부모 셀렉터를 굳이 쓰고 싶다면 부모 셀렉터 하위 셀렉터 : first-child로 쓸 수 있다. 

 

 

16번 (자식 셀렉터가 하나로 유일한 셀렉터 고를 때)

답 : apple:only-child, plate pickle:only-child

 

헷갈리는게 하위요소 태그 이름 : 조건 이라는 것이다. 부모 요소를 입력하고 : child를 찾는 것은 없다.

자꾸 헷갈리는데 조심하기~~~!

 

 

17번 (하위요소 중 가장 마지막 것을 고르고 싶을 때)

답 : apple:last-child, plate orange:only-child

 

 

18번 (하위요소 중 특정한 n번을 선택하고 싶을 때)

답 : :nth-child(3)

 

중요한 것은 이 개념 또한 부모요소 안에 자식요소 중 몇번째를 고를 것이냐 이다.

그리고 앞에를 비워놓고 nth-child()를 쓸 수 있는데 그러면 알아서 부모요소를 인식하고

그 안에 자식요소를 받아들여 인식하는 것 같다. 이 때 순서는 왼쪽부터가 1이다 (0없음)

 

19번 (하위요소 중 특정한 n번을 거꾸로 세서 선택하고 싶을 때)

답 : bento:nth-last-child(3)

 

앞에서 한 nth-child()의 역순 개념. 맨 뒤에서부터 1로 세며 왼쪽으로 올 수록 +1 해진다.

그런데 솔직히 이 문제는 왜 이게 정답인지 나도 모르겠다.

 

:nth-child(3)이라고 적으면 왠지는 모르겠는데 -> 제일 위 오렌지 하나 + 1st 벤토통까지 선택된다.

bento:nth-child(2)라고 적으면 -> 코드 오류가 난다.

bento:nth-child(3)라고 적으면 -> 이게 정답이다.

 

뭔가 nth-last-child는 역순이다 보니 특정 셀렉터를 선택해도 뒤에서부터 무조건 다 세는건가?

아.. 알고보니까 이 식을 bento:nth-child()로 바꿔도 (소괄호)안에는 1이 아닌 2가 들어가야 한다.

nth-child() 또한 특정 셀렉터를 : 앞에 주어도 수를 세는 순서는 그냥 나열된 순서대로 인 것 같다.

 

 

20번 (같은 요소들 중 첫번째)

답 : apple:first-of-type

 

이렇게 되면 first-child와 first-of-type 의 차이점이 궁금해지는데

first-child는 자식요소가 나열 되어 있을때 바로 앞에 와야 하고

first-of-type은 자식요소가 나열되어있을때 바로 앞에 와도 되고 안와도 되지만

같은 타입의 셀렉터 중에서는 제일 먼저나와 있는 것을 의미한다.

 

이는 앞으로 있을 ~~-child와 ~~-of-type에서의 차이점이기도 한 것으로

~~~-child()	~~~-of-type()
모든 하위요소 중 n번째	특정 셀렉터의  요소 중 n번째

이렇게 차이가 있다.

 

21번 (해당 셀렉터 중 n번째)

답 :  :nth-of-type(even)

 

(소괄호)안에 꼭 숫자를 넣어야 한다는 법은 없다.

even -> 짝수

odd -> 홀수

를 영어로 적어주면 해당 셀렉터 중 짝수, 홀수가 나온다.