블럭레벨 엘레멘트의 특성

 

 블럭 레벨 엘레멘트는 엘레멘트에 주어진 너비 값을 모두 사용하고, 다른 엘레멘트와는 줄 바꿈을 하여 영역이 수직으로 쌓이는 요소이다. 대표적인 엘레멘트로 <h>, <p>, <div> 등이 있다.

 

 

○ 블럭레벨이 쌓이는 특성

 

: 블럭레벨 엘레멘트는 다른 엘레멘트와 줄바꿈을 하여 영역이 수직으로 쌓인다. 이 때 인라인 레벨과도 줄 바꿈을 한다.

 

<div>
border:1px solid blue;<br/>
width:200px;<br/>
height:100px;<br/>
background-color:gray;<br/>
</div>

<div>
수직으로 쌓이는 블렉레벨의 특성
</div>

<span>인라인 요소와의 관계<span>

 

 

 

 

○ 영역과 콘텐츠와의 관계

 

: 블럭레벨은 지정한 너비와 높이 값을 모두 사용한다. 따라서 콘텐츠의 내용이 지정한 너비보다 작아도 영역의 크기는 유지된다. 하지만 콘텐츠가 지정한 너비와 높이를 초과하는 경우 너비와 높이는 그대로 유지하지만 콘텐츠는 높이를 초과해 overflow하게 된다.

 

<div>
border:1px solid blue;<br/>
width:200px;<br/>
height:100px;<br/>
background-color:gray;<br/>
</div>

<div>
콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우& 콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우&
</div>

 

 

 

따라서 콘텐츠를 블럭레벨 안에서만 표현하기 위해서는 overflow 속성을 사용해 콘텐츠를 제어해야 한다.

 

<div>
border:1px solid blue;<br/>
width:200px;<br/>
height:100px;<br/>
background-color:gray;<br/>
</div>
<div style="overflow:scroll;">
콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우& 콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우&
</div>
<div style="overflow:hidden;">
콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우& 콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우&콘텐츠가 넘쳐 나는 경우&
</div>