당신의 저녁은 무엇인가?

CSS 공부를 위해 추천받았던 CSS Diner를 해보았다.

문제는 생각보다 직관적이고 쉬운 편이지만, 문제를 접근하는 방법에 있어서

내가 어떤식으로 생각을 했는지를 다시 한 번 깨닫게 해줬다.

단순히 못먹는 감찔러보듯 이곳저곳 찔러보고 안되면 다시 선택하는 어리석은 짓보다는

완벽하게 CSS에서 어떤 요소를 선택하고 어떻게 할 것인가에 대한 구체적인

방안을 시각적으로 제시한 재미있는 저녁식사가 CSS Diner라고 할 수 있다.

오늘은 CSS Diner 문제 풀이를 통해 CSS의 기초를 닦아보려고 한다.

1번 문제 Select the plates

1번 문제는 생각보다 평이한 문제이다. 테이블에 놓여진 접시를 집기만 하면 된다.

접시는 이므로 이에 대한 CSS는 plate{} 이 되겠다

2번 문제 Select the bento boxes

2번 문제는 table 위에 bento, plate, bento가 놓여져있는데, 이중 bento만을 고르는 문제이다.

위의 문제처럼 를 선택만 하면 그만이기 때문에, 이에 대한 CSS는 bento{}가 될것이다.

3번 문제 Select the fancy plate

3번 문제는 plate 중에서도 테두리가 있는 plate를 고르는 것이다. html을 보면 plate의 id가 #fancy인 것을 알 수 있다. 이 plate만을 고르는 것이기 때문에 #fancy{} 가 정답이 될 것이다.

4번 문제 Select the apple on the plate

4번문제는 plate안의 apple을 골라야한다. plate의 안에 있기 때문에 하위 자손을 선택해주어야만 한다. 상속 관계에 있는 부모인 plate를 먼저 찾고, 그 이후에 apple을 찾는다. 이에 대한 CSS는 plate > apple 또는 plate apple이 될 것이다. 선택자를 쓰냐 안쓰냐의 차이다.

5번 문제 Select the pickle on the fancy plate

4번 문제와 유사하다. 단순히 div였냐, 아니면 id로 지정된것이 있냐 차이일뿐이다. #fancy 안의 pickle이므로 CSS는 #fancy pickle로 작성 할 수 있다.

6번 문제 Select the small apples

6번은 작은 사과를 담는 문제이다. apple에 class="small"을 적용하면 사과는 작아진다. 즉 classname을 호출하는 문제이다. CSS는 .small을 작성한다.

7번 문제 Select the small oranges

이번엔 작은 사과 , 오렌지 둘 다 작다. 그렇기에 앞전에서처럼 .small만 가지고는 사과까지 가지고온다. 그러면 무엇이 작은지를 서술하면 그만 아닌가? CSS는 orange.small이 될 것이다.

8번 문제 Select the small oranges in the bentos

이번에는 bento 안의 orange를 구해야 한다. bento안에 orange가 들어가있으므로, 기존의 상속관계에 놓인 순서대로 작성하면 그만이다. CSS는 bento orange.small이 될 것이다.

9번 문제 Select all the plates and bentos

plate와 bento 안에 들어있는 피클을 꺼내야 한다, 선택자를 통해 두가지 이상을 선택해야 함을 알 수 있다. 이번에는 plate와 bento 두가지를 선택해야하기 때문에 , 를 추가하여 선택자 목록으로 결합해본다. CSS는 plate, bento 가 될 것이다.

10번 문제 Select all the things!

모든 것을 다 선택해야한다. 우리가 CSS를 작성할 때 자주 사용하는 Asterisk가 이러한 목적으로 초기화를 위해 사용된다. CSS에 Asterisk 하나만으로 모든 음식들을 가져 올 수 있다.