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에는 영향을 미친다.