์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

HTML+CSS+JS ํฌํŠธํด๋ฆฌ์˜ค ์‹ค์ „ ํผ๋ธ”๋ฆฌ์‹ฑ(์‹œ์ฆŒ1)

HTML+CSS+JQUERY ์ดˆ์ค‘๊ธ‰ ํผ๋ธ”๋ฆฌ์‹ฑ์œผ๋กœ ๋‹ค์–‘ํ•œ ์‹ค์ „ ์˜ˆ์ œ ํ•™์Šต์„ ํ†ตํ•ด ํผ๋ธ”๋ฆฌ์‹ฑ ์ค‘๊ธ‰ ์‹ค๋ ฅ์„ ์œ„ํ•œ ํผ๋ธ”๋ฆฌ์‹ฑ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ์ตํžˆ์‹œ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ํŠนํžˆ, ๋‹ค์–‘ํ•œ ์‹ค์ „ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด ์ถฉ๋ถ„ํ•œ ์„ค๋ช…๊ณผ ์‹ค์ „ ์ž‘์—…์œผ๋กœ ๊ฒฝํ—˜ํ•˜๊ณ  ํผ๋ธ”๋ฆฌ์‹ฑ์— ์ž์‹ ๊ฐ์„ ์ƒ๊น๋‹ˆ๋‹ค. 41์‹œ๊ฐ„์ด ๋„˜๋Š” ์ถฉ๋ถ„ํ•œ ํ•™์Šต๋Ÿ‰์„ ์ œ๊ณตํ•˜๋Š” ํผ๋ธ”๋ฆฌ์‹ฑ ์ˆ˜์—…์ž…๋‹ˆ๋‹ค. (์ฝ”๋”ฉ์›์Šค ์œ ํŠœ๋ธŒ ํผ๋ธ”๋ฆฌ์‹ฑ ์ฑ„๋„์— CSS ์ค‘๊ธ‰์ด๋ก  ํ•™์Šต์„ ๋ณ‘ํ–‰ํ•˜์‹œ๋ฉด ๋”์šฑ ํšจ๊ณผ์ ์ž…๋‹ˆ๋‹ค.)

(4.9) ์ˆ˜๊ฐ•ํ‰ 178๊ฐœ

์ˆ˜๊ฐ•์ƒ 3,649๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

[๊ฐ•์˜์˜คํ”ˆ] ๋ชจ๋ฐ”์ผ ์›น ํผ๋ธ”๋ฆฌ์‹ฑ ํฌํŠธํด๋ฆฌ์˜ค with CSS Nesting

[๊ฐ•์˜์˜คํ”ˆ] ๋ชจ๋ฐ”์ผ ์›น ํผ๋ธ”๋ฆฌ์‹ฑ ํฌํŠธํด๋ฆฌ์˜ค with CSS Nesting

19ํŽ˜์ด์ง€, ์ด 22๊ฐ€์ง€ ๋‹ค์–‘ํ•œ ๋ชจ๋ฐ”์ผ ๋ ˆ์ด์•„์›ƒ ์ œ์ž‘ํ•˜๋ฉด์„œ ํผ๋ธ”๋ฆฌ์…” ์ทจ์—…๊ณผ ํผ๋ธ”๋ฆฌ์…” ์‹ค๋ฌด์—์„œ ๊ฐ€์žฅ ๊ฒฝ์Ÿ๋ ฅ์ด ์žˆ๋Š” ๋ชจ๋ฐ”์ผ ์›น ์ œ์ž‘ ๋Šฅ๋ ฅ์„ ํ–ฅ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํผ๋ธ”๋ฆฌ์…”๋กœ์„œ ๋ชจ๋ฐ”์ผ ์›น์„ ์ œ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ ๊ฑฐ์˜ ๋ชจ๋“  ์ œ์ž‘ ๋ฐฉ๋ฒ•๊ณผ ๋…ธํ•˜์šฐ๋ฅผ ๋‹ค์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋ฐ”์ผ ์›น ํผ๋ธ”๋ฆฌ์‹ฑ ์ˆ˜์—…์—์„œ ๊ฐ€์žฅ ๊ฐ•์ ์ธ ๋ถ€๋ถ„์ธ HTML ์™€์ด์–ดํ”„๋ ˆ์ž„ ์ƒ์„ธํ•œ ์ž‘์„ฑ๋ฒ•์„ ๋ชจ๋“  ํŽ˜์ด์ง€ ํ•˜๋‚˜ํ•˜๋‚˜ ์ƒ์„ธํ•˜๊ฒŒ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ•์˜๋ฅผ ํ†ตํ•ด HTML ์™€์ด์–ดํ”„๋ ˆ์ž„ ์ œ์ž‘ ๋Šฅ๋ ฅ์ด ํฌ๊ฒŒ ํ–ฅ์ƒ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํŠนํžˆ CSS ์ค‘์ฒฉ(Nesting) ๋ฐฉ์‹์„ ์ถฉ๋ถ„ํžˆ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Flex ๋ ˆ์ด์•„์›ƒ์„ ์ค‘์‹ฌ์œผ๋กœ ์ค‘์ƒ๊ธ‰ CSS ์‹ค์ „ ๋Šฅ๋ ฅ์„ ์ถฉ๋ถ„ํžˆ ๊ฐ–์ถ”์‹œ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

โœ…๊ฐ•์˜์†Œ๊ฐœ ๋ฐ”๋กœ๊ฐ€๊ธฐ : https://inf.run/yfNHF

css-nesting-content-01.png

 

๋Œ“๊ธ€
์•„์ง ๋‹ฌ๋ฆฐ ๋Œ“๊ธ€์ด ์—†์–ด์š”

โ‚ฉ46,200