layout 실습

프루트 2022. 5. 19. 21:13

1. margin을 이용해 div 요소들을 화면 중앙에 정렬 시킨다

2. padding값을 주게 되면 width값에 padding값을 더한게 div 좌우 사이즈가 되기 때문에 box-sizing: border-box를 사용해서 width값을 고정시킨다.

/* .box02의 margin-bottom값이 30px이고 .box03의 margin-top값이 100px이지만 .box02의 margin값이 적용되지 않아서 아래 그림처럼 .box03의 top쪽 여백이 130px이 아니라 100px만 적용된다. */