7. Box Model

box-sizing : border-box, padding-box, content-box, margin-box

margin, padding, border + margin collapsing,

display : block, inline,inline-block

1. box-sizing box-sizing이 content-box일 때,box-sizing이 border-box일 때,2. display

1. box-sizing

box-sizing 속성은 박스의 크기에 대한 기준을 정합니다.

box-sizing이 content-box일 때,


.box {
	box-sizing: content-box;
	width: 300px;
	height: 200px; 
	padding: 20px;
	border: 5px solid black;
	margin: 15px;
}

box-sizing: content-box (기본값). 박스의 크기를 컨텐츠의 크기만큼 설정합니다.

width: 300px; height: 200px; padding: 20px; border: 5px; soild black; margin: 15px;

box-sizing이 border-box일 때,


.box {
	box-sizing: border-box
	/* border까지 width에 포함 */
	width: 300px;
	height: 200px; 
	padding: 20px;
	border: 5px solid black;
	margin: 15px;
}

box-sizing: border-box. 박스의 크기를 컨텐츠의 border 값 만큼 설정합니다.

width: 300px; height: 200px; padding: 20px; border: 5px; soild black; margin: 15px;


<!DOCTYPE html>
<html>
<head>
    <title>Document</title>   
    <style>
        h1{
            border: 1px solid black;
            padding: 2px 10px 20px 40px;
            margin:20px 
        }        
    </style> 
</head>
<body>
    <h1>hello world</h1>
</body>
</html>

2. display

display 속성은 박스의 성질을 지정하여 요소를 어떻게 보여줄지 결정합니다.

inline : 줄바꿈이 되지 않고, width와 height, margin-top, margin-bottom 값을 지정할 수 없습니다.

block : width, height, margin, padding 등 모든 값을 지정할 수 있으며, 항상 줄바꿈이 일어납니다.

inline-block : inline 처럼 한 줄에 여러 요소가 존재할수 있습니다. block 처럼 width, height, margin, padding 등 모든 값을 지정할 수 있습니다. inline 속성의 특징과 block 속성의 특징이 함께 존재합니다.

contents : 선택한 요소의 내용 앞이나 뒤에 콘텐츠를 붙입니다.

flex : 레이아웃을 다룰 때 하나의 행 또는 열을 다룹니다. (1차원 레이아웃)

grid : 2차원 레이아웃을 설정하는데 사용합니다.