2021. 10. 12. 22:24ใHTML + CSS + JS
* ๋ฐ์ค ๋ชจ๋ธ ๋ฐฉํฅ
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
๊ฐ๊ฐ์ ํฌ๊ธฐ๋ฅผ ์ง์ ํด์ฃผ๋ฉด ๋๋ค.
'HTML + CSS + JS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
6-4. CSS ๋ ์ด์์ ๋ง๋ค๊ธฐ, display, float โญโญ (0) | 2021.10.12 |
---|---|
6-3. CSS margin, padding (0) | 2021.10.12 |
6-1. CSS ๋ฐ์ค ๋ชจ๋ธ, padding, margin, border (0) | 2021.10.12 |
5-6. CSS ๊ธฐ์ด ์ฐ์ต๋ฌธ์ 1,2,3,4 (0) | 2021.10.10 |
5-5. CSS ๋ชฉ๋ก, ํ ์คํ์ผ (0) | 2021.10.10 |