CSS 박스모델이 무엇인가요?

CSS Box 모델이란?

모든 HTML 요소들은 상자로 표현할 수 있습니다.

상자는 용도에 따라 다르게 쓰이지만 공통적으로 쓰입니다.

박스모델이라는 것은 HTML요소를 감싸는 상자가 있는데 용도에 상관없이 공통적으로 사용되어지는 요소들을 다루는 방법에 대한 모델입니다.

먼저 여백(margin), 테두리(border), 패딩(padding), 실제내용이 들어가는 컨텐츠(content)가 무엇인지 알아야 합니다.

이미지 참고 : w3schools.com

이 그림을 참고하면 알겠지만

margin : 보더 주변 바깥지역입니다. 배경색이 없는 투명입니다.

border : 패팅과 내용의 주위를 두르는 가는테두리입니다.

padding : 패딩은 컨텐츠의 주위공간을 지웁니다. 배경 색상에 의해 영향을 받습니다.

다음을 보면 width를 220픽셀로 설정했습니다.

하지만 그 크기는 250픽셀정도 됩니다.

왜냐하면 속안에 패딩값이 20픽셀 들어있고 선을 굵게 하는데 10픽셀정도 사용하였기 때문입니다.

<!DOCTYPE html>

<html>

<head>

<style>

div.ex

{

width:220px;

padding:10px;

border:5px solid gray;

margin:0px;

}

</style>

</head>

<body>

<div class="ex">The picture above is 250px wide.

The total width of this element is also 250px.</div>

</body>

</html>

웹마케팅 창고