🛴 CSS BOX
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/a23d19e4-855b-4949-bf32-d23bc7790328.png)
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/5bfe14e5-32ca-4512-bb98-4f65039c4081.png)
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/dbb85a20-f077-49ad-87f7-2f193f393931.png)
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/b5a5d64f-9755-4219-9589-e3c8ed1e61fe.png)
< style> 안에 css 인 h1 에 속성을 써준다.
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/08396017-874e-4bc3-9c4b-b1f8c8e6642a.png)
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/90eabf40-8279-4f48-9291-3911078c8559.png)
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/845fd743-dbe3-4059-8a21-b3aec1a33a29.png)
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/5852ce81-9da0-4003-8197-f592d7bbbd23.png)
display: block 은 큰 box를 만드는 것이고 display: inline 은 그 글자만 box 만드는 것이다.
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/1c9e6b2b-4486-4d94-9d20-3b35866d289a.png)
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/7ddb129c-100a-4bff-9c87-6bef812bdc64.png)
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/8abff507-819e-4129-8be3-7d1392d06b86.png)
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/322f39e6-99ce-43d4-aa5e-3123a66a588a.png)
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/657f1124-ecfd-4897-a184-97847595c262.png)
padding 은 글자와 테두리 사이이다.
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/cc6605d2-6963-4505-88e5-40f36923dea9.png)
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/4a92ba98-79f5-4c78-a1af-febc6949a0f9.png)
margin 은 box와 box 사이의 간격이다.
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/3a37bd6f-ec2e-4e24-8322-c7533e3c9103.png)
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/181ba14a-45b5-4082-82f1-e37a051a42a0.png)
![CSS BOX image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/216e96793e3f410fb3d96467289210fe/016eea37-09f4-4fcb-a8fa-81614e81abaa.png)