Display

diplay 속성은 레이아웃을 조작하는데 매우 중요한 속성이다.

대부분 요소의 기본값은 block 또는 inline이다.

Block-level 요소

block-level 요소는 새로운 줄에서 시작하고 가능한 최대 너비로 차지한다.

• div
• h1 ~ h6
• p
• form
• header
• footer
• section

inline 요소

inline 요소는 필요한 만큼의 너비를 가지고 새로운 줄에서 시작하지 않는다.

• span
• a
• img

display: none;

위 속성은 요소를 제거하고 다시 만드는 것 대신 요소를 숨기고 나타내기 위해 JavaScript와 함께 사용하는 속성이다.

script 요소는 display:none 속성이 기본값이다.

display:none과 visibility:hidden의 차이

display:none은 요소를 숨기고 페이지는 그곳에 해당 요소가 없는 것처럼 나타낸다.

하지만, visibility:hidden은 요소를 숨기지만 이전과 동일한 공간을 차지한다. 즉, 요소는 보이지 않지만 layout에는 영향을 미친다.

display:none과 visibility:hidden 비교