box-model 이란? "CSS Box Model은 요소를 위해 생성되고 비주얼 서식 모델을 따라 배치되는 사각형 박스(패딩 및 마진 포함)를 정의하는 CSS 모듈입니다." 라고 MDN에 친절하게 적혀있고, 크롬 개발자도구에서 흔히 볼 수 있는 그 모양이다. 왜 알아야 하는가? 보통 개발을 하면서 디자인 시안에 맞게 코드를 작성 하는데도, 기대한 모습과는 다른 결과물이 브라우저에 잡히게 된다. 대부분의 이유는 박스모델에 대한 이해가 부족해 생기는 일이다. 예시를 통한 이해 디자이너가 박스의 너비를 800px, border 를 1px solid red로 만들어달라 했다고 하자. 그러면 .box { width: 800px; border: 1px solid red; } 위와 같이 작성을 할 것이고, 새로고침..