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

●block

width, height 지정 가능

margin, padding 지정 가능

 

• <div>
• <h1> ~ <h6>
• <p>
• list 태그 (<ul>, <ol>, <li>, <dl>, <dt>, <dd>)
• <form>
• navigation 태그 (<header>, <nav>, <footer>, <section>, <aside>, <article>)

 

●inline

width, height 지정 불가

width는 컨텐츠 길이만큼 지정됨, hegith는 폰트 크기만큼 지정됨

margin 위아래X / padding 좌우O, 위아래O(But only 시각O, 공간 차지X)

 

• <span>
• <a>
• <img>
• <button>
• <input>
• <br>

●inline-block

block처럼 줄바꿈이 이루어지지 않음

block처럼 height, width 지정 가능, 만약 지정 안했을 경우 inline처럼 크기가 컨텐츠 크기 만큼 잡힘

 

●none

지정된 요소가 아예 없는 것처럼 사라지게 보임. visibility:hidden과는 다른 점은 visiblity:hidden은 요소가 보이지는 않지만 공간을 차지하고 있는데, display:none은 요소가 보이지 않고, 공간도 차지하지 않는다는 점이다.

보통은 javascript와 함께 사용되어 element를 삭제하지 않으면서도 요소를 보이고 보이지 않게 할 때 사용된다. (ex-메뉴 위에 마우스를 올리면 메뉴 목록이 나타나도록 구현할 때)

• block 요소

<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>

 

block 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다.

• inline 요소

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>