๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
HTML,CSS

[๋น„์ „๊ณต์ž์˜ ๊ฐœ๋ฐœ๊ณต๋ถ€] HTML ๊ธฐ์ดˆ_CSS ์„ ํƒ์ž(selector) ์—ฐ์Šต-์ ‘์‹œ ์„ ํƒํ•˜๊ธฐ ๊ฒŒ์ž„(CSS Diner), ์ด๊ฑฐ ๋„๋Œ€์ฒด ์–ด๋–ป๊ฒŒ ํ•˜๋Š”๊ฑฐ์•ผ?

by ๋‰ด์ชผ๋ฏธ 2023. 3. 8.

CSS ์„ ํƒ์ž์— ์ต์ˆ™ํ•ด์ง€๊ธฐ ์œ„ํ•œ ์žฌ๋ฐŒ๋Š” ๊ฒŒ์ž„์ด ์žˆ๋‹ค. 

๊ฒŒ์ž„์˜ ๋ฌธ์ œ๋Š” ์ด 32๊ฐœ์˜ ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š”๋ฐ 

๋‚˜๋Š” ... 13์—์„œ ๋ง‰ํž˜....ใ… ใ… ใ… ใ… ใ…  ๋ˆ„๊ฐ€์ข€ ๋„์™€์ค˜์—ฌ...

 

https://flukeout.github.io/

 

CSS Diner

A fun game to help you learn and practice CSS selectors.

flukeout.github.io

 

์„ ํƒ์ž ๊ฒŒ์ž„ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

๋งํฌ์— ๋“ค์–ด๊ฐ€๋ฉด ์›€์ง์ด๋Š” ๋ฌผ์ฒด๋ฅผ ์„ ํƒ์ž๋กœ ์„ ํƒํ•ด์•ผํ•˜๋Š”๋ฐ, 

   1. ๋…ธ๋ž€ ๋ฐ•์Šค์— ์›€์ง์ด๋Š” ๋ฌผ์ฒด์— ๋งˆ์šฐ์Šค๋ฅผ ์˜ฌ๋ฆฌ๋ฉด ์ดˆ๋ก๋ฐ•์Šค์— ํ•ด๋‹น๋˜๋Š” ์ด๋ฆ„์ด ํ•˜์–€์ƒ‰์œผ๋กœ ํ™œ์„ฑํ™” ๋จ. 

   2. ๋นจ๊ฐ„ ๋ฐ•์Šค์•ˆ์— plate๋ผ๋Š” ํƒœ๊ทธ๋ฅผ ์จ์ฃผ๋ฉด๋จ

 

๋งŒ์•ฝ ์ž˜ ๋ชจ๋ฅด๊ฒ ์œผ๋ฉด ์•„๋ž˜์˜ ์˜์ƒ์—์„œ 1๋ถ„๋งŒ์— ์„ค๋ช…ํ•ด์ค€๋‹ค ใ…‹ใ…‹ ๊ตณ๊ตณ

 

https://www.youtube.com/shorts/DNCYLyRcY5Q