블록요소는 문서의 내용을 표시하는 구역을 설정하는 것. 시맨틱 태그(header,nav,main,article...etc), div와 거의 동일한 성격을 갖고 의미있는 단어로 표시를 단어를 사용한 것 뿐이다.
블록요소는 기본적으로 너비(width)는 브라우저 크기의 100%, 높이(height)는 자식요소의 크기
블록요소의 크기 변경을 위해 width,height,스타일을 직접 설정할 것.
문서 최상위 요소인 Body의 너비도 100%, 높이도 자식요소의 크기
Box Model (레이아웃과 관련된 속성)
Div 두번째 테스트 - % 단위를 사용하면 부모요소의 크기를 기준으로 설정합니다.(상대값)
해당 Div부모요소는 body, body의 widht(너비)는 브라우저의 100%
body의 높이는 height(높이)는 자식요소의 크기만큼 설정됨.
==> 박스의 크기를 결정하는 값은? 너비(width),높이(height),패딩(padding),테두리(border)
ex -- width 200px; height 300px; padding 30px; border 2px;
전체 박스크기 = [width+{(padding*2)+(border*2)}]+[height+{(padding*2)+(border*2)})