display 속성이란 요소를 화면에 배치하는 방법이다.
display의 종류에는 none | contents | block | inline | inline-block | table | table-cell 등이 있다. 이중 inline, block, inline-block에 대해 알아보자.
block
block요소는 코드 한 줄을 다 차지한다. 블럭과 같이 높이, 넓이, padding, margine 등을 가진다. 그 안에 여러 요소를 넣을 수 있다.
따라서
<div></div><div></div>와 같이 적더라도 두 줄에 걸쳐 나타나게 된다.
block 요소의 종류에는
<div>, <p>, <h1> ~ <h6>, <ul>, <ol>, <li>, <form> <hr> <table> <address>등이 있다.
display: block을 통해 다른 요소도 블럭 요소로 전환할 수 있다.
inline
inline 요소는 한 줄을 다 차지하지 않는다. 대신 내용물의 길이만큼만 차지하기 때문에 한 줄에 여러 요소가 들어갈 수 있게 된다. 또한 높이를 가지지 않는다.
또한 같은 inline요소를 포함할 수 있지만 block 요소는 포함할 수 없다. 높이를 가지지 않는 inline 요소에 block 요소를 포함할 수는 없을 것이다.
inline 요소의 종류에는
<img>, <br>, <a>, <span>, <input>, <button>, <label>등이 있다.
inline-block
inline-block 요소를 사용하면 요소들을 한 줄에 배치할 수 있다. 그러나 inline 요소와 다르게 높이나 마진 등의 값을 입력할 수 있다. 따라서 inline 요소와 block 요소의 특징을 모두 가진다. 즉 block 요소를 inline 요소처럼 배치하고 싶고 동시에 크기도 가지게 하고 싶을 때 사용한다.
none
번외로 none은 화면 상에 해당 요소를 띄우지 않는 속성이다.
visibility: hidden과의 차이는 hidden은 화면에서 보이지만 않을 뿐, 원래 공간을 그대로 차지하지만 none은 공간을 차지하지 않는다.
