모든 HTML 요소는 웹 페이지에서 일정 공간을 차지하게 됩니다. 그리고 이러한 공간을 CSS에서는 박스 모델(Box Model)로 정의하고 있습니다.
HTML 요소의 박스 모델은 Content, Padding, Border, Margin으로 구성되어 있습니다.
Content - 텍스트나 이미지가 들어있는 HTML 요소의 실직적인 내용.Padding - Content와 Border사이의 영역으로 쉽게 말해 안쪽 여백입니다.Border - Content를 감싸는 테두리 입니다.Margin - 테두리와 이웃하는 요소 사이의 간격으로 쉽게 말해 바깥쪽 여백입니다.모든 HTML요소의 박스모델은 이렇게 구성되어 있으며, 웹 브라우저 > 개발자도구 > Computed 탭에서 박스모델을 확인할 수 있습니다.
위 보이시는 것처럼 이 형태가 박스모델의 기본적인 형태이며 Content, Padding, Border, Margin으로 구성되어있습니다.
박스 모델은 속성을 지정하지 않으면 브라우저가 선언한 기본값으로 셋팅되며, 우리는 CSS 속성으로 박스모델 값을 변경할 수 있습니다. 여기에서는 간단히만 알아보고 밑에서 더 자세히 알아 보도록 하겠습니다.
width - Content 영역은 width 값을 이용하여 가로 너비를 지정할 수 있습니다.
height - Content 영역은 height 값을 이용하여 세로 너비를 지정할 수 있습니다.
width: 200px;
height: 200px;
<aside>
💡 인라인 레벨 요소(Inline Level Element)에는 width, height 가 적용되지 않습니다. 왜냐하면 인라인 요소는 콘텐츠 만큼의 영역을 갖기 때문 입니다. (display: inline)
만약 인라인 요소에 width, height 를 변경하고 싶다면 display: inline-block 으로 변경해야 합니다.
inline-block - block과 inline의 중간 형태로 요소는 inline인데 내부는 block처럼 표시함</aside>