๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๋ฐ˜์‘ํ˜•

padding ํ‹€์–ด์ง1

[CSS] padding ์‚ฌ์šฉ ์‹œ, ๋ถ€๋ชจ ๋ฒ—์–ด๋‚˜๋Š” ๋ฌธ์ œ padding์„ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ๊ฐ„ํ˜น ํ•ด๋‹น ์Šคํƒ€์ผ์„ ๋ถ€์—ฌํ•œ ์š”์†Œ๊ฐ€ ๋ถ€๋ชจ์š”์†Œ๋ฅผ ๋ฒ—์–ด๋‚˜๋Š” ์ƒํ™ฉ์ด ๋ฐœ์ƒํ•˜๊ณค ํ•œ๋‹ค.  ํƒ€ ๋ธ”๋กœ๊ทธ์—์„œ ์›์ธ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๋Š” ๋ฐ”๋กœ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.์ž์‹ ์š”์†Œ์— ์œ„์น˜๊ฐ’์ด๋‚˜ ํฌ๊ธฐ(%)๋ฅผ ์ฃผ๋ฉด,๋ถ€๋ชจ๋ฅผ ๋ฒ—์–ด๋‚˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค. - ๋ถ€๋ชจ ์š”์†Œ์— ์žˆ๋Š” padding ๋•Œ๋ฌธ์—๋ถ€๋ชจ๋ฅผ ๋ฒ—์–ด๋‚  ์ˆ˜ ์žˆ๋‹ค.์ด ๋ถ€๋ถ„์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด, padding์„ ๋ถ€์—ฌํ•œ ์ž์‹ ์š”์†Œ์— box-sizing: border-box; ์†์„ฑ์„ ์ถ”๊ฐ€๋กœ ๋ถ€์—ฌํ•œ๋‹ค๋ฉด ๊ฐ„๋‹จํžˆ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ๊ฒŒ์‹œ๊ธ€์€ ์•„๋ž˜์˜ ๋ธ”๋กœ๊ทธ ํฌ์ŠคํŒ…์„ ์ฐธ๊ณ ํ•˜์—ฌ ์ž‘์„ฑ๋˜์—ˆ๋‹ค.https://dewworld27.tistory.com/entry/padding-%EB%B6%80%EB%AA%A8-%EB%B2%97%EC%96%B4%EB%82%A8-%EC%82%AC%EC%9D%.. 2023. 3. 13.
๋ฐ˜์‘ํ˜•

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”