CSS | display 인라인, 블록, 숨기기

설명

Display 속성은 어떻게 영역을 잡을 것인지를 표현합니다. CSS 영역에서는 반드시 이해해야 하는 내용입니다. 영역을 잡기 위해서는 이 기능들을 잘 이해하고 있어야 우리가 원하는 디자인을 구현할 수 있습니다.

display : block

한줄 전체를 영역으로 잡습니다.

ex) <div> , <p> , <h1>

display : inline

일부분만 영역을 잡습니다.
해당 줄의 태그의 속성을 따르기 때문에 다른 엘리먼트와 나란히 배치되며 width 와 height 속성과 margin, padding 의 위 아래 간격을 지정해도 무시됩니다.

ex) <span> , <a> , <em>

display : inline-block

inline 엘레멘트처럼 일부분만 영역을 잡습니다. 그러나 width와 height 속성 지정이 가능해지고 margin, padding 의 위 아래 간격지정이 가능해집니다.

ex) <button> , <input> , <select>

display: none

이 속성을 사용하면 숨김처리합니다. 관리자 화면에서 숨김처리를 해제할 수 있기 때문에 민감한 정보는 display : none 속성으로 끄지 말고 아예 출력을 하지 않아야 합니다.