박스모델은 웹 페이지를 만드는데 있어 기본 중에 기본이라고 할만큼 중요한 내용이다. 그럼에도 소홀해지기 쉬운 내용인데 제대로 이해하고 있지 못하면 웹페이지의 레이아웃을 설계하다 문제가 발생했을 시에 원인 파악이 힘들어질 수 있다.박스모델은 html 요소(element)들이 문서 내의 공간을 차지하는 부피에 관한 규칙이다. 차지하는 모양이 네모 박스(box) 모양이라서 박스모델이라고 한다.태그(tag)들은 내용(content)를 감싸고 있고 내용은 문자 또는 이미지 등이 있으며 문서에서 일정한 부피를 박스모양으로 차지한다. 그리고 내용들 간에 간격이 정해지는지는 방식도 존재한다. 이제부터 하나씩 알아가보자.박스모델그림은 html 코드와 브라우저에서 코드를 실행한 모습이다. div 태그에 css 스타일로 5..
