6-2. CSS ํ…Œ๋‘๋ฆฌ ์Šคํƒ€์ผ box-style, border-width, border-color, border- radius

2021. 10. 12. 22:24ใ†HTML + CSS + JS

728x90

* ๋ฐ•์Šค ๋ชจ๋ธ ๋ฐฉํ–ฅ 

top -> right -> bottom -> left ๋กœ ์‹œ๊ณ„๋ฐฉํ–ฅ์ด๋‹ค!!!

 

 

1. border-style 

 

1๏ธโƒฃ none : ํ…Œ๋‘๋ฆฌ๊ฐ€ ์—†๋Š” ๊ฒƒ์œผ๋กœ ๊ธฐ๋ณธ๊ฐ’์ด๋‹ค. 

2๏ธโƒฃ hidden : ํ…Œ๋‘๋ฆฌ๋ฅผ ๊ฐ์ถ”๋Š” ๊ฒƒ์ด๋‹ค. 

3๏ธโƒฃ solid : ํ…Œ๋‘๋ฆฌ๋ฅผ ์‹ค์„ ์œผ๋กœ ํ‘œ์‹œํ•œ๋‹ค. 

4๏ธโƒฃ dotted : ํ…Œ๋‘๋ฆฌ๋ฅผ ์ ์„ ์œผ๋กœ ํ‘œ์‹œํ•œ๋‹ค. 

5๏ธโƒฃ dashed : ํ…Œ๋‘๋ฆฌ๋ฅผ ์งง์€ ์ง์„ ์œผ๋กœ ํ‘œ์‹œํ•œ๋‹ค. 

6๏ธโƒฃ double :  ํ…Œ๋‘๋ฆฌ๋ฅผ ์ด์ค‘์„ ์œผ๋กœ ํ‘œ์‹œํ•œ๋‹ค. 

7๏ธโƒฃ groove : ํ…Œ๋‘๋ฆฌ๋ฅผ ์กฐ๊ฐํ•œ ๊ฒƒ์ฒ˜๋Ÿผ ํ‘œ์‹œํ•œ๋‹ค. 

8๏ธโƒฃ inset 

9๏ธโƒฃ outset

๐Ÿ”Ÿ ridge : ํ…Œ๋‘๋ฆฌ๋ฅผ ์ฐฝ์—์„œ ํŠ€์–ด๋‚˜์˜จ ๊ฒƒ์ฒ˜๋Ÿผ ํ‘œ์‹œํ•œ๋‹ค. 

 

 

2. border-width

border-width : ํ…Œ๋‘๋ฆฌ์˜ ๋‘๊ป˜๋ฅผ ์ง€์ •ํ•˜๋Š” ์†์„ฑ์ด๋‹ค. 

border-width : <ํฌ๊ธฐ> | thin | medium | thick

border-width : thick thin thin; ์€ ์šฐ์„  top ์€ thick์ด๊ณ , right thin, bottom thin ํ›„์— left๋Š” ๋งˆ์ฃผ๋ณด๊ณ  ์žˆ๋Š” right๊ฐ€ thin์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ™์€ ๊ฐ’์ด ์ ์šฉ๋œ๋‹ค. 

 

 

3. border-color

border-color : ํ…Œ๋‘๋ฆฌ์˜ ์ƒ‰์ƒ์„ ์ง€์ •ํ•˜๋Š” ์†์„ฑ์ด๋‹ค. 

ํ…Œ๋‘๋ฆฌ ์ „์ฒด๋ฅผ red๋กœ ์„ค์ •ํ•  ์ˆ˜๋„ ์žˆ๊ณ , border-top-color ์ฒ˜๋Ÿผ ์œ„์ชฝ๋งŒ ํŒŒ๋ž€์ƒ‰์œผ๋กœ ์„ค์ •ํ•  ์ˆ˜๋„ ์žˆ๋‹ค. 

 

 

 

4. border-radius 

๋ฐ•์Šค๊ฐ€ ํ•ญ์ƒ ๋„ค๋ชจ๋‚œ๊ฒŒ ์•„๋‹ˆ๋ผ ๋‘ฅ๊ธ€๊ฒŒ๋„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

border-radius ์†์„ฑ์„ ์ด์šฉํ•˜๋ฉด ๊ผญ์ง“์  ๋ถ€๋ถ„์— ์›์ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ณ  ๋‘ฅ๊ธ€๊ฒŒ ์ฒ˜๋ฆฌํ•œ๋‹ค.

๋”ฐ๋ผ์„œ ๋ฐ˜์ง€๋ฆ„์„ ์ด์šฉํ•˜๋ฉด ๋‘ฅ๊ทผ ์ •๋„๋ฅผ ๋‚˜ํƒ€๋‚ผ ์ˆ˜ ์žˆ๋‹ค. 

<ํฌ๊ธฐ>๋Š” px๋‚˜ em์œผ๋กœ ํ‘œ์‹œํ•˜๊ฑฐ๋‚˜ ๋ฐฑ๋ถ„์œจ๋กœ ํ‘œ์‹œํ•œ๋‹ค. 

๊ทธ๋ฆฌ๊ณ  ์›์„ ๋งŒ๋“ค๊ณ  ์‹ถ๋‹ค๋ฉด 50%๋กœ ์ง€์ •ํ•ด์ฃผ๋ฉด ์›์ด ๋œ๋‹ค. 

๊ผญ์ง“์ ๋งˆ๋‹ค ๋‹ค๋ฅธ ์ •๋„๋กœ ๋‘ฅ๊ธ€๊ฒŒ ์ฒ˜๋ฆฌํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด 

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

๊ฐ๊ฐ์˜ ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•ด์ฃผ๋ฉด ๋œ๋‹ค. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90