[프론트엔드][CSS3] 10. display (block/inline)

display

: 요소를 어떤 성격으로 보여줄지 결정하는 속성

 

 

- block

: 박스와 같이 쌓이면서 나타나는 성격 (Block Level Element)

화면 전체를 사용하는 성격

<address> <article> <aside> <audio> <blockquote>
<canvas> <dd> <div> <dl> <fieldset> <figcaption>
<figure> <footer> <form> <h1> <h2> <h3> <h4> <h5> <h6>
<header> <hgroup> <hr> <noscript> <ol> <output>
<p> <pre> <section> <table> <ul> <video>

 

 

- inline

: 글자와 같이 나열되는 성격 (Inline Level Element)

내용물에 따라 폭이 결정된다.

* width, height, margin-top, margin-bottom 과 같이 폭을 가지는 스타일 사용이 불가하다! *

<a> <abbr> <acronym> <b> <bdo> <big> <br/> <button>
<cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label>
<map> <object> <q> <samp> <small> <script> <select> <span>
<strong> <sub> <sup> <textarea> <tt> <var>

 

 

- inline-block

: 인라인과 블록의 합성 성격 (Inline, Block Level Element)

Inline과 같이 한 줄에 표현하면서도 block과 같이 정의가 이루어지는 표현 ⇨ margin, width, height 적용 가능!

 

inline-block을 지정한 요소는 성격자체는 inline 요소처럼 동작 하지만, 해당 요소 내부에서는 block 요소처럼 동작한다.

주로 요소를 나열하는 경우 사용되기도 한다.

 

 

- none

: 화면에서 요소를 보이지 않게 처리한다.

 

 

<div>는 block으로 한 줄에는 한 개만 표시가 되고, width, height, margin, padding이 모두 적용되었다.

 

<span>은 inline으로 한 줄에 나열되고, 넓이를 가지는 속성은 적용되지 않았다.

 

<p>는 inline인데 inline-block으로 설정해서  width, height, margin, padding이 적용되고, 글자처럼 한 줄에 나열 된다.

 

<h1>은 block인데 none으로 설정을 하였더니 보이지 않는 것을 확인할 수 있다.