박스 모델 (Box Model) 박스 모델은 웹의 구조를 보여줍니다. 위 사진과 같이 모든 웹사이트는 구조를 갖고 있는데요. 웹사이트의 박스를 살펴보시려면 맥북 기준으로 cmd+option+i 를 누르시고 아래 "Computed" 섹터를 누르시면 보입니다. 이 기능을 활용해서 HTML에 쓰여져 있는 내용을 구조화 시키고 좀 더 가독성을 높일 수 있습니다. 각 구성요소에 대해 살펴보도록 하겠습니다. margin (여백) 여백 중 바깥 여백. 각각의 값은 top, right, bottom, left로 시계방향입니다. 값을 두개만 넣었을 때는 top, bottom값 // left, right값으로 나뉘어 집니다. 하나만 넣는 경우 모든 네 방향에 적용됩니다. border(경계선) 테두리는 다양하게 표현될 수 ..