일반적으로 우리가 알고 있는 박스모델의 공간을 차지하는 속성은
: width, height, padding, border, margin 이 있다.
widht, height는 박스의 폭과 높이를 말하고,
padding은 안쪽 여백,
border는 박스의 테두리,
margin은 박스의 바깥 여백을 말한다.
박스의 크기가 width, hegiht만큼만 공간을 차지하게 된다
margin의 경우 상하 겹침이 있을 경우, 한번만 적용된다.
padding이 적용된 경우, 텍스트를 작성하면, 하단에는 텍스트가 나타난다.
box-sizing:border-box를 적용하면 공간의 크기에서 padding, border의 크기가 반영되지 않는다.
위의 그림을 보면 알수 있듯이, 기본 width, height 공간을 차지하는 크기에
border, margin, padding이 적용되면, 차지하는 공간의 크기도 커지는 것을 볼 수 있다.
※ 이때, 주의 할 점!!
1. margin의 경우 상하 겹침이 있을 경우, 한번만 적용된다.
2. padding이 적용된 경우, 텍스트를 작성하면, 하단에는 텍스트가 나타난다.
3. box-sizing:border-box를 적용하면 공간의 크기에서 padding, border의 크기가 반영되지 않으며,
그렇다고 해서 padding, border의 속성이 없어진 것은 아니므로,
빨간색 박스 안의 텍스트는 안쪽 여백만큼 좌측상단에서 부터 떨어진 위치부터 작성되는 걸 볼 수 있다.
예를 들어 widht:300px, height:200px 의 상자를 만들고, 테두리 1px을 부여하게 되면,
박스의 전체 폭은 302px, 높이는 102px이 된다.
박스의 전체 폭 = width 300px + 좌측 border 1px + 우측 border 1px = 302px이 된다.
박스의 전체 높이도 마찬가지 이다.
여기에 padding, margin이 들어가면 마찬가지로 전체 폭과 높이는 그만큼 더 커지게 된다.
위의 상자에 padding: 50px을 적용하게 되면
박스의 전체 폭 = 300+1+1+50+50=400px이 된다.
See the Pen KKpZQbQ by LimsUIUX (@LimsUIUX) on CodePen.
!!!!! 이때 유의할 점은
padding에 의해서 안쪽 공간은 padding만큼 작아졌다는 점이다.
따라서 안에 다른 박스를 넣어야 한다면,
innerBox 의 경우 width:198px; height:98px 만큼만 갖게 된다.
See the Pen jOPYZJZ by LimsUIUX (@LimsUIUX) on CodePen.
※ box-sizing의 속성
box-sizing속성은 요소의 너비와 높이가 계산되는 방식을 정의한다.
패딩과 테두리를 포함해야하는지 여부를 결정하는 속성이다.
| 속성 | 속성값 | 설명 |
| box-sizing | content-box | 기본값으로, 박스의 크기에 padding, border 가 모두 포함되어 공간의 크기를 규정한다. |
| border-box | 박스의 크기에 padding, border가 포함되지 않은채 공간의 크기를 규정한다. |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box의 속성 이해</title>
<style>
div.box1{
width:150px;
height:150px;
background: red;
border:50px solid #000; /*width | height:150+100px*/
margin:50px; /*width | height:250+100px*/
padding:50px;/*width | height:350+100px*/
text-align: justify;
box-sizing:border-box;
}
.box2{
width:450px;
height: 450px;
background: red;
margin:50px;
}
</style>
</head>
<body>
<div class="box1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div class="box2"></div>
</body>
</html>
'UIUX Web Standard > COA Lab's CSS' 카테고리의 다른 글
| float 속성 2 - 박스정리 (0) | 2021.01.27 |
|---|---|
| float속성 1 (0) | 2021.01.26 |
| border속성 2 - 활용 (0) | 2021.01.26 |
| border 속성 1 - 이해 (0) | 2021.01.26 |
| background 속성 7 - image sprite (0) | 2021.01.26 |
