• border: 0 vs. border: none

    2022. 1. 17.

    by. ๋‚˜๋‚˜ (nykim)

    320x100
    ๊ฒฐ๋ก 
    border: 0 ์“ฐ์ž! ๐Ÿ‘ป

     

     

    ๋ณด๋” ์—†์•จ ๋•Œ none ๋ณด๋‹ค 0์„ ์ผ์—ˆ๋Š”๋ฐ ์ด์œ ๋Š” ๊ทธ๊ฒŒ ๋” ์น˜๊ธฐ ํŽธํ•˜๋‹ˆ๊นŒ ๐Ÿ™„ (์†๊พธ๋ฝ์€ ์†Œ์ค‘ํ•˜์ž๋‚˜์—ฌ)

    ๊ทธ๋Ÿฌ๋‹ค ์–ด๋Š๋‚  ์•— ๋‚ด๊ฐ€ ํ˜€๋ฅผ ์–ด๋””๋‹ค ๋‘๊ณ  ์žˆ์—ˆ์ง€! ๋ฅผ ์ž๊ฐํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ 0๊ณผ none์˜ ์ฐจ์ด๊ฐ€ ๋ญ์ง€!๋ฅผ ์ž๊ฐํ•ด๋ฒ„๋ฆฐ ๋ฐ”๋žŒ์—

    ์ •๋ฆฌํ•˜๋Š”.. ๊ทธ๋Ÿฐ... ๊ธ€....

     

    ์ผ๋‹จ W3C์˜ ๋ฌธ์„œ๋ฅผ ์ดค๋ฅด๋ฅต ํ›‘์–ด๋ณด๋ฉด border ๋‹จ์ถ• ์†์„ฑ์€ border-width, border-style, border-color ๋ฅผ ํ•œ๋ฒˆ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

    ์—ฌ๊ธฐ์„œ 0๊ณผ none์˜ ์ฐจ์ด๊ฐ€ ๊ฐˆ๋ฆฐ๋‹ค.

     

    border: 0; border: none;
    border-width: 0; border-width: medium;
    border-style: none; border-style: none;

    ์ฆ‰, border-width๋ฅผ 0์œผ๋กœ ๋งŒ๋“œ๋Š๋ƒ, ์•„๋‹ˆ๋ฉด ์ดˆ๊ธฐ๊ฐ’(medium)์œผ๋กœ ๋ƒ…๋‘๋Š๋ƒ์˜ ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค.

     

     

    ๋”ฐ๋ผ์„œ ์•„๋ž˜์™€ ๊ฐ™์ด border-style์„ ์ ์šฉ์‹œ์ผฐ์„ ๋•Œ, border: none;์€ ์ด๋ฏธ width ๊ฐ’์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ณด๋”๊ฐ€ ๊ทธ๋ ค์ง€๊ฒŒ ๋œ๋‹ค.

     

     

    See the Pen Untitled by nanalike (@nykim_) on CodePen.

     

     

     

    ๋ง๋ถ™์—ฌ, border: hidden; ์†์„ฑ์„ ์“ฐ๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ๋‹ค!

    ์ด ๊ฒฝ์šฐ border-style: hidden;์ด ๋˜๋ฏ€๋กœ border-style: none; ์ฒ˜๋Ÿผ ๋ณด๋”๋ฅผ ์ˆจ๊ธธ ์ˆ˜ ์žˆ๋‹ค.

    none์ด๋‚˜ hidden์ด๋‚˜ ํฐ ์ฐจ์ด๋Š” ์—†์ง€๋งŒ, ์ฐจ์ด์ ์ด ์žˆ๋‹ค๋ฉด ํ…Œ์ด๋ธ” ๋‚ด ๋ณด๋” ๊ฐ„ ์ถฉ๋Œ์ด ์ผ์–ด๋‚  ๋•Œ none์˜ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋‚ฎ๋‹ค๋Š” ๊ฒƒ.

     

    ํ…Œ์ด๋ธ” ๋‚ด์—์„œ border-collapse: collapse; ๋ฅผ ์ ์šฉํ•˜๋ฉด ๊ฐ ์…€๋“ค์ด ๋ณด๋”๋ฅผ ๊ณต์œ ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ,
    ์ด๋•Œ ๋ˆ„๊ตฌ ๋ณด๋”๋ฅผ ์“ธ ๊ฒƒ์ธ๊ฐ€ ์‹ธ์›€์ด ์ผ์–ด๋‚˜๊ฒŒ ๋œ๋‹ค.

    ์ด ๊ณผ์ •์—์„œ ์–ด๋–ป๊ฒŒ ์ถฉ๋Œ์„ ๋ฌด๋งˆ์‹œํ‚ฌ ๊ฒƒ์ธ์ง€(?) ์ •ํ•ด๋†“์€ ๊ทœ์น™์ด ์žˆ๋‹ค๊ณ  ํ•œ๋‹ค.

     

    1. border-style: hidden; ์€ ์ถฉ๋Œํ•˜๋Š” ๋‹ค๋ฅธ ๋ชจ๋“  ๋ณด๋”๋ณด๋‹ค ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋†’๋‹ค.
    2. border-style: none; ์€ ๊ฐ€์žฅ ๋‚ฎ์€ ์šฐ์„ ์ˆœ์œ„๋ฅผ ๊ฐ–๋Š”๋‹ค. ์ด ๊ฐ€์žฅ์ž๋ฆฌ์—์„œ ๋งŒ๋‚˜๋Š” ๋ชจ๋“  ์š”์†Œ์˜ ๋ณด๋” ์†์„ฑ์ด none์ธ ๊ฒฝ์šฐ์—๋งŒ ๋ณด๋”๊ฐ€ ์ˆจ๊ฒจ์ง„๋‹ค. (ํ•˜์ง€๋งŒ border-style์˜ ๋””ํดํŠธ๊ฐ’์ด none ์ด๊ธด ํ•จ)
    3. ์–ด๋Š ๊ฒƒ๋„ border-style: hidden; ์ด ์•„๋‹ˆ๊ณ , ๊ทธ์ค‘ ์ ์–ด๋„ ํ•˜๋‚˜๊ฐ€ border-style: none์ด ์•„๋‹ˆ๋ผ๋ฉด ๋” ๋‘๊บผ์šด ๋ณด๋”๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ๋‹ค. ๋งŒ์•ฝ ์—ฌ๋Ÿฌ ๊ฐœ๊ฐ€ ๋™์ผํ•œ border-width ๋ฅผ ๊ฐ–๋Š”๋‹ค๋ฉด double - solid - dashed - dotted - ridge - outset - groove - inset ์ˆœ์œผ๋กœ ์šฐ์„ ์ˆœ์œ„๊ฐ€ ๋‚ฎ์•„์ง„๋‹ค.
    4. ํ…Œ๋‘๋ฆฌ ์Šคํƒ€์ผ ์ค‘ border-color๋งŒ ๋‹ค๋ฅธ ๊ฒฝ์šฐ, ์…€์— ์„ค์ •๋œ ์Šคํƒ€์ผ์ด row, row group, column, column group, table ๋™์ผํ•œ ์œ ํ˜•์˜ ๋‘ ์š”์†Œ๊ฐ€ ์ถฉ๋Œํ•˜๋ฉด ์ขŒ์ธก(ํ…Œ์ด๋ธ” ๋ฐฉํ–ฅ์„ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ง€์ •ํ–ˆ๋‹ค๋ฉด ์šฐ์ธก) ์ƒ๋‹จ์˜ ์š”์†Œ๊ฐ€ ์šฐ์„ ์‹œ ๋œ๋‹ค.

     

     

     

    ์•„๋ฌดํŠผ ๊ฒฐ๋ก ์€ ์บ์Šค์บ์ด๋”ฉ ๊ณผ์ •์—์„œ ๊ผฌ์ผ์ง€๋„ ๋ชจ๋ฅด๋‹ˆ 0์„ ์“ฐ๋Š” ๊ฒƒ์ด ๋‚ซ๋‹ค! ๋Š” ๊ฒŒ ์ด์œ ์ธ ๋“ฏ. (์ผ๋‹จ ์งง์œผ๋‹ˆ๊นŒ.. ์งง์€ ๊ฒŒ ์ตœ๊ณ ...)

     

     

     

    ์ฐธ๊ณ ํ•œ ๊ธ€

    Should I use 'border: none' or 'border: 0'? - stackoverflow

     

    728x90

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

    border: 0 vs. border: none  (0) 2022.01.17
    reset.css vs. normalize.css  (1) 2021.12.29

    ๋Œ“๊ธ€ 0

Designed by Nana