CSS Layout-the display property

display 속성은 레이아웃을 제어하기 위한 가장 중요한 속성이다.

the display property

display 속성은 요소가 표시될지 말지, 어떻게 표시될지 지정한다.

모든 HTML 요소는 해당 요소의 타입에 따라 기본 display 값이 있다. block, inline이 있다.

Block-level Elements

항상 새로운 줄에서 시작하고 전체 너비를 가진다.

<div>, <h1>-<h6>, <p>, <form>, <header>, <footer>, <section>이 block 요소이다.

Inline Elements

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

<span>, <a>, <img>가 inline 요소다.

Display:none;

display:none;은 요소를 삭제하거나 생성하지 않고 숨기거나 보여주기 위해 흔히 쓰인다.

<script> 요소는 display:none;을 기본으로 쓴다.

Override The Default Display Value

기본 디스플레이 값 무시

모든 요소는 기본 디스플레이 값이 있지만, 이걸 무시할 수 있다.

li {
    display: inline;
}

리스트 요소들이 수직이 아닌 수평으로 출력된다.

Hide an Element-display:none or visibility:hidden

요소를 숨기는 데엔 2가지 방식이 있다

display:none;을 하면 요소가 사라진다.

visibility:hidden;을 하면 요소가 사라지지만 이전 공간은 유지되고 레이아웃에 영향을 미친다.

https://www.w3schools.com/css/css_display_visibility.asp