HTML, CSS

[HTML/CSS] 박스 모델 - Box model

쭈꾸미 2022. 7. 2. 00:46

박스 모델이란?

모든 HTML 요소(Element)는 박스 형태로 이루어져 있다.

웹 브라우저에서 HTML 요소를 구성할 때 각각의 요소가 차지하는 박스 공간을 정의한 모델을 박스 모델이라고 부른다. 

 

이 박스 공간은 각각 Content & Padding & Border & Margin 으로 이루어져있다.

CSS 속성(Property)을 이용해 각각의 HTML 요소가 차지하고 있는 박스 모델의 공간을 정의하고, 스타일을 지정하고, 정렬을 컨트롤하는 것이 웹디자인과 웹퍼블리싱의 핵심이다.

 

Content

텍스트나 이미지 등 해당 요소의 내용이 위치하는 부분.

width와 height 속성을 이용해 규격을 지정할 수 있다.

box-sizing이 content-box일 경우, 규격을 지정하는 기준이 된다.

 

Padding

내부 여백에 해당하는 부분. Border 안쪽, 즉 Border와 Content 사이에 위치한다.

padding 속성을 이용해 Padding 영역의 두께를 지정할 수 있다.

기본값은 투명(transparent)이며, Content에 적용된 background 속성이 있을 경우 해당 속성은 Padding 영역에도 적용된다.

 

Border

외곽선 혹은 테두리에 해당하는 영역.

border 속성을 이용하여 두께, 스타일, 색상 등을 지정할 수 있다.

box-sizing이 border-box일 경우, 규격을 지정하는 기준이 된다.

 

Margin

외부 여백에 해당하는 부분. Border 바깥쪽에 위치한다.

margin 속성을 이용해 Margin 영역의 두께를 지정할 수 있다.

기본값이 투명(transparent)인 것은 Padding과 동일하나, 별도의 background 속성을 지정할 수는 없다.

 

예시

<!DOCTYPE html>
<html lang="ko">
<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>01-02-box-model</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="box1">
        DIV입니다 😃
    </div>    
</body>
</html>
.box1{
    background: gray;
    width: 400px;
    height: 300px;
    border: 2px solid red;

    padding: 50px;
    margin: 50px;
}

 

저작자표시 (새창열림)