오늘은 재밌게 css개념을 익힐 수 있게 도와준 diner 게임에 대해 정리를 해보려고 한다.
개념으로만 알고 있던 것들을 더 섬세하게 익힐 수 있어서 입문자라면 css diner 게임을 추천한다. 😀
✔ Level 1. 두개의 접시를 선택해라. (A) 
// <제시되는 HTML 코드> <div class="table"> <plate /> <plate /> </div>CSS 답: plate
✔ Level 2. 벤또를 선택해라. (A)
<div class="table"> <bento /> <plate /> <bento /> </div>답: bento
✔ Level 3. 화려한 접시를 선택해라. (#)
<div class="table"> <plate id="fancy" /> <plate /> <bento /> </div>답: #fancy
id가 fancy인 plate만 셀렉하는 것이므로 css에선 id를#으로 표시 => #fancy 인 아이디 값을 입력.
✔ Level 4. 접시 위에 사과만 선택해라. (A B)
<div class="table"> <bento /> <plate> <apple /> </plate> <apple /> </div>답: plate>apple, plate apple
접시 위에 있는 사과만 선택해야하는 문제로,
부모요소와 자식요소가 각각 하나씩으로 짧기에 plate apple로 입력해도 되지만, 나는 plate>apple로 입력하였다.
>는 apple이 plate의 자식요소로 속해있다는 뜻이다.
크게 벌려진 쪽이 부모태그를 뜻하고 작게 좁혀지는 부분이 자식요소이다.
✔ Level 5. 가운데 화려한 접시의 피클만 선택해라. (#A B)
<div class="table"> <bento> <orange /> </bento> <plate id="fancy"> <pickle /> </plate> <plate> <pickle /> </plate> </div>답: #fancy pickle, #fancy>pickle
설명은 위와 같다.
✔ Level 6. 작은 사과들을 선택해라. (.A)
<div class="table"> <apple /> <apple class="small" /> <plate> <apple class="small" /> </plate> <plate /> </div>답: .small
class의 css 표기 형식은.이다. 따라서, 클래스가 스몰인 작은 사과만 선택하여라 하므로 답은 .small 이 된다
✔ Level 7. 작은 오렌지를 선택해라. (A.B)
<div class="table"> <apple /> <apple class="small" /> <bento> <orange class="small" /> </bento> <plate> <orange /> </plate> <plate> <orange class="small" /> </plate> </div>답: orange.small
오렌지 중에서 클래스가 small인 태그를 선택하는 것이기 때문에.
.small 은 클래스가 스몰이 모든 태그를 가리키므로 작은 사과까지 선택이 되므로 오답이다.
입력하는 순서도 중요하다. 오렌지 중, 클래스가 스몰이기 때문에 .small orange도 당연히 오답이다.
✔ Level 8. 벤또 안에 작은 오렌지만 선택해라. (A B.)
<div class="table"> <bento> <orange /> </bento> <orange class="small" /> <bento> <orange class="small" /> </bento> <bento> <apple class="small" /> </bento> <bento> <orange class="small" /> </bento> </div>답: bento orange.small
벤또 위에 있기 때문에 bento를 설정해주고 그 중에 클래스가 스몰인 오렌지 이므로 답은 bento orange.small 이다.
orange.small은 벤또가 없는 작은 오렌지도 선택되므로 오답이다.
✔ Level 9. 모든 플레이트와 벤토를 선택해라 (A, B)
<div class="table"> <pickle class="small" /> <pickle /> <plate> <pickle /> </plate> <bento> <pickle /> </bento> <plate> <pickle /> </plate> <pickle /> <pickle class="small" /> </div>답: bento, plate
bento와 plate를 선택하면 되므로 답은 위와 같다.
여기서 pickle은 plate와 bento에 속해 있는 자식요소 이므로 bento와 plate만 입력해줘도 같이 선택되어진다.
✔ Level 10. 모두 선택해라. (*)
<div class="table"> <apple /> <plate> <orange class="small" /> </plate> <bento /> <bento> <orange /> </bento> <plate id="fancy" /> </div>답: *
css에서 모든 요소를 선택하는 기호는*이다.
✔ Level 11. 모든 접시 위에 있는 것들을 선택해라. (A *)
<div class="table"> <plate id="fancy"> <orange class="small" /> </plate> <plate> <pickle /> </plate> <apple class="small" /> <plate> <apple /> </plate> </div>답: plate *
plate 위에 모든 요소를 선택해야 하므로plate *이 답이 된다.
✔ 📝 Level 12. 접시 옆에 있는 모든 사과를 선택해라. (A + B)
<div class="table"> <bento> <apple class="small" /> </bento> <plate /> <apple class="small" /> <plate /> <apple /> <apple class="small" /> <apple class="small" /> </div>답: plate + apple
A + B라고 가정하였을 때,+는 A 태그 바로 뒤에 B 태그를 선택하라는 것이다.+는 자매관계에 있는 요소만 해당이 된다.
만약, A태그 바로 뒤에 B태그가 있고 중간에 다른 태그가 있고 또 A태그 바로 뒤에 B태그가 있는 것처럼,
A + B가 뒤에 다시 연속 될 시에도 포함이 된다.
예시를 들자면,<style> div+p { color:blue; } </style> <body> <div> </div> <p>안녕</p> <div> <p>하이</p> </div> <div> </div> <p>메롱</p> </body>라는 코드가 있으면 자매관계가 아닌 하이를 제외하고,
안녕과 메롱의 color는 blue로 스타일이 지정된다.
✔ 📝 Level 13. 벤토 옆에 있는 피클들을 선택해라. (A ~ B)
<div class="table"> <pickle /> <bento> <orange class="small" /> </bento> <pickle class="small" /> <pickle /> <plate> <pickle /> </plate> <plate> <pickle class="small" /> </plate> </div>답: bento ~ pickle
A ~ B라고 가정하였을 때, A 뒤에 있는 모든 B 요소를 선택한다. 이 선택자는 연속하지 않아도 되고,A + B와 유사하지만 조금 덜 엄격하다. A + B는 앞의 선택자 바로 뒤에 오는 첫 번째 요소만을 선택하지만, 이 선택자는 좀 더 관대하다. +와 또 다른 점은 이어져 있는 모든 B태그를 선택한다는 것이다.
예를 들어,<style> div~h1 { color:blue; } </style> <body> <div> </div> <h1>안녕</h1> <h1>어디가</h1> <div> <h1>하이</h1> </div> <div> </div> <h1>눈누난나</h1>이와 같은 코드가 있을 시에 blue컬러로 지정되는 h1 태그는, 안녕/어디가/눈누난나 이다.
이처럼 연속되어 있는 h1 태그 모두 선택이 되고,+와 마찬가지로 자매관계에 있는 태그만 해당되기에 하이는 포함되지 않는다.
✔ Level 14. 접시에서 직접 사과를 선택해라. (A > B)
<div class="table"> <plate> <bento> <apple /> </bento> </plate> <plate> <apple /> </plate> <plate /> <apple /> <apple class="small" /> </div>답: plate>apple
4번 풀이와 동일하다. apple은 plate의 자식요소로 속해있으므로>기호를 사용하여준다.
✔ Level 15. 제일 위의 오렌지를 선택하라. (:first-child)
<div class="table"> <bento /> <plate /> <plate> <orange /> <orange /> <orange /> </plate> <pickle class="small" /> </div>답: plate :first-child
:first-child형제 요소(sibling elements) 중 제일 첫 요소 (first) 를 나타내며,
plate의 속해있는 제일 첫 번째의 자식 orange를 선택하게 된다.
비어있는 plate에는 자식요소가 없으므로 해당되지 않는다.
✔ Level 16. 접시 위에 있는 사과와 피클을 선택하시오. (:only-child)
<div class="table"> <plate> <apple /> </plate> <plate> <pickle /> </plate> <bento> <pickle /> </bento> <plate> <orange class="small" /> <orange /> </plate> <pickle class="small" /> </div>답: plate :only-child
only-child는 외동인 요소를 의미한다.
orange는 자식요소가 두 개가 있으므로 해당되지 않고, 하나의 자식을 가지는 plate를 고르는 것이다.
✔ Level 17. 작은 사과와 피클을 선택해라. (:last-child)
<div class="table"> <plate id="fancy"> <apple class="small" /> </plate> <plate /> <plate> <orange class="small" /> <orange /> </plate> <pickle class="small" /> </div>답: .small:last-child
:last-child는 :first-child와 반대 된다고 보면 된다.
부모 밑에 혼자 있는 태그나 부모 밑에 태그 중 가장 마지막에 해당 되는 태그를 뜻한다.
---
👉 참고 사이트
