맨 땅에 프론트엔드 개발자 되기

CSS 박스 모델 (Box Model) 웹 페이지를 만들 때 레이아웃을 구성하기 위해서는 박스 모델에 대해서 알아야 한다. 각각의 태그들은 태그 자신이 화면에서 차지하는 영역을 가지고 있다. 그 영역은 아래 그림과 같이 구성된다. border: 태그(컨텐츠)를 둘러싸고 있는 선. padding: 컨텐츠와 border 사이의 간격. margin: border를 기준으로 컨텐츠와 다른 컨텐츠의 사이의 간격. 이렇게 border, padding, margin 세 개의 개념만 제대로 가지고 있으면 박스모델은 전혀 어렵지 않다. 컨텐츠를 둘러싸고 있는 각각의 공간을 조정해서 크기를 조절하고 이걸을 제대로 배치할 수 있으면 레이아웃 구성은 끝이기 때문이다. 배치하는 방법은 다음에 공부할 예정이고, 먼저 박스 크기를..