๐Crucial : Border, Padding, Margin, Width & Height, Display Property, Units - %, ems, &, rems
๐Nice To Have : Border Radius
CSS Box model
โช๏ธ ๋ธ๋ผ์ฐ์ ์์ ๋ชจ๋ ํํ๋ ๋ฐ์ค๋ก ํํ๋จ
โ๏ธ width : ๋ฐ์ค ๋ชจ๋ธ ์์์ ์ฝํ ์ธ ๊ฐ ๋ค์ด๊ฐ๋ ์์ญ(์ปจํ ์ธ ๋ฐ์ค)์ ๊ฐ๋ก ํฌ๊ธฐ
โ๏ธ height : ๋ฐ์ค ๋ชจ๋ธ ์์์ ์ฝํ ์ธ ๊ฐ ๋ค์ด๊ฐ๋ ์์ญ(์ปจํ ์ธ ๋ฐ์ค)์ ์ธ๋ก ํฌ๊ธฐ
Border
โ๏ธ border :์์๋ฅผ ๋๋ฌ์ธ๊ณ ์๋ ๋ฐ์ค ๋ชจ๋ธ์ ํ ๋๋ฆฌ, border ์คํ์ผ ํ๋ฒ์ ์์ฑ ๊ฐ๋ฅ
-> ๊ตต๊ธฐ, ์คํ์ผ, ์์ ์์ผ๋ก ์์ฑ
โช๏ธ border-width : ํ ๋๋ฆฌ์ ๊ตต๊ธฐ (๋ณดํต ํฝ์ ๋จ์ ์ฌ์ฉํจ)
โช๏ธ border-color : ํ ๋๋ฆฌ์ ์์
โช๏ธ border-style : ํ ๋๋ฆฌ์ ์คํ์ผ( dashed, solid, ..., ๋๊ฐ๋ฅผ ๋์ด์ฐ๊ธฐํด์ ์ด๋ค๋ฉด ์ฒซ๋ฒ์งธ๋ ์ ์๋, ๋๋ฒ์งธ๋ ์ ์์ ์ ์ฉ)
โช๏ธ box-sizing : border-box - ํ ๋๋ฆฌ๋ ์์์ ํฌ๊ธฐ์ ํฌํจ์์ผ์ ์ปจํ ์ธ ์์ญ์ ์ค์ด๋ค๊ฒ ํด์ ์ฌ์ด์ฆ ๋ง์ถค (ํ ๋๋ฆฌ์ ํจ๋ฉ์ ๊ณ์ฐ ์ํจ)
โช๏ธ border-radius : ๋ชจ์๋ฆฌ ๋ฅ๊ทผ ์ ๋ (๋ณดํต %๋ฅผ ์ฌ์ฉํ๋ค๊ณ ํจ
Padding
โ๏ธ padding : ์ฝํ ์ธ ๋ฐ์ค์ ์์๋ฅผ ๋๋ฌ์ผ ํ ๋๋ฆฌ ์ฌ์ด์ ๋จ๋ ๊ณต๊ฐ (padding-left ๋น์ฐํ ๊ฐ๋ฅ)
-> ์ ๋ ฅ์ ์, ์ค๋ฅธ์ชฝ, ์๋, ์ผ์ชฝ์ ์์๋๋ก ์์ฑ, ๋๊ฐ๋ง ์ด๋ค๋ฉด ์์๋, ์ผ์ชฝ ์ค๋ฅธ์ชฝ
Margin
โ๏ธ margin : ํ ์์๊ฐ ์๊ณ ๋ค๋ฅธ ์์๊ฐ ์์ ๋ ๋ ์์์ ๊ฐ ํ ๋๋ฆฌ์ ๊ฐ๊ฒฉ(์์์ ๋ฐ๊นฅ๊ณต๊ฐ)
โช๏ธ <h1>์ด๋ <body>๊ฐ์ ํ๊ทธ๋ค์ ๊ธฐ๋ณธ์ ์ผ๋ก margin์ ๊ฐ์ง๊ณ ์์ -> ์์ ๊ณ ์ถ์ผ๋ฉด 0
Display Property
โ๏ธ display
โช๏ธ inline : <span> - ํ์ค ์ ์ฒด๋ฅผ ์ฐจ์งํ๋ ๊ฒ์ด ์๋๋ผ ์ผ๋ถ๋ง ์ฐจ์ง, ์์๊ฐ ์ธ๋ผ์ธ์ด๋ฉด ๋๋น๋ ๋์ด๋ ๋ฌด์ํจ
-> padding์ ์ ์ฉ๊ฐ๋ฅ(๊ทธ๋ฌ๋ ๋ค๋ฅธ ์์๋ฅผ ๋ฐ์ด๋ด์ง ์๊ณ ๋ฌด์ํ๋ฉด์ ์ ์ฉ๋จ)
-> margin์ ๊ฐ๋ก์ค ํ๋์๋ง ์ ์ฉ๋จ(๋๋จธ์ง๋ ์ ์ฉ์๋จ)
โช๏ธ block : <h1>, <div> - ํ์ค ์ ์ฒด(๋ธ๋ก)์ ์ฐจ์งํจ. ๋๋น๋ ๋์ด ์ ์ฉ๊ฐ๋ฅ
-> padding ์ ์ฉ ๊ฐ๋ฅ, margin ์ ์ฉ ๊ฐ๋ฅ
โช๏ธ inline-block : ์ธ๋ผ์ธ ์์์ฒ๋ผ ์์น๋์ง๋ง, width, height, padding, margin์ด ๋ชจ๋ ์ ์ฉ๋จ
โช๏ธ none : ์์ ์์ฒด๊ฐ ์ญ์ ๋๋ ๊ฒ์ ์๋์ง๋ง ๋ณด์ด์ง ์์
CSS Unit
โช๏ธ Absolute : px, pt, cm, in, mm
โช๏ธ Relative : em, rem, vh, vw, %, ...
โช๏ธ % : ๋ค๋ฅธ ๊ฐ๊ณผ ์๋์ ์ - ๋ณดํต ๋ถ๋ชจ ์์์ nn% ๋๋ ์์ ์์ฒด์ ๊ฐ์์ nn%
(์๋ฅผ ๋ค์ด ํฐํธ 50%๋ ๋ถ๋ชจ 50% ์๋๊ณ ํฐํธ ์์ฒด 50%)
โช๏ธ em : em์ ๋ถ๋ชจ์ ํฐํธ ํฌ๊ธฐ์ ์ข์ฐ๋จ, 1em - ๋ถ๋ชจ ํฐํธ์ ๊ฐ์ ํฌ๊ธฐ -> ๋ค๋ฅธ ์์๊ฐ ๋ฐ๋๋ ๊ทธ ๋ชจ์์ ์ ์ง์ํฌ ์ ์์
-> li์ ๊ฐ์ด ์ ์ฌํ ๋ด์ฉ์ธ๋ฐ ์ค์ฒฉ๋ ๊ตฌ๋ฌธ์ ์์ฑํ ๋ em์ ์ฌ์ฉํ๋ฉด ๋ถ๋ชจ ์์๊ฐ ๋ฌ๋ผ์ง๋ฉด์ ํฌ๊ธฐ๊ฐ ๊ฐ์ ๋ฌ๋ผ์ง๊ฒ๋จ
โช๏ธ rem : root ems, ๋ฌธ์ ์ ์ฒด์ ํ๋์ ๊ธ๊ผด ํฌ๊ธฐ(HTML ์์์ ๊ธ์ ํฌ๊ธฐ)์ ๋น๋กํ์ฌ ๋ฐ๋
'๊ณต๋ถ ๊ธฐ๋ก > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [Udemy] The Web Developer Bootcamp 2022 : [10] ๋ฐ์ํ ๋ฐ Flexbox (0) | 2022.07.18 |
|---|---|
| [Udemy] The Web Developer Bootcamp 2022 : [9] ์ ์ฉํ CSS ์์ฑ๋ค (0) | 2022.07.16 |
| [Udemy] The Web Developer Bootcamp 2022 : [7] CSS Selector (0) | 2022.07.11 |
| [Udemy] The Web Developer Bootcamp 2022 : [6] CSS ๊ธฐ์ด (1) | 2022.07.09 |
| [Udemy] The Web Developer Bootcamp 2022 : [5] HTML form, table (0) | 2022.07.03 |
