CSS Diner

CSS selector 연습에 좋은 자료인 CSS Diner를 완료하고 요약 및 답안을 정리하려고 한다. CSS Diner는 코드로만 보면 이해가 쉽게 되지 않는 부분을 visual aid를 가미하여 좀 더 쉽고 재미있게 CSS selector를 공부할 수 있게 도와준다.

CSS Diner는 총 32단계로 나뉘어져 있다.

https://flukeout.github.io/

Level 1: Type selector

CSS selector 중 html의 tag를 selecting 하는 가장 기초적인 방법이다. 이미지에 보이는 접시 둘을 모두 골라야한다. html 코드는 아래와 같다.

HTML CODE

<div class="table">
  <plate />
  <plate />
</div>

CSS CODE

plate {
}

Level 2: Type selector

Level1과 별반 다를바 없다. 위 그림에서 내가 selecting하는 element표시를 위해 빨간점을 찍은 도시락(bento)를 selecting하면 된다.

HTML CODE

<div class="table">
	<bento />
    <plate />
    <bento />
</div>

CSS CODE

bento {
}

Level 3: ID selector

Level3는 ID selector 이다. ID selector는 해당 html ID 앞에 '#'을 추가해서 selecting 한다.

HTML CODE

<div class="table">
	<plate id="fancy"/>
    <plate />
    <bento />
</div>

CSS CODE

#fancy {
}

Level 4: Descendant selector

Level4는 Descendant selector이다. 'Descendant'는 후예, 바로 '새끼' selector이다. 그림에서 접시 위의 사과를 선택하면 된다. 어미 element 적고 그 뒤에 새끼 element를 적으면 접시 위 사과가 선택된다.

HTML CODE

<div class="table">
	<bento />
    <plate >
    	<apple />
    </plate>
    <apple />
</div>

CSS CODE

plate apple {
}

Level 5: Descendant + ID selector

Level5는 Descendant와 ID selector를 같이 써보는 예제이다. 접시 위 피클 중 특성 id="fancy"가진 피클녀석을 선택하면 된다. 여기서도 Descendant와 같은 개념으로 더 큰 카테고리인 ID를 먼저 선택해준다.

HTML CODE

<div class="table>
	<bento>
    	<orange/>
    </bento>
    <plate id="fancy">
    	<pickle/>
    </plate>
    <plate>
    	<pickle/>
    </plate>
</div>

CSS CODE

#fancy pickle{
}

Level 6: Class selector

Level6 는 class selector로 그림에서 파란점이 찍힌 체리같은 사과를 선택하면 된다. 간단하다. html에서 지정한 class name 앞에 "."만 찍어서 selecting 하면 된다.

HTML CODE

<div class="table>
	<apple/>
    <apple class="small"/>
    <plate>
    	<apple class="small"/>
    </plate>
    <plate/>
</div>   

CSS CODE

.small {
}

Level 7: Combine the Class selector #1

점점 흥미로워져 가고있다. Level7에서는 class="small"을 가진 오렌지들을 선택해야한다. 여기서 조금 헷갈릴수 있는데, 정답은 element -> class를 순으로 선언을 해야한다. ".small orange" 은 틀린 답이다.

HTML CODE

<div class="table">
	<apple />
    <apple class="small"/>
    <bento>
    	<orange class="small"/>
   	</bento>
    <plate>
    	<orange>
    </plate>
    <plate>
    	<orange class="small"/>
    </plate>
</div>

CSS CODE

orange.small {
}

Level 8: Combine the Class selector #2

Level8은 Level7과 비슷한 유형이다. 그림에 보이는 도시락 안 작은 오렌지 두녀석을 선택해주면 된다. 다만, 도시락을 먼저 선언해야한다.

HTML CODE

<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>

CSS CODE

bento orange.small{
}

Level 9: Comma Combinator

Level9에서는 comma","를 사용해 한번에 관련없는 두가지 이상의 element 및 class, ID를 선택할 수 있는 selector를 배운다. 그림에서 보이는 접시 2개와 도시락 1개를 동시선택 해야한다.

HTML CODE

<div class="table">
	<pickle class="small"/>
    <pickle />
    <plate>
    	<pickle/>
    </plate>
    <bento>
    	<pickle/>
    </bento>
   	<plate>
    	<pickle/>
   	</plate>
    <pickle/>
    <pickle class="small"/>
</div>

CSS CODE

plate, bento {
}

Level 10: Universal selector

Level10에서는 모든 element를 선택하는 universal selector를 학습한다. 아주 간단하다.

HTML CODE

<div class="table">
	<apple/>
    <plate>
    	<orange class="small"/>
    </plate>
    <bento/>
    <bento>
    	<orange/>
   	</bento>
    <plate id="fancy"/>    
</div>

CSS CODE

* {
}

다음편에서 계속...