Display
Table of contents
Display Property
What is Display?
specifies if/how an element is displayed
▸ 레이아웃을 컨트롤 하는데 가장 중요한 CSS 속성
▸ 기존 속성을 대체할 수 있음, 상속 X, 애니메이션 X
▸ 블록, 인라인 display가 거의 대부분의 요소의 기본 속성임
!Note
요소가 어떻게 보여질지만 바꾸는것, 따라서 inline을 block element라고 바꿔서 안에 다른 요소가 오게 하면 안됨
Display Value
display: block
starts on a new line and takes up the full width available
(stretches out to the left and right as far as it can)
<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>
display: inline
does not start on a new line and only takes up as much width as necessary
<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>
display: none;
commonly used with JavaScript to hide and show elements without deleting and recreating them
<script> element uses display: none; as default
!Visibility
display: none;은 요소 자체가 사라지고,
visibility: hidden;은 빈공간으로 남고 사라진다.
…
i () you
display:
<div>
i (<span style="visibility: hidden">miss</span>) you
</div>
<div>display: <span style="display: none">none</span></div>
display: inline-block;
인라인 요소와 다른점은 width, height값을 설정할 수 있다는것
블록 요소와 다른점은 특정한 width값을 사용해 줄바꿈을 하지않음
기본적인 마진값이 있음
img태그만 inline-block 요소