CSS속성_visibility

CSS에서 요소를 숨기는 방법에는 몇 가지가 있습니다.

display 속성 값을 none으로 할 수도 있고, 다른 위치 관련 속성들을 이용해서 안 보이게 숨기는 방법도 있습니다.

하지만 요소를 숨긴다는 의미로만 해석하면 가장 명시적인 방법은 visibility 속성을 이용하는 것입니다.

 

visibility 속성

요소의 화면 표시 여부를 지정하는 속성입니다.

 

속성값(기본값:visible)

1. visible : 화면에 표시

2. hidden : 화면에 표시되지 않고 공간은 차지함.

3. collapse : 셀 간의 경계를 무시하고 숨김(테이블 관련 요소에만 적용 가능)

 

 

display:none과의 차이점

display:none  요소가 렌더링 되지 않음.(DOM에 존재하지않음)

visibility:hidden 요소가 보이지는 않지만 렌더링 되며 화면에 공간을 가지고 있음(DOM에 존재함)