14. display _ inline과 block 속성을 변경

display는 얠 어떻게 보여줄래? 정도로 해석할 수 있습니다.
앞서 15번째 html 강좌에서 inline태그와 block태그에 대해 나왔었는데
display는 inline태그와 block태그에 관한 속성을 정의해 줍니다.

속성값이 생각보다 엄청 많은데 자주 쓰는 네가지만 알아보도록 합시다.
inline / block / inline-block / none 이렇게 네가지가 자주 쓰입니다.
(나머지도 알고 싶다면 http://www.w3schools.com/cssref/pr_class_display.asp에서 확인해 봅시다.

inline

속성값을 inline으로 만들어 줍니다. 기본값이 block태그라도 display:inline으로 지정해 주면 inline이 됩니다.
block 태그인 p에 inline 속성을 줬을때랑 안줬을때를 비교해 봅시다.

<p class="ex_inline">block태그</p>
<p class="ex_inline inline">inline태그로 바꿔줘!!</p>
 

CSS

<style>
  p.ex_inline {width:100px;height:100px;text-align:center;line-height:100px;background:springgreen;}
  p.inline {display:inline;}
</style>
 

block태그

inline태그로 바꿔줘!!

block

속성값을 block으로 만들어 줍니다.
주로 쓰이는 경우는 inline태그에 높이값이나 padding, margin을 줄때 사용합니다.
inline 태그인 span에 block 속성을 줬을때랑 안줬을때를 비교해 봅시다.

<span class="ex_block">inline태그</span><br><br>
<span class="ex_block block">block태그로 바꿔줘!!</span>
 

CSS

<style>
  span.ex_block {width:300px;height:100px;text-align:center;background:tomato;}
  span.block {display:block;}
</style>
 

inline태그

block태그로 바꿔줘!!

inline-block

inline-block은 위치는 inline을 따라 가지만 block처럼 width나 height를 줄 수 있습니다.
한마디로 크기를 가지되, inline태그 처럼 줄바꿈이 일어나지 않고 옆으로 쭉~ 늘어섭니다.
inline태그에 크기를 주기위해 사용되고, block태그를 옆으로 쭉~ 늘어뜨리기 위해 사용합니다.
inline-block을 inline태그에 썼을때, block태그에 썼을때를 비교해 봅시다.
inline태그에 inline-block을 주면 block태그의 속성을 받아 크기를 가질 수 있습니다.
반면 block태그에 inline-block을 주면 inline태그의 속성을 받아 줄바꿈이 일어나지 않습니다.

<span class="ex_inblock inin">inline</span>
<span class="ex_inblock inin">inline</span>
<span class="ex_inblock inin">inline</span><br><br>
<p class="ex_inblock inbl">block</p>
<p class="ex_inblock inbl">block</p>
<p class="ex_inblock inbl">block</p>
 

CSS

<style>
  span.ex_inblock, p.ex_inblock {width:100px;height:100px;text-align:center;background:skyblue;}
  span.inin {display:inline-block;}
  p.inbl {display:inline-block;}
</style>
 

inline inline inline

block

block

block

none

마지막으로 속성값을 none으로 주면 말그대로 '안보임' 입니다.
앞에서 배운 opacity의 경우도 값을 0으로 주면 '안보임' 입니다.
둘의 차이는 opacity는 말그대로 투명해 진것이므로 그 자리에 존재하고는 있어요. 공간을 차지하죠.
하지만 display:none은 사라지는 겁니다. 자리가 없어요. 공간을 차지하지 않습니다.
아래 예시를 보면 none을 안준 기본값은 그대로 출력이 되고 밑에 공간이 남는 것을 알 수 있습니다.
none을 준 p는 사라지고 opacity를 준 p가 보이지는 않지만 공간을 차지하고 있는것입니다

<p class="ex_none">none 안준것</span><br><br>
<p class="ex_none none">none 준것</p>
<p class="ex_none opacity">opacity</p>
 

CSS

<style>
  p.ex_none {width:200px;height:30px;text-align:center;background:coral;}
  p.none {display:none;}
  p.opacity {opacity:0;}
</style>
 

none 안준것

none 준것

opacity

* 개인적인 공부를 정리하는 블로그입니다.