Display
None
요소가 랜더링 되지 않는다. 즉, 랜더 트리에 반영되지 않는다.
이와 동일한 효과를 주는 visibility:hidden이 있지만,
display: none과 visibility:hidden과의 차이점은
display: none은 랜더 트리에 반영이 안되어 랜더링 대상이 안되고
visibility:hidden은 랜더 트리에 반영되어 랜더링 대상이 되어 해당 요소의 크기만큼 영역을 차지하고 단지 보이지 않을 뿐이다.
inline
해당 요소의 컨텐츠의 크기만큼 영역을 차지한다.
위에 사진처럼 한줄 영역의 크기보다 가로가 작은 경우는 여러개를 나열해서 배치할 수 있다.
컨텐츠의 크기만큼 영역을 차지하기 때문에 box-model에서 width & height 가 적용되지 않는다.
특이하게 padding & margin & border 의 경우는 좌우에만 적용된다.
inline elements
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite>
<code> <dfn> <em> <i> <img> <input> <kbd> <label> <map>
<object> <output> <q> <samp> <script> <select> <small>
<span> <strong> <sub> <sup> <textarea> <time> <tt> <var>block
해당 요소가 위치한 줄의 모든 영역을 차지한다. 따라서 새로운 요소를 추가하면 기존 요소 아래에 배치된다.
box-model의 모든 속성이 적용된다.
block-level elements
<address> <article> <aside> <blockquote> <canvas> <dd>
<div> <dl> <dt> <fieldset> <figcaption> <figure> <footer>
<form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript>
<ol> <p> <pre> <section> <table> <tfoot> <ul> <video>inline-block
inline 과 block의 특징을 모두 가진 속성이다.
inline 특징으로 content의 영역만큼 크기를 가진다.
배치는 inline을 따르고 box-model은 block을 따른다.
block을 따르기 때문에 box-model의 모든 속성이 적용된다.
inline과 inline-block에서 요소 간 공백(띄어쓰기 or 개행에 의해 발생됨)이 존재하면 화면에 출력되는 요소 간 약4px 정도의 공백이 생긴다.
display 와 box-model의 관계
| display | width | height | padding | border | margin |
|---|---|---|---|---|---|
| block | O | O | O | O | O |
| Inline | X | X | O(좌우) | O(좌우) | O(좌우) |
| Inline-block | O | O | O | O | O |
실제로 inline요소의 padding & border은 좌우뿐만 아니라 상하에도 적용이 된다. 하지만 line-box에 영향을 주지 못하기 때문에 상하에 대한 효과는 부모 요소 박스에 적용이 안된다.
