html 요소들은 각각 기본적으로 display 속성을 가지고 있습니다.
display 의 종류는 block, inline-block, flex 등이 있습니다.
우선 block 속성의 특징입니다.
html이 위에서부터 요소들을 채워나갈때 요소의 display 속성이 block 속성을 가지고 있으면 요소 옆에 공간이 남아도 다른 요소들이 들어오지 못하게 막습니다.
block의 특징
1. 자식 태그의 width 값을 따로 선언하지 않은 경우 자식 태그는 부모 태그의 width 값을 기본적으로 가집니다.
자식 태그인 child 태그에 width값을 선언하지 않았지만 부모 태그인 parent 태그의 width 값인 800px이 자식 태그인 child태그에 적용된것을 볼 수 있습니다.
2.따로 width값을 선언할 경우 남은 공간은 margin으로 자동으로 채움니다
(하지만 margin이 없는것 처럼 보인다.)
parent 태그 아래 child와 other라는 자식태그를 두개 만들고 각각의 width 값을 300px과 200px로 적용했습니다.
이때 child태그의 속성을 확인해보면 margin에 - 표시만 있을 뿐 값이 없는걸로 나옵니다.
하지만 화면에서 확인해보면 margin이 존재하는 것처럼 보이며 다른 other태그가 위로 올라오지 못하게 막습니다.
이러한 특성이 block태그의 특성 중 하나입니다.
3.따로 부모의 height값을 선언하지 않을경우 부모는 자식요소의 height의 합을 자신의 height으로 가집니다.
부모 태그인 parent의 height 값을 선언하지 않았지만 자식요소들인 child와 other의 height값의 합인 200px이 부모 태그인 parent의 height 값으로 존재 하는것을 확인할 수 있습니다.
4.block 타입의 경우 Box Model의 모든 속성이 사용가능합니다.
block 타입의 경우 위의 예시와 같이 Box Model의 기본 속성인
width, height, border, padding, margin의 기본 속성을 모두 다 사용 가능합니다.
???