[CSS] display 속성(none.block,inline,inline-block)

HTML5 시대가 들어서면서 다양한 display 속성 등장하기 시작했는데요

하지만 이런 다양한 display 속성을 완벽하게 지원하는 웹브라우저가 없기 때문에 오늘은중요한 display 속성만 알아보도록 하겠습니다

1. display:none 속성

none 속성은 태그를 화면에 보이지 않게 만드는 속성중하니입니다

즉 display:none속성을 사용하게 되면 적용한 태그가 화면상에 보이지 않게 되는거죠

2. display:block

block 속성은 태그를 block 형식으로 변형시켜주는 속성입니다

inline 속성의 태그를 block형식으로 변경할때 자주 사용되는 태그라고 할수 있겠죠

3. display:inline

inline 속성은 block 속성과 반대로 block형식의 태그를 inline형식으로 변형할때 사용되는

속성입니다 

4. display:inline-block

display속성에서 inline-block 부분이 이해하기기 힘든 부분이지 안을가 싶은데요

inline-block 형식은 inline 성격을 띄면서 block형식의 성격 띄는 속성입니다

이말은 inline 형식은 width.height가 적용이 안되지만 inline-block 형식을 부여함으로써

inline형식이 width,height 속성값을 부여할수 있게 된다는 뜻과 같습니다

또한 inline형식은 좌우로만 margin값이 적용되지만 inline-block형식을 부여하게 되면

상,하,좌,우 margin 값을 부여할수 있습니다.