[Frontend] CSS Diner - CSS 연습 및 답안

주재완·2024년 1월 11일

CSS frontend

Frontend

목록 보기

1/2

CSS Diner 바로가기

시작하기 전

해당 사이트는 selector 입력을 게임 형식으로 연습하는 곳이다.
원래 중괄호가 붙어 styles 명령을 수행하는데, 여기서 답안을 입력 시 뒤에 붙는 중괄호는 생략한다. 즉, 실제 답안은 여기 있는 CSS 답안에서 중괄호는 빼고 작성한다.
<tag2> 가 <tag1> 의 오른쪽 또는 아래에 있는 경우 → HTML 상에서 바로 아래 태그로 표시한다.

<tag1 />
<tag2 />

<tag2> 가 <tag1> 에 담겨 있는 경우 → HTML 상에서 태그로 감싼다.

<tag1>
	<tag2 />
</tag1>

문제 해설

1/32

plate 선택하기

HTML

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

CSS

plate {
}

2/32

bento 선택하기

HTML

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

CSS

bento {
}

3/32

fancy plate 선택하기

HTML

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

CSS

#fancy {
}

4/32

plate에 담겨있는 apple 선택하기

HTML

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

CSS

plate apple {
}

5/32

fancy plate에 담겨있는 pickle 선택하기

HTML

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

CSS

#fancy pickle {
}

6/32

small apple 선택하기

HTML

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

CSS

.small {
}

7/32

small orange 선택하기

HTML

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

CSS

orange.small {
}

8/32

bento에 담겨있는 small orange 선택하기

HTML

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

CSS

bento orange.small {
}

9/32

모든 plate & bento 선택하기

HTML

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

CSS

plate, bento {
}

10/32

모두 선택하기

HTML

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

CSS

* {
}

11/32

plate에 담겨있는 것 모두 선택하기

HTML

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

CSS

plate * {
}

12/32

plate 바로 옆 모든 apple 선택하기

HTML

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

CSS

plate + apple {
}

13/32

bento 옆에 있는 모든 pickle 선택하기

HTML

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

CSS

bento ~ pickle {
}

14/32

plate 바로 위에 있는 사과 선택하기

HTML

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

CSS

plate > apple {
}

15/32

제일 위에 있는 orange 선택하기

HTML

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

CSS

orange:first-child {
}

16/32

plate에 담겨있는 apple & pickle 선택하기

HTML

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

CSS

plate apple:only-child, plate pickle:only-child {
}

17/32

small apple & small pickle 선택하기

HTML

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

CSS

apple:last-child, pickle:last-child {
}

18/32

3번째 plate 선택하기(앞부터 1번째 항목)

HTML

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

CSS

plate:nth-child(3) {
}

19/32

1번째 bento 선택하기(뒤부터 3번째 항목)

HTML

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

CSS

bento:nth-last-child(3) {
}

20/32

1번째 apple 선택하기

HTML

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

CSS

apple:first-of-type {
}

21/32

짝수 번째 plate 선택하기

HTML

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

CSS

plate:nth-of-type(even) {
}

22/32

3번째 plate 부터 2칸 간격으로 plate 선택하기

HTML

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

CSS

plate:nth-of-type(2n+3){
}

23/32

중간 plate에 있는 apple 선택하기

HTML

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

CSS

plate apple:only-of-type {
}

24/32

마지막 orange & apple 선택하기

HTML

<div class="table">
	<orange class="small" />
	<orange class="small" />
	<pickle />
	<pickle />
	<apple class="small" />
	<apple class="small" />
</div>

CSS

orange:last-of-type, apple:last-of-type {
}

25/32

빈 bento 선택하기

HTML

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

CSS

bento:empty {
}

26/32

큰 apple 선택하기

HTML

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

CSS

apple:not(.small) {
}

27/32

누군가에게 줄(for) 것 선택하기

HTML

<div class="table">
	<bento>
		<apple class="small" />
	</bento>
	<apple for="Ethan" />
	<plate for="Alice">
		<pickle />
	</plate>
	<bento for="Clara">
		<orange />
	</bento>
	<pickle />
</div>

CSS

[for] {
}

28/32

누군가에게 줄(for) plate 선택하기

HTML

<div class="table">
	<plate for="Sarah">
		<pickle />
	</plate>
	<plate for="Luke">
		<apple />
	</plate>
	<plate />
	<bento for="Steve">
		<orange />
	</bento>
</div>

CSS

plate[for] {
}

29/32

Vitaly에게 줄(for) 것 선택하기

HTML

<div class="table">
	<apple for="Alexei" />
	<bento for="Albina">
		<apple />
	</bento>
	<bento for="Vitaly">
		<orange />
	</bento>
	<pickle />
</div>

CSS

[for="Vitaly"] {
}

30/32

Sa- 로 시작하는 사람에게 줄(for) 것들 선택하기

HTML

<div class="table">
	<plate for="Sam">
		<pickle />
	</plate>
	<bento for="Sarah">
		<apple class="small" />
	</bento>
	<bento for="Mary">
		<orangle />
	</bento>
</div>

CSS

[for^="Sa"] {
}

31/32

-ato 로 끝는 사람에게 줄(for) 것들 선택하기

HTML

<div class="table">
	<apple class="small" />
	<bento for="Hayato">
		<pickle />
	</bento>
	<apple for="Ryota" />
	<plate for="Minato">
		<orange />
	</plate>
	<pickle class="small" />
</div>

CSS

[for$="ato"] {
}

32/32

obb 가 포함된 사람에게 줄(for) 것들 선택하기

HTML

<div class="table">
	<bento for="Robbie">
		<apple />
	</bento>
	<bento for="Timmy">
		<pickle />
	</bento>
	<bento for="Bobby">
		<orangle />
	</bento>
</div>

CSS

[for*="obb"] {
}

주재완

언제나 탐구하고 공부하는 개발자, 주재완입니다.

다음 포스트