[CSS기초]박스모델

블록레벨(block-lebel) 요소 

태그를 사용해 요소를 삽입했을 떄 혼자 한 줄으르 차지하는 요소

해당 태그 : <p>, <h1>~<h6>, <ul>, <ol>, <div>, <blockquote>, <form>,<hr>, <table>,<fieldset>, <address>

인라인 레벨(inline-level) 요소

줄을 차지하지 않는 요소. 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. 

해당 태그 : <img>, <object>, <br>, <sub>, <sup>, <span>, <input>, <textarea>, <label>, <button>

박스 모델(box model) 요소

- 위의 블록 레벨 요소들은 모두 박스 형태이다. 예를 들어 <p> 태그를 사용하는 텍스트 단락은 블록 레벨 요소인데 텍스트 단락 앞뒤에 빈 줄이 생기면서 텍스트 단락이 하나의 박스 형태를 가진다 

- width, height속성 : 콘텐츠 영역의 크기

width: 크기 | 백분율 | auto

height: 크기| 백분율 | auto

-    속성 값

크기 : 너비나 높이 값을 px이나 cm 같은 단위와 함께 수치로 지정한다

백분율 : 박스 모델을 포함하는 부모 요소를 기준으로 너비나 높이 값을 백분율로 지정한다.

auto : 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동으로 결정된다. 기본 값이다.

display 속성 - 화면 배치 방법 결정하기