CSS

CSS[박스 모델]

developer_Michael 2023. 3. 31. 18:51
반응형

CSS 박스 모델은 HTML 요소가 화면에 어떻게 배치되고 크기가 결정되는지를 결정하는 모델입니다.

 

박스 모델은 요소의 내용(content), 안쪽 여백(padding), 테두리(border), 바깥쪽 여백(margin)으로 구성됩니다.

박스 모델의 구성 요소는 다음과 같습니다.

content: HTML 요소의 내용을 감싸는 영역으로, width와 height 속성으로 크기를 지정할 수 있습니다.


padding: content와 border 사이의 간격을 조절하는 영역으로, padding-top, padding-bottom, padding-left, padding-right 속성으로 상하좌우 각각 크기를 지정할 수 있습니다.


border: content와 padding을 감싸는 테두리로, border-top, border-bottom, border-left, border-right 속성으로 상하좌우 각각의 스타일, 두께, 색상을 지정할 수 있습니다.


margin: border와 인접한 요소와의 간격을 조절하는 영역으로, margin-top, margin-bottom, margin-left, margin-right 속성으로 상하좌우 각각 크기를 지정할 수 있습니다.

<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 1px solid black;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>내용</p>
    </div>
</body>

</html>
Example

내용

위 코드에서는 div 요소를 하나 만들어서 그 안에 p 요소를 넣었습니다. 

 

이 div 요소를 박스 모델로 다루기 위해 width, height, padding, border, margin 속성을 지정했습니다. 

 

이렇게 지정한 속성을 바탕으로 박스 모델이 결정되어 요소가 어떻게 배치되는지가 결정됩니다.

즉, 위의 예제에서 div.box는 content의 크기가 200px x 100px이 되도록 width와 height 속성을 지정하였으며, 

 

content와 padding 영역 사이의 간격을 20px로 설정하였습니다. 

 

또한, content와 padding을 감싸는 테두리의 두께가 1px이고, 색상이 검은색인 solid border 스타일을 지정하였습니다. 

 

마지막으로, box와 인접한 요소와의 간격을 10px로 설정하였습니다.

이렇게 박스 모델을 사용하여 요소의 크기와 위치를 조절하면 웹 페이지 디자인을 더욱 세밀하게 조정할 수 있습니다.

반응형