HTML의 모든 요소는 상자(Box)의 형태를 갖고 있다. 태그 내부에 위치해 실제 표시되는 내용을 Content(내용)라고 한다. 보이지 않지만 이러한 컨텐츠를 감싸고 있는 다른 요소들이 있다. 아래 그림과 같이 박스 형태 전체를 가리켜 박스 모델(Box Model)이라고 부른다. 내용(Content)는 이미지나 텍스트와 같이 우리가 코드 상에서 태그 사이에 담는 내용, 즉 실제로 담고 있는 부분이다. 경계선(Border)은 말 그대로 컨텐츠를 감싸고 있는 테두리이다. 패딩(Padding)은 여백이라는 뜻으로 컨텐츠와 경계선 사이의 여백이다. 마진(Margin)은 경계선 밖의 여백이다. 지금부터 박스 모델에 대해 자세히 알아보자. Content #inner { background-color: pink;..
