-
박스 사이징(box-sizing)프로그래밍/HTML&CSS 2022. 9. 7. 07:41728x90
CSS 박스모델의 기본은 width와 height 값은 padding 이나 border 영역을 포함 하지않는다. 웹 문서에 여러 요소를 배치할때 실제 박스 모델이 차지하는 크기는 콘텐츠 영역 외에도 padding, border 두께까지 고려해야한다.
CSS3부터는 box-sizing 속성이 추가되었고 이를 통해 방식을 바꿀 수 있다.
box-sizing의 속성값으로 border-box를 주어지게되면 padding와 border영역도 width와 height 영역에 포함시킬 수 있게되었다.
종류 설명 border-box 테두리까지 포함해서 너비값을 지정 content-box 컨텐츠 영역만 너비값을 지정, 기본값 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>박스사이징</title> <style> div{ width: 300px; height: 150px; margin: 10px; padding: 30px; border: 3px solid red; } .boxsizing1{ box-sizing: content-box;} .boxsizing2{ box-sizing: border-box;} </style> </head> <body> <div class="boxsizing1">box-sizing='content-box'</div> <div class="boxsizing2">box-sizing='content-box'</div> </body> </html>
즉 content-box의 컨텐츠영역 너비 300px, 높이 150px가 적용되었고 border-box는 테두리 영역을 포함된 너비 300px, 높이 150px가 적용된 것이다.
728x90'프로그래밍 > HTML&CSS' 카테고리의 다른 글
float (0) 2022.09.09 디스플레이(display) (0) 2022.09.08 마진(margin) (0) 2022.09.06 패딩(padding) (0) 2022.09.05 border-radius (0) 2022.09.03