====== CSS Box Model ======
<WRAP left notice 80%>
  * description : CSS와 박스 모델
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-02
</WRAP>
<WRAP clear></WRAP>
\\
====Source of the article==== 
  * "Do it! HTML5 + CSS3 웹표준의 정석" / 이지스 퍼블리싱 / 고경희 지음 / 개정1판 9쇄 발행 2019년 6월 3일 / 
  * [[https://www.w3schools.com/css/css_boxmodel.asp|CSS Box Model]]
\\
  * 모든 HTML요소들은 박스로 여겨질 수 있다.
  * CSS에서, 디자인과 레이아웃을 언급할 때 **"박스모델 (box model)"**이라는 용어가 사용된다. 
  * CSS 박스모델은 기본적으로 모든 HTML요소들을 감싸는 박스이다. CSS 박스모델은 마진 (margins), 보더 (borders), 패딩 (padding), 그리고 실제 콘텐츠로 구성된다. 
\\
====박스모델(box model)-박스 형태의 콘텐츠====
{{:wiki:css:css_note:css_box_model.png?400|}}
  * 콘텐츠 (Content) : 박스모델의 콘텐츠로서 텍스트와 이미지가 나타나는 영역
  * 패딩 (Padding) : 콘텐츠 주변 영역을 나타내고, 기본속성은 투명 (transparent), 테두리와 내용 사이의 여백.
  * 보더 (Border) : 콘텐츠와 패딩의 주변 영역
  * 마진 (margin) : 여러 박스 모델 사이의 여백, 요소들 사이의 여백.
\\
====콘텐츠 영역의 크기====
박스모델에서 콘텐츠 영역의 크기를 지정할 때는 너비를 지정하는 width속성과 높이를 지정하는 height속성을 사용한다.
^  속성 값  ^ 설명                                              |
^  <크기>  | 너비나 높이 값을 px(픽셀)이나 cm(센티미터) 같은 단위와 함께 수치로 지정한다  |
^  <백분율>  | 박스 모델을 포함하는 부모 요소를 기준으로 너비나 높이 값을 백분율(%)로 지정한다  |
^  auto  | 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정된다. 기본 값이다.   |

=====CSS Layout - The display Property=====
**''display''**속성은 레이아웃을 조절하는 것에서 가장 중요한 CSS 속성이다. 
\\
====The display Property====
  * **''display''**속성은 요소의 표시 여부와 표시 방법을 지정한다. 
  * 모든 HTML 요소는 요소의 타입이 무엇인지에 따라 기본 display 값을 가지고 있다. 대부분 요소들의 기본 display값은 **''block''** 또는 **''inline''**이다. 
\\
====Block-level Elements (블록 레벨 요소)====
  * 기본 너비 값: 100% --> 블록 레벨 요소는 항상 새 줄에서 시작하고 가능한 전체 너비를 차지한다.(최대한 우측, 좌측으로 펼쳐진다)
  * 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소이다. 
  * 한 줄을 차지한다는 것은 해당 요소의 너비가 100%이라는 의미이다.
  * 따라서 한 줄에 하나만 배치
  * 너비 값, 높이 값을 가질 수 있다. 상하마진을 가질 수 있다. 

\\
====Inline Elements (인라인 요소)====
  * 기본 너비 값 : 콘텐츠의 너비 값 
  * 줄을 차지하지 않는 요소이다 --> 한 줄에 여러 개를 배치할 수 있다. 
  * 한 줄에 여러 개의 인라인 레벨 요소를 표시할 수 있다. 
  * 크기 값을 가질 수  없다. 상하마진을 가질 수 없다.
\\
====Inline Block Elements (인라인 블록 요소)====
  * 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정하고 싶을 때 사용
  * 기본 너비 값 : 콘텐츠의 너비 값
  * 한 줄에 여러 개 배치
  * 크기 값, 상하마진을 가질 수 있다. 
\\
===블록 레벨 태그 vs 인라인 레벨 태그===
^  종류              ^  해당 태그  ^                                                                                   
^  블록 레벨 태그    | <p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address>  |
^  인라인 레벨 태그  | <img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>            |
\\
==== ====
  * 블록 레벨, 인라인 레벨, 인라인 블록 레벨 비교 사진 올려야 한다. 



{{tag>오션 CSS}}