웹 화면상에서 필요 없는 부분이나 a:hover 부분을 보이지 않게 하기 하기
위하여 visibility:hidden 과 display:none을 하는 경우가 종종 있습니다. 이것들의 차이는 차이점이 하나
있습니다.
display:none을 하게 되면 html 은 구조상에서 사라 지게 되고 visibility:hidden의 경우에는 단지 눈에만 보이지 않을 뿐 자기의 영역을 고수 하여 다른 것들의 위치 선정에 영향을 주게 된다는 것입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
display:none을 하게 되면 html 은 구조상에서 사라 지게 되고 visibility:hidden의 경우에는 단지 눈에만 보이지 않을 뿐 자기의 영역을 고수 하여 다른 것들의 위치 선정에 영향을 주게 된다는 것입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=euc-kr" />
<title></title>
<style
type="text/css">
div{width:200px;height:200px;}
#a{border:1px solid red;}
#b{border:1px solid blue;}
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
</body>
</html>
기존의 이런 소스를 실행하면
이렇게 나옵니다.
하지만 스타일 시트에
visibility:hidden; 을 추가 해주면
위와 같이 영역이 포함 된 상태로 나오나,
display:none;과 같은 경우에는 아래와 같이 그 영역을 잡아 먹고 올라와서 b가 보여지게 됩니다.
두가지의 차이점의 가장 큰 점이었습니다.
출처:http://flydol.tistory.com/entry/visibilityhidden%EA%B3%BC-displaynone%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90
div{width:200px;height:200px;}
#a{border:1px solid red;}
#b{border:1px solid blue;}
</style>
</head>
<body>
<div id="a">a</div>
<div id="b">b</div>
</body>
</html>
기존의 이런 소스를 실행하면
이렇게 나옵니다.
하지만 스타일 시트에
visibility:hidden; 을 추가 해주면
display:none;과 같은 경우에는 아래와 같이 그 영역을 잡아 먹고 올라와서 b가 보여지게 됩니다.
두가지의 차이점의 가장 큰 점이었습니다.
출처:http://flydol.tistory.com/entry/visibilityhidden%EA%B3%BC-displaynone%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90