๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŒŒ | WEB DEV/HTML CSS

CSS ๊ธฐ๋ณธ (4)_๋ฐ•์Šค(border, border-radius)

by KASSID 2022. 1. 1.

๋ชฉ์ฐจ

    728x90

     border  

    ํ•œ ๋ฐฉ์— ์—ฌ๋Ÿฌ ์†์„ฑ ์ง€์ •

    ex)

    border : 2px solid red;

     

    ์†์„ฑ ํ•˜๋‚˜์”ฉ

    border-style : ํ…Œ๋‘๋ฆฌ ์Šคํƒ€์ผ ์ง€์ •

      solid dashed dotted double groove inset ouset

     

    boder-width : ํ…Œ๋‘๋ฆฌ ๋‘๊ป˜ ์ง€์ •

      px % ๋“ฑ

     

    border-color : ํ…Œ๋‘๋ฆฌ ์ƒ‰์ƒ ์ง€์ •

      color ๊ฐ’

     

     

    ๋ฐฉํ–ฅ ์ง€์ •

    border-top, border-bottom, border-left, border-right 

    ๊ฐ๊ฐ์„ ์ง€์ •ํ•ด์„œ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.


     border-radius 

    border-radius : ์ฝ”๋„ˆ๋ฅผ ๋‘ฅ๊ธ€๊ฒŒ

      px, %

     

    ๊ฐ’ 4๊ฐœ -> ์ƒ ์šฐ ํ•˜ ์ขŒ (์‹œ๊ณ„๋ฐฉํ–ฅ์œผ๋กœ)

    ๊ฐ’ 1๊ฐœ๋งŒ -> ์ƒ์šฐํ•˜์ขŒ ๋ชจ๋‘ ๋™์ผํ•˜๊ฒŒ

     

     

    ๋Œ“๊ธ€