CSS Box Model

• “Do it! HTML5 + CSS3 웹표준의 정석” / 이지스 퍼블리싱 / 고경희 지음 / 개정1판 9쇄 발행 2019년 6월 3일 /
• CSS Box Model

• 모든 HTML요소들은 박스로 여겨질 수 있다.
• CSS에서, 디자인과 레이아웃을 언급할 때 “박스모델 (box model)“이라는 용어가 사용된다.
• CSS 박스모델은 기본적으로 모든 HTML요소들을 감싸는 박스이다. CSS 박스모델은 마진 (margins), 보더 (borders), 패딩 (padding), 그리고 실제 콘텐츠로 구성된다.

• 콘텐츠 (Content) : 박스모델의 콘텐츠로서 텍스트와 이미지가 나타나는 영역
• 패딩 (Padding) : 콘텐츠 주변 영역을 나타내고, 기본속성은 투명 (transparent), 테두리와 내용 사이의 여백.
• 보더 (Border) : 콘텐츠와 패딩의 주변 영역
• 마진 (margin) : 여러 박스 모델 사이의 여백, 요소들 사이의 여백.

박스모델에서 콘텐츠 영역의 크기를 지정할 때는 너비를 지정하는 width속성과 높이를 지정하는 height속성을 사용한다.

display속성은 레이아웃을 조절하는 것에서 가장 중요한 CSS 속성이다.

• display속성은 요소의 표시 여부와 표시 방법을 지정한다.
• 모든 HTML 요소는 요소의 타입이 무엇인지에 따라 기본 display 값을 가지고 있다. 대부분 요소들의 기본 display값은 block 또는 inline이다.

• 기본 너비 값: 100% –> 블록 레벨 요소는 항상 새 줄에서 시작하고 가능한 전체 너비를 차지한다.(최대한 우측, 좌측으로 펼쳐진다)
• 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소이다.
• 한 줄을 차지한다는 것은 해당 요소의 너비가 100%이라는 의미이다.
• 따라서 한 줄에 하나만 배치
• 너비 값, 높이 값을 가질 수 있다. 상하마진을 가질 수 있다.

• 기본 너비 값 : 콘텐츠의 너비 값
• 줄을 차지하지 않는 요소이다 –> 한 줄에 여러 개를 배치할 수 있다.
• 한 줄에 여러 개의 인라인 레벨 요소를 표시할 수 있다.
• 크기 값을 가질 수 없다. 상하마진을 가질 수 없다.

• 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정하고 싶을 때 사용
• 기본 너비 값 : 콘텐츠의 너비 값
• 한 줄에 여러 개 배치
• 크기 값, 상하마진을 가질 수 있다.

• 블록 레벨, 인라인 레벨, 인라인 블록 레벨 비교 사진 올려야 한다.