div 박스 생성

.box {
    width: 200px; 박스 넓이
    background-color: cadetblue; 박스 색깔
    margin: 30px; 상하좌우 여백
    padding: 40px; 박스 내부 여백
    border: 2px solid grey; 박스 테두리 및 색깔
    border-radius: 10px; 테두리 두께
    display: block; 가운데 정렬
    margin-left: auto; 왼쪽 여백 자동 가운데 정렬
    margin-right: auto 오른쪽 여백 자동 가운데 정렬
}

• 부모태그 width만 단독사용하면 보이지 않는 테두리 생성
  자식태그에서 width:20% 이면 부모태그의 20% 너비만 차지하겠다는 뜻
• div는 기본적으로 display:block 내재되어 가로로 한 행을 전부 차지한다
  --> 방지하려면 float, display: inline-block (내 크기만큼 차지)
• 하지만 float 다음에 다른 div 박스 만들면 해당 박스는 뜬 박스 뒤로 숨어 안보이게 되는 bug 발생
  - clear: both --> float 다음에 오는 요소에게 주면 해결 가능. float 쓰고나서 다음에 오는 요소는 clear 주는게 좋음