CSS 다이너

당신은 CSS 선택자를 배우러 방금 왔습니다! 선택자들은 스타일을 적용하기 위한 요소를 선택할 때 쓰이는 방법입니다.

p {
   margin-bottom: 12px;
}

여기, "p"가 선택자입니다. ((모든) <p> 요소를 선택합니다.) 그리고 margin-bottom 스타일이 적용됩니다.

게임을 플레이하려면, CSS 선택자를 아래에 입력하여 table 위의 올바른 음식을 선택해주세요. 만일 당신이 올바른 것을 골랐다면 당신은 다음 레벨로 넘어가게 됩니다.

각 음식들에 마우스 커서를 올리면 그것들의 HTML 마크업 소스를 보실 수 있습니다.

선택자를 잘 써서 올바른 음식을 고르는 걸 도와주세요! →

style.css

CSS 편집기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

enter

{
/* CSS 스타일은 여기에 적히게 됩니다. */
}

/*
넘어가고 싶은 레벨을 적으세요.
예 → "5"를 적으면 레벨 5로 넘어갑니다.
*/

table.html

HTML 뷰어

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Made by @flukeout — come say hi!

Have feedback or questions? Please file an isssue on the Github repo.

레벨 선택