웹 화면상에서 필요 없는 부분이나 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>
<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가 보여지게 됩니다.
'Web Programing! > HTML / CSS' 카테고리의 다른 글
| HTML5 지원하지 않는 브라우져 적용하기 (HTML5 Shiv) (0) | 2014.06.14 |
|---|---|
| [CSS] 텍스트 처리 - text-overflow:ellipsis; / white-space: nowrap; / word-break:break-all; (0) | 2014.06.13 |
| [CSS] 나눔고딕 웹폰트 사용하기 (2) | 2012.07.17 |
| [HTML] 커서(cursor) 모양 바꾸기 (0) | 2011.10.27 |
| [CSS] 글이 지정된 사이즈를 벗어나 한줄로 나올때 (0) | 2011.10.05 |
| [HTML] 입력폼체크(keyCode) (0) | 2011.09.14 |
| [HTML] 웹페이지 내의 특정 위치로 가기 (0) | 2011.09.10 |
