🛫 CSS box model 활용
![CSS box model 활용 image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/da4a0edb3c0647aca891dfc1600c791a/1f643e2d-a9a2-4c1f-beee-766de44cac89.png)
이와 같이 만들려고 한다.
![CSS box model 활용 image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/da4a0edb3c0647aca891dfc1600c791a/7e809772-b645-4ef4-87d9-3fe6ad8daaf6.png)
![CSS box model 활용 image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/da4a0edb3c0647aca891dfc1600c791a/1746358b-1f0a-40cf-8d24-5b317a8009b7.png)
WEB 에 box를 만들기 위해서 css h1 값을 font-size=45px, text-align = center, border:1px solid gray 로 box를 만든다.
![CSS box model 활용 image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/da4a0edb3c0647aca891dfc1600c791a/487f39e0-dec2-42c5-9a4a-e365d80a3c15.png)
WEB 의 아랫줄을 그으려면 border:1px 을 border_bottom:1 로 바꾼다.
![CSS box model 활용 image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/da4a0edb3c0647aca891dfc1600c791a/8523dec4-3200-400b-b6f0-f6dbb81a97c4.png)
![CSS box model 활용 image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/da4a0edb3c0647aca891dfc1600c791a/b5c97f8d-f890-4831-9471-69f230cdcea2.png)
![CSS box model 활용 image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/da4a0edb3c0647aca891dfc1600c791a/944d4eef-b9c2-4719-a58a-0100b76ec6a6.png)
세로로 줄을 그으려면 항목이 있는 tag 인 < ol> 을 css 로 ol { border-right=1px solid gray;} 로 만든다.
![CSS box model 활용 image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/da4a0edb3c0647aca891dfc1600c791a/12c5ef30-534d-4012-858c-a61bdc8dd066.png)
세로줄을 리스트에 가까이 하기위해 with: 100px 로 둔다.
![CSS box model 활용 image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/da4a0edb3c0647aca891dfc1600c791a/7c8a45f8-7594-4190-98d7-b00cfbc599bc.png)
세로 줄이 윗줄이랑 붙지 않은 이유를 크롬의 검사를 눌러 확인해 본 결과 margin 값이 있어서 떨어져 있는 것이므로 margin=0로 한다.
![CSS box model 활용 image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/da4a0edb3c0647aca891dfc1600c791a/ffa3d543-308f-4148-a0e1-31dd9034bc91.png)
![CSS box model 활용 image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/da4a0edb3c0647aca891dfc1600c791a/1f3dbe59-00c1-4c64-887f-de9141c4112f.png)
![CSS box model 활용 image](https://slid-capture.s3.ap-northeast-2.amazonaws.com/public/capture_images/da4a0edb3c0647aca891dfc1600c791a/2c291ae0-2bb4-4306-b89b-ede46262bc55.png)