TIL day6 display vs visibility

display

The display attribute lets you control the rendering of graphical or container elements.
기본적으로 HTML의 각 element들은 inline 또는 block 요소로 나눌 수 있다. display는 이 두 요소를 변경 가능하게 하는 attribute이다.

div {
	display: inline-block
}

value(속성값)

• block : element를 block으로 변경한다.
• inline : element를 inline으로 변경한다.
• inline-block: element를 inline과 block 요소 모두 가지도록 한다.
  inline은 width, height 조절이 되지 않으나 inline-block으로 변경 시 조절 가능하다.
• none : element를 보이지않게 만든다. 스크린리더에서도 읽지 못 한다.
• inherite : 부모의 속성값(value)을 상속받는다.

Visibility

The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a table tag.

value

• visible : 기본값. element를 보이게한다.
• hidden : element를 보이지 않게 한다.
• collapse : table tag 사용 시에만 사용 가능하다. table의 row나 column의 공백을 없앤다. 하지만 빈 공간은 그대로 유지된다.

display vs visibility

'display: none': 해당 요소를 사라지게 만든다. 공간도 없애버리기 때문에 layout 변화가 있다.
'visibility: hidden': 해당 요소를 보이지 않게 만든다. 공간이 비어있는 상태로 보이기 때문에 layout 변화가 없다.