Block Level Element, Inline Element
두가지의 구분
블럭 레벨과 인라인 레벨을 가장 쉽게 구분할 수 있는 방법은 한 라인에 복수로 올 수 있나의 여부입니다.
블럭 레벨 엘리먼트는 한 Line에 하나만 위치할 수 있습니다.
반대로 인라인 레벨 엘리먼트는 한 Line에 두개 이상 위치할 수 있습니다.
Example
<div style="border:1px gray solid;">block-level element</div>
<div style="border:1px gray solid;">block-level element</div>
위와 같이 블럭레벨 엘리먼트인 div
엘리먼트를 연속으로 2개를 넣으면 각각 한라인을 차지하게 됩니다.
<span style="border:1px gray solid;">inline-level element</span>
<span style="border:1px gray solid;">inline-level element</span>
반면 인라인 엘리먼트인 span
엘리먼트는 한줄에 옆으로 여러개가 위치할 수 있습니다.
물론 블럭레벨 엘리먼트가 한줄을 다 차지한다고 하더라도, 자신을 포함한 element가 허용하는 한도내에서 차지합니다.
<table width="400">
<tr>
<td>
<div style="border:1px gray solid;">
block-level element
</div>
</td>
<td>
<div style="border:1px gray solid;">
block-level element
</div>
</td>
</tr>
</table>
위와 같이 테이블 안에 셀로 넣어버리면 그 셀의 크기만큼 자리를 차지하게 됩니다.
Author And Source
이 문제에 관하여(Block Level Element, Inline Element), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sms8377/Block-Level-Element-Inline-Element저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)