html display 속성, inline display와block display

오늘은 inline display와 block display 에 대해 설명을 해드리겠습니다.

 

우선 두 display의 특징은 다음과 같습니다.

 inline display (ex) <i>, <span>, <b>)

:  다른 요소들과 같은 줄에 머무르려고 하는 성향

:  가로 길이는 필요한 만큼만 차지하는 성향

 

block display (ex) <div>, <h1>, <p>)

: 새로운 줄에 가려고 하는 성향

: 가로 길이를 최대한 많이 차지하려고 하는 성향

 

다음은 예제입니다.

 

 

 

첫번째 사진에서 body 부분에  <i>My name</i>  이렇게 i태그로 감싼 것을 볼 수 있습니다.

두번째 사진에서는 body 부분에<div>My name</div>이렇게 div 태그로 감싸였습니다. 차이가 뭘까요?

첫번째 사진에 i 태그가 inline display 이기 때문에 줄바꿈이 일어나지 않고 Hello World ! My name is Motown!

이런식으로 같은 줄에 머무르는 것을 볼 수 있습니다.

반대로 두번째 사진에서는  div 태그가 block display 이기 때문에 줄바꿈이 일어나면서

Hello World!

My name

is Motown!

이런식 으로 3줄이 됩니다. 

 

 

만약 첫번째 예제에 <i>태그에 css 속성으로 display : block을 주면 어떻게 될까요?

 

display : block; 을 주면 첫번째 예제에 block display 인 <div>태그로 감싼것 처럼 

block display의 특징을 갖게 되면서 위사진 처럼 

3줄이 됩니다.

 

 

 

 

오늘은 inline display와 block display 에 특징과 두 display에 차이에 대해 알아보았습니다.