박스 크기 조절하기 실습
<!DOCTYPE html> <html lang="ko"> <head> <title>Document</title> <style> div { width: 80px; height: 80px; border:1px solid red; padding: 10px; } #contentBox{ box-sizing: content-box; } #borderBox{ box-sizing: border-box; } </style> </head> <body> <div id="contentBox">박스1</div> <!-- 컨텐츠 박스로 만들것 --> <div>박스2</div> <!-- 그냥 기본 상태로 둘것 --> <div id="borderBox">박스3</div> <!-- 보더 박스로 만들것 --> </body> </html>
기본 상태인 박스2는 contentbox 인 1번과 동일한걸 보아
default 상태는 contentbox 인걸 알 수 있음
contentbox는 padding(여백) 사이즈가 커질수록 실제 잡아먹는 크기도 커지기에
정렬등 모양이 흐트러질 수 있으므로 주의 할것.
