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

๊ทธ๋ฆฌ๋“œ(Grid) ํ•ต์‹ฌ์ด๋ก  ๋ฐ ์‹ค์ „ ํ™œ์šฉ

์ตœ๊ณ ์˜ ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ ์ œ์ž‘ ๋ฐฉ์‹, CSS ๊ทธ๋ฆฌ๋“œ~!! ๊ทธ๋ฆฌ๋“œ(Grid) ํ•ต์‹ฌ์ด๋ก  ๋ฐ ์‹ค์ „ ํ™œ์šฉ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด์„œ CSS ๊ทธ๋ฆฌ๋“œ๋ฅผ ์™„๋ฒฝํ•˜๊ฒŒ ์ดํ•ดํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ํ•ต์‹ฌ์ด๋ก ์„ ํ™œ์šฉํ•œ ๋‹ค์–‘ํ•œ ์‹ค์ „ ์˜ˆ์ œ๊ฐ€ ์žˆ์œผ๋‹ˆ ์‹ค๋ฌด ํ™œ์šฉ์„ ์œ„ํ•œ ์ถฉ๋ถ„ํ•œ ์—ฐ์Šต๋„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๋“œ ํ•ต์‹ฌ์ด๋ก ์€ ์˜์ƒ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ PDF ๊ต์žฌ๋กœ ๋‹ค์šด๋ฐ›์œผ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ค‘๊ธ‰ ํผ๋ธ”๋ฆฌ์…”๊ฐ€ ๋˜๊ธฐ ์œ„ํ•œ ํ•„์ˆ˜ ์ฝ”์Šค์ธ CSS ๊ทธ๋ฆฌ๋“œ ํ•ต์‹ฌ์ด๋ก ๊ณผ ์‹ค์ „ ํ™œ์šฉ์„ ์ตํžˆ์‹œ๋ฉด ์ทจ์—…๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํผ๋ธ”๋ฆฌ์…”๋กœ์„œ ์‹ค๋ฌด์—์„œ ์ถฉ๋ถ„ํ•œ ๊ฒฝ์Ÿ๋ ฅ์„ ๊ฐ€์ง€์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

(4.8) ์ˆ˜๊ฐ•ํ‰ 26๊ฐœ

์ˆ˜๊ฐ•์ƒ 349๋ช…

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

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

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

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

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

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

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

css-nesting-content-01.png

 

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

โ‚ฉ38,500