[HTML/CSS] 박스 모델 - Box model — 코드짜는 쭈꾸미

박스 모델이란?

모든 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;
}

저작자표시

'HTML, CSS' 카테고리의 다른 글

[HTML5] main 요소와 섹셔닝 컨텐츠 (Sectioning contents) (0)	2022.07.03
[HTML] HTML/CSS 관련 북마크 (0)	2022.02.17
[HTML/CSS] 필요 개념 정리 (0)	2021.12.27
[HTML5] HTML태그에 나만의 커스텀 속성 추가하기 (0)	2021.10.16