글자와 상자_02_block

블록(block) 요소란?

상자(레이아웃)을 만들기 위한 요소를 뜻함

블록의 대표적인 요소로는 div 태그가 있다

<div>Hello</div>
<div>World!</div>

위와 같이 블록(block)을 작성해 보았고 실행결과

위처럼 결과가 나왔고 코드에 작성한대로 2줄로 나오게 되었다.
이유는 인라인(inline)과는 반대로 수직으로 요소가 출력이 되기때문이며
대표적 블록(block)요소의 특징은 크게 4가지로

1. 부모요소의 크기만큼 가로(width)의 크기가 자동으로 늘어난다.
2. 포함한 콘텐츠의 크기만큼 자동으로 세로(height)의크기가 줄어든다.
3. 가로 세로의 넓이를 지정할수 있다.
4. 내부 외부의 여백을 지정할수 있다.