본문으둜 κ±΄λ„ˆλ›°κΈ°

CSS 속성 05. box-sizing

❗️ ν•΄λ‹Ή 글은 패슀트캠퍼슀 - ν”„λ‘ νŠΈμ—”λ“œ 개발 κ°•μ˜μ—μ„œ HTML & CSS, SASS(SCSS) Part의 λ°•μ˜μ›… κ°•μ‚¬λ‹˜μ˜ κ°•μ˜μžλ£Œλ₯Ό μ •λ¦¬ν•œ κ²ƒμž…λ‹ˆλ‹€.

box-sizing#

μš”μ†Œμ˜ 크기 계산 기쀀을 지정

2020-02-03-css-속성-05-box-sizing-image-0


속성 κ°’#

κ°’μ˜λ―ΈκΈ°λ³Έκ°’
content-boxλ„ˆλΉ„( width , height )만으둜 μš”μ†Œμ˜ 크기λ₯Ό 계산content-box
border-boxλ„ˆλΉ„( width , height )에 μ•ˆμͺ½ μ—¬λ°±( padding )κ³Ό ν…Œλ‘λ¦¬ μ„ ( border )λ₯Ό ν¬ν•¨ν•˜μ—¬ μš”μ†Œμ˜ 크기λ₯Ό 계산

☝️ 속성 κ°’μœΌλ‘œ padding-box κ°€ μžˆκΈ°λŠ” ν•˜μ§€λ§Œ, λΈŒλΌμš°μ € ν˜Έν™˜μ„±μ΄ 맀우 λ–¨μ–΄μ§€λ―€λ‘œμ‚¬μ‹€μƒ μ‚¬μš©μ΄ λΆˆκ°€λŠ₯ν•˜λ‹€.

box-model

νŒŒλž€μƒ‰ λΆ€λΆ„ : content-boxλ…Έλž€μƒ‰ λΆ€λΆ„ : border-box


Reference#

패슀트캠퍼슀 - ν”„λ‘ νŠΈμ—”λ“œ 개발 κ°•μ˜ - HTML & CSS, SASS(SCSS) Part by ParkYoungWoong