• reset.css vs. normalize.css

    2021. 12. 29.

    by. ๋‚˜๋‚˜ (nykim)

    320x100

    reset๊ณผ normalize๊ฐ€ ํ•„์š”ํ•œ์ด์œ 

    ๋ธŒ๋ผ์šฐ์ €์—์„œ ๊ฐ€์žฅ ๋จผ์ € ์ ์šฉ๋˜๋Š” ์Šคํƒ€์ผ์€? User-agent Stylesheet !!
    ์ด๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋ณธ ์Šคํƒ€์ผ์ธ๋ฐ ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ๊ทธ ๋‚ด์šฉ์ด ๋‹ค๋ฆ„๋‹ค๋ฆ„โ€จ

    ๊ทธ๋ž˜์„œ ๋˜‘๊ฐ™์€ <button></button>ํƒœ๊ทธ์—ฌ๋„ Chrome, Safari, Edge ๋“ฑ ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ๋‹ค๋ฅด๋‹ค.

     

    ์ด๋ ‡๊ฒŒ ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ์ฐจ์ด๊ฐ€ ์žˆ์œผ๋ฉด ๋‹น์—ฐํžˆ ์ž‘์—…ํ•  ๋•Œ ํ™”๋”ฑ์ง€๊ฐ€ ๋‚จ ๐Ÿ˜ต

    โ€จ๋”ฐ๋ผ์„œ ‘์‚ฌ์ „ ์ •์˜ํ•œ ์Šคํƒ€์ผ์‹œํŠธ’๋ฅผ ์ ์šฉํ•ด ๊ฐ ๋ธŒ๋ผ์šฐ์ €์˜ ๊ธฐ๋ณธ ์Šคํƒ€์ผ์„ ๋ฌดํšจํ™”์‹œํ‚ค๋Š” ๋ฐฉ๋ฒ•์ด ์ž์ฃผ ์“ฐ์ธ๋‹ค.
    ๋ฐ”๋กœ reset ๋˜๋Š” normalize!

     

    ๋‘˜์ด ๋น„์Šค๋ฌด๋ฆฌํ•˜์ง€๋งŒ ์‚ฌ์‹ค์€ ๋‹ค๋ฅด๋‹ค๋Š” ๊ฑฐ ํ—ˆํ—ˆํ—ˆ

     

     

    reset vs. normalize

    reset

    • ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ € ์Šคํƒ€์ผ์„ ‘์ดˆ๊ธฐํ™”’ ํ•œ๋‹ค. ์™œ๋ƒ๋ฉด ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹ค์‹œ ๊ทธ๋ ค์ค„ ๊ฑฐ๋‹ˆ๊นŒ!
      • ์žฅ์ : ์ต์ˆ™ํ•œ ๋ฐฉ๋ฒ•. ๊ทธ๋ƒฅ ์ƒˆํ•˜์–€ ์ข…์ด ์œ„์— ์›ํ•˜๋Š” ๋Œ€๋กœ ๊ทธ๋ฆฌ์ž XD
      • ๋‹จ์ : ํ‘œ์ค€ํ™”๋œ ๋ฐฉ๋ฒ•์ด ์—†๊ณ  ๋ธŒ๋ผ์šฐ์ € ์—…๋ฐ์ดํŠธ์— ๋งž์ถฐ ๊ณ ์ณ๋‚˜๊ฐ€์•ผ ํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ๊ฑธ ๋‚ ๋ ค๋ฒ„๋ ค์„œ ์›๋ž˜ ์Šคํƒ€์ผ์„ ๊นŒ๋จน๊ธฐ๋„ ํ•จ ๐Ÿ’ฆ
    • Eric์˜ Reset CSS
    • Styled Components๋ฅผ ์“ด๋‹ค๋ฉด โ†’ styled-reset

     

    normalize

    • ๋ธŒ๋ผ์šฐ์ € ์Šคํƒ€์ผ์„ ์—ฌ๋Ÿฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ ‘๋˜‘๊ฐ˜์•„ ๋ณด์ด๋„๋ก’ ํ•œ๋‹ค. ์ผ๊ด€๋˜์–ด ๋ณด์ด๋„๋ก ํ•˜๋Š” ๊ฒŒ ๋ชฉํ‘œ.
      • ์žฅ์ : ๊ตณ์ด ๋‹ค ๋‚ ๋ฆฌ์ง€ ์•Š๊ณ  ์ •๊ทœํ™”๊ฐ€ ํ•„์š”ํ•œ ์Šคํƒ€์ผ๋งŒ ๊ฑด๋“œ๋ฆฐ๋‹ค. ์ง€์†์ ์œผ๋กœ ์—…๋Žƒ ์ค‘์ธ ๊ณต๋™ ํ”„๋กœ์ ํŠธ. ์นœ์ ˆํ•œ ์ฃผ์„์„ ๋ณด๋ฉฐ ์ปค์Šคํ„ฐ๋งˆ์ด์ง•๋„ ๊ฐ€๋Šฅ ๐ŸŽจ
      • ๋‹จ์ : ์ดˆ๊ธฐํ™”์— ์ต์ˆ™ํ•ด์ ธ ์žˆ๋‹ค๋ฉด ์ ์‘์— ์‹œ๊ฐ„์ด ๊ฑธ๋ฆด ๋“ฏ. ๊ณต๋™๊ธฐ์—ฌ์ง€๋งŒ ์–ด์จŒ๋“  ๋ธŒ๋ผ์šฐ์ €์— ๋งž์ถฐ ์—…๋ฐ์ดํŠธ๋Š” ํ•„์š”.
    • Nicolas์˜ Normalize CSS
    • Styled Components๋ฅผ ์“ด๋‹ค๋ฉด โ†’ styled-normalize

     

     

     

    ํ์Œ ๋ญ˜ ์จ๋ณผ๊นŒ

    ๊ฒฐ๊ตญ ๋ฌด์—‡์„ ์‚ฌ์šฉํ• ์ง€๋Š” ์ƒํ™ฉ๊ณผ ์ทจํ–ฅ๊ป ๐Ÿค”
    ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์ด ์ „ํ˜€ ํ•„์š” ์—†๋‹ค๋ฉด reset๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๊ณ ,โ€จ
    ์ผ๋ถ€ ๊ธฐ๋ณธ ์Šคํƒ€์ผ(sub, i ๋“ฑ)์€ ์œ ์ง€ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด normalize๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๊ณ ,
    ์•„๋‹ˆ๋ฉด ๋‘˜์„ ์Šค๊นŒ์Šค๊นŒ ์„ž์–ด ์“ธ ์ˆ˜๋„ ์žˆ๊ฒ ๋‹ค!

     

    ์„ธ์„ธํ•œ ์žฅ๋‹จ์ ์€ ์‹ค์‚ฌ์šฉ ํ•ด๋ณด๋ฉด์„œ ํ›„๊ธฐ ๋‚จ๊ธฐ๋Š” ๊ฑธ๋กœ ;)

    728x90

    '๐Ÿฟ > CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

    border: 0 vs. border: none  (2) 2022.01.17

    ๋Œ“๊ธ€

Designed by Nana