jQuery를 이용해 visibility 설정하기

<div id="box"> 

하위 태그 작성

.

.

.

</div>

이러한 div가 있을때 값을 display(visibility)를 설정하는 방법

<Display를 이용한 방법>

$ (function(){

$("#box").css("display","none"); // 보여주지 않음

$("#box").css("display","block"); // 값을 보여줌

});

여기서 또 한가지 display 대신에 visibility 를 이용해 설정을 하는 경우도 있다.

차이점은 페이지가 로드될 때 하위 요소의 데이터를 다 읽어오냐 안읽어오냐의 차이로 구분할 수 있다.

display → 페이지가 로드 될 때 none 값이라면 하위요소 (데이터)를 읽어오지 않음

visibility → hidden이건 visibility건 상관없이 페이지가 로드되면 하위요소(데이터)를 읽어옴

<Visibility를 이용한 방법>

 $ (function(){

$("#box").css("visibility","hidden"); // 보여주지 않음

$("#box").css("visibility","visibility"); // 값을 보여줌

});

두 속성값은 상황에 알맞게 사용을 하면 된다.