[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>