HTML Display attribute & Visibility attribute

Display attribute[inline,block,none]

Visibility attribute [visible,hidden,collapse]

How to use Display attribute

상속여부(Whether inheritance) : 상속안됨(Not inheritance)

display: inline  기본값(default)으로, 요소(element)를 inline 요소처럼 표시합니다.

               따라서 앞뒤로 줄바꿈 되지 않습니다.

display: block   요소를 block 요소처럼 표시합니다.

               따라서 앞뒤로 줄바꿈이 됩니다.

display: none  박스가 생성되지 않습니다.

               따라서 공간을 차지하지도 않습니다.

display: inline-block  요소는 inline인데 내부는 block처럼 표시함.

               즉 박스 모양이 inline처럼 옆으로 늘어섬

How to use Visibility attribute

상속여부(Whether inheritance) : 상속됨(inheritable)

visibility: visible  기본값(default)으로, 요소(element)가 그대로 보입니다.

visibility: hidden   요소가 보이지 않지만, 여전히 그 공간을 차지하며 투명하게 남습니다.

display: collapse  <table> 태그에서만 사용할 수 있는 값으로, 선택 테이블의 행과 열을 숨깁니다.

               하지만 여전히 투명하게 공간을 차지 합니다.

               <table> 이외에서 사용하면 hidden상태처럼 만듭니다.

                (collapse는 IE, Firefox 에서만 작동)