요소 보이기 유형

1. 보이기 유형의 지정

  ㅇ { display : 값; } : 값에 따라 요소에 다양한 표현 유형 효과를 달리 지정 가능

     - inherit : (기본값) 요소 부모로부터 상속 받은 display 속성

     - block   : 요소를 박스화시켜,
        . 위아래에 줄바꿈이 일어나도록 함
        . width,height 속성 및 margin,padding 상하 속성 적용 가능
     - inline  : 요소들을 같은 줄에 표시함으로써,
        . 폭,높이 및 상하 여백 조정 불가
     - inline-block : 요소들을 같은 줄에 표시하되,
        . 폭,높이 및 상하 여백 조정이 가능토록 함

     - none    : 요소가 페이지에서 완전히 사라지도록 함
        . 토글 (toggle : show/hide) 효과를 줄 수 있음

     - table
        . (border-spacing, border-collapse, border-style)
     - table-row
     - table-cell

     - flex (Flexible Box)
        . container, item 이라는 2개의 관계로 시작함
        . container 속성 : display, flex-flow, justify-content 등
        . item 속성 : order, flex, align-self 등
     - grid (그리드 레이아웃)
        . (... 편집중 ...)

  ㅇ { visibility : 값; } : 값에 따라 화면 표시 여부 지정
     * (visibility : visible 기본값, hidden, collapse)
     - visibility는 display:none과 달리, 
        . block 박스(차지하는 공간)는 살아있고, 그 내용 만 보이기/숨김 임