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

๋ฆฌ๋ฒ ํ•˜์–€์˜ CSS3 ๊ธฐ์ดˆ์‹ค๋ฌด - 2024

CSS ์‹ค๋ฌด 20๋…„์ด์ƒ ๊ฒฝ๋ ฅ์„ ๊ธฐ๋ฐ˜์œผ๋กœํ•œ CSS ๊ธฐ์ดˆ ๊ฐ•์˜์— ์˜ค์‹  ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค! ์ด ๊ฐ•์˜๋Š” ์›น ํผ๋ธ”๋ฆฌ์…”์™€ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ์„ฑ์žฅํ•˜๊ธฐ ์œ„ํ•œ ์ฒซ ๊ฑธ์Œ์„ ๋‚ด๋”›๋Š” ์—ฌ๋Ÿฌ๋ถ„์„ ์œ„ํ•ด ์ค€๋น„๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

10๋ช… ์ด ์ˆ˜๊ฐ•ํ•˜๊ณ  ์žˆ์–ด์š”.

๋‚œ์ด๋„ ์ž…๋ฌธ

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

์‹ค์Šต ์ค‘์‹ฌ
์‹ค์Šต ์ค‘์‹ฌ
์‹ค์Šต ์ค‘์‹ฌ
์‹ค์Šต ์ค‘์‹ฌ

์ƒˆ์†Œ์‹

5 ๊ฐœ

  • aspect.png

    ์ •๋ง ์˜ค๋žœ๋งŒ์— ์˜์ƒ์ด ์—…๋ฐ์ดํŠธ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค ^^.
    aspect-ratio๋Š” ์ข…ํšก๋น„๋ฅผ ์˜๋ฏธํ•˜๋Š”๋ฐ์š”. ์š”์ฆ˜ ํ”„๋กœ์ ํŠธ ํ•˜๋‹ค๋ณด๋‹ˆ ๊ฐ„๊ฐ„ํžˆ ๋‚˜์˜ค๋Š” ๋…€์„์ด๊ธฐ๋„ํ•˜๊ณ 
    ์‚ฌ์‹ค ๋น ์ €์„œ๋Š” ์•ˆ๋˜๋Š” ์†์„ฑ์ค‘์— ํ•˜๋‚˜์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค.

    ๋Œ€๋ถ€๋ถ„ ์ž‘์—…์ž๋ถ„๋“ค์ด ์ž˜ ์‚ฌ์šฉํ•˜์‹ค๊ฑฐ๋ผ ์ƒ๊ฐ์ด ๋“ญ๋‹ˆ๋‹ค๋งŒ, ํ•ด๋‹น ์˜์ƒ์„ ๋ณด์‹œ๊ฒŒ๋˜๋ฉด, ์•Œ์ง€๋ชปํ–ˆ๋˜ ๋ช‡๊ฐ€์ง€ ๋น„๋ฐ€ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์‹ค๊ฑฐ์—์š”. ๊ผญ ์ •์ฃผํ–‰ ํ•˜์‹œ๊ณ , ํ”„๋กœ์ ํŠธ์— ๋„์›€๋˜๊ธฐ์‹ค ๋ฐ”๋ž๋‹ˆ๋‹ค.

    ๊ทธ๋Ÿผ ์—ด๊ณตํ•˜์‹œ๊ณ ! ๋‹ค์Œ์˜์ƒ์—์„œ ๋ต™๊ฒ ์Šต๋‹ˆ๋‹ค.
    ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

    0
  • DALLยทE 2024-09-18 18.39.40 - A thumbnail image with a 16_9 aspect ratio, featuring the theme of CSS scope. The image should include visual elements such as a code snippet showing .webp

    CSS์˜ ํฐ ๋‹จ์ ์ค‘์— ํ•˜๋‚˜๋Š” ์„ ํƒ์ž์˜ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.
    ์„ ํƒ์ž ํ•˜๋‚˜๊ฐ€ ์ „์—ญ์œผ๋กœ ์ „๋‹ฌ๋˜๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ์ฃ , ์ด๊ฒƒ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์„ ํƒ์ž์˜ ์ ์ˆ˜๋‚˜ ๋‹ค๋ฅธ ํด๋ž˜์Šค๋ช…์„ ์ƒ๊ฐํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

    ๋˜๋‹ค๋ฅธ ๋‹จ์ ์ค‘์— ํ•˜๋‚˜๋Š” ํด๋ž˜์Šค๋ช…์˜ ๊ธธ์ด ์ž…๋‹ˆ๋‹ค. ์ €๋Š” ์ด์ œ๊นŒ์ง€ BEM ๋ฐฉ๋ฒ•๋ก ์œผ๋กœ ํด๋ž˜์Šค๋„ค์ด๋ฐ์„ ํ•˜๊ณ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ @scope๋ฅผ ๋„์ž…ํ•˜๋ฉด์„œ ๊ทธ๋Ÿฐ ์ผ์ด ์‚ฌ๋ผ์ ”์ฃ ..

    ์ด๋Ÿฌํ•œ ๋ฌธ์ œ์ ์„ ๋ณด์™„ํ•  ์Šค์ฝ”ํ”„์— ๋Œ€ํ•œ ์˜์ƒ์„ ์ฐธ๊ณ ํ•˜์„ธ์š”.

    0
  • image.png

     

    ์•ˆ๋…•ํ•˜์„ธ์š”. ๋ฆฌ๋ฒ ํ•˜์–€์ž…๋‹ˆ๋‹ค.

    CSS๋ฅผ ํ•˜๋‹ค๋ณด๋ฉด z-index์— ๋Œ€ํ•œ ์ŠคํŠธ๋ ˆ์Šค๊ฐ€ ๋”๋Ÿฌ ์žˆ์Šต๋‹ˆ๋‹ค.
    ๋Œ€ํ‘œ์ ์œผ๋กœ -1๊ฐ’ ๋•Œ๋ฌธ์— ๋ถˆํ•„์š”ํ•œ html์„ ์ถ”๊ฐ€ ๊ตฌ์„ฑํ•ด์•ผ ๋˜๋‹ค๋Š” ๊ฒƒ์ด์ฃ .

    ์ด๋ฅผ ๋ณด์™„ํ•˜๋Š” ์ฝ”๋“œ๊ฐ€ isolation์ž…๋‹ˆ๋‹ค.
    ํ•ด๋‹น ์˜์ƒ์„ ๋ณด์‹œ๋ฉด์„œ ์–ด๋–ป๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์„์ง€,
    ์•Œ์•„๋ณด์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค. ^^.

    0
  • ๋ฆฌ๋ฒ ํ•˜์–€๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ๏ฝฅ

    ์ˆ˜์ •๋จ

    ์•ˆ๋…•ํ•˜์„ธ์š”. ๋ฆฌ๋ฒ ํ•˜์–€์ž…๋‹ˆ๋‹ค.

    CSS ์ตœ์‹ ์ŠคํŽ™์ค‘ ํ•˜๋‚˜์ธ light-dark() ํ•จ์ˆ˜์˜์ƒ์„ ์ถ”๊ฐ€ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๊ณผ๊ฑฐ์—๋Š” ๋‹คํฌ๋ชจ๋“œ๋ฅผ ํ•˜๊ธฐ์œ„ํ•ด @media๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ง„ํ–‰ํ–ˆ์—ˆ๋Š”๋ฐ, light-dark()ํ•จ์ˆ˜๋กœ ์ƒ‰์ƒ ๊ด€๋ฆฌ๋ฅผ ์ง๊ด€์ ์œผ๋กœ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋””์ž์ด๋„ˆ์™€ ํ˜‘์—…ํ•˜์—ฌ ์ƒ‰์ƒ ๊ฐ€์ด๋“œ๋งŒ ์ž˜ ๋‚˜์™€์ค€๋‹ค๋ฉด ์ˆœ์กฐ๋กœ์šด ํ”„๋กœ์ ํŠธ๊ฐ€ ์˜ˆ์ƒ๋ ๊ฒƒ ๊ฐ™๋„ค์š”.

    ๋‹คํฌ๋ชจ๋“œ์— ๊ด€์‹ฌ์žˆ๋Š” ๋ถ„์ด์‹œ๋ผ๋ฉด ์ด๋ฒˆ ๊ฐ•์˜ ๋†“์น˜์ง€ ๋ง๊ณ  ๊ผญ ์‹œ์ฒญํ•ด์ฃผ์„ธ์š”.

    ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

     

    0
  • CSS3 Basic Online ๊ธฐ์ดˆ์‹ค๋ฌด ์˜จ๋ผ์ธ๊ณผ์ •์— ์ƒˆ๋กœ์šด BEM(Block, Element, Modifier) ์˜์ƒ์ด ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค. ์ด ์˜์ƒ์—์„œ๋Š” BEM ๋ฐฉ๋ฒ•๋ก ์˜ ๊ธฐ๋ณธ ๊ฐœ๋…๋ถ€ํ„ฐ ์‹ค์ œ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๊นŒ์ง€ ์ž์„ธํžˆ ๋‹ค๋ฃน๋‹ˆ๋‹ค. ํŠนํžˆ, BEM์„ ํ†ตํ•ด ์ฝ”๋“œ์˜ ์œ ์ง€ ๋ณด์ˆ˜์„ฑ์„ ๋†’์ด๊ณ , ํ˜‘์—… ์‹œ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ค‘์ ์ ์œผ๋กœ ์„ค๋ช…ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

    ์ด๋ฒˆ ์˜์ƒ์˜ ์ฃผ์š” ๋‚ด์šฉ:

    • BEM ๊ธฐ๋ณธ ๊ฐœ๋…: Block, Element, Modifier์˜ ์ •์˜์™€ ์—ญํ• 

    • BEM ๋„ค์ด๋ฐ ๊ทœ์น™: ์ฝ”๋“œ ์˜ˆ์‹œ๋ฅผ ํ†ตํ•ด BEM ๋„ค์ด๋ฐ ์ปจ๋ฒค์…˜ ์ดํ•ดํ•˜๊ธฐ

    • ์‹ค์ „ ์ ์šฉ: ์‹ค์ œ ํ”„๋กœ์ ํŠธ์—์„œ BEM์„ ํ™œ์šฉํ•œ ์‚ฌ๋ก€ ๋ถ„์„

    • ์žฅ์ ๊ณผ ๋‹จ์ : BEM ์‚ฌ์šฉ์˜ ์žฅ๋‹จ์  ๋ถ„์„

    CSS ํ•™์Šต์— ๊ด€์‹ฌ ์žˆ๋Š” ๋ถ„๋“ค์ด๋ผ๋ฉด ์ด๋ฒˆ BEM ์˜์ƒ์„ ํ†ตํ•ด ๋งŽ์€ ๋„์›€์„ ๋ฐ›์œผ์‹ค ์ˆ˜ ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋†“์น˜์ง€ ๋ง๊ณ  ๊ผญ ์‹œ์ฒญํ•ด ์ฃผ์„ธ์š”!

    ์ถ”๊ฐ€ ๋ฌธ์˜ ์‚ฌํ•ญ์ด๋‚˜ ๊ถ๊ธˆํ•œ ์ ์ด ์žˆ๋‹ค๋ฉด ์–ธ์ œ๋“ ์ง€ ๋Œ“๊ธ€๋กœ ๋‚จ๊ฒจ์ฃผ์„ธ์š”.

    ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

    0

์›” โ‚ฉ26,400

5๊ฐœ์›” ํ• ๋ถ€ ์‹œ

โ‚ฉ132,000