Top

[HTML] visibility:hidden과 display:none의 차이점 | Web-Programing
김경훈 (admin) | Editor | 2012/08/22 16:09:38 | 조회:4588

웹 화면상에서 필요 없는 부분이나 a:hover 부분을 보이지 않게 하기 위하여
visibility:hidden 과 display:none을 하는 경우가 종종 있다.

display:none을 하게 되면 html 은 구조상에서 사라 지게 되고,

visibility:hidden의 경우에는 단지 눈에만 보이지 않을 뿐 자기의 영역을 고수 하여
다른 것들의 위치 선정에 영향을 주게 된다는 것입니다.

<style type="text/css">
    div{width:200px;height:200px;}
    #a{border:1px solid red;}
    #b{border:1px solid blue;}
</style>

< body>
    <div id="a"> a </div>
    <div id="b"> b </div>
< /body>
< /html>

기존의 이런 소스를 실행하면


이렇게 나온다.
하지만  "a" 에  visibility:hidden; 을 추가 해주면 =>  #a{border:1px solid red;visibility:hidden;} 

위와 같이 "a"  영역이 눈에 보이진 않지만 자리를 잡고 있다.

반대로 "a"  에 display:none; 를 추가 해줬을 경우 =>  #a{border:1px solid red;display:none;} 
아래와 같이  "a"  그 영역을 차지 하지 않기때문에 "b" 가 "a" 영역을 차지하게 된다.



이상 visibility:hidden과 display:none의 차이점이였습니다.
공유하기
공유하기
0
0
0


댓글을 불러오는 중입니다.
▲ 이전글 [HTML] 투명한 레이어 만들기 김경훈 (admin) 2012-08-28 14:20:32
▼ 다음글 [HTML] <meta> 태그 김경훈 (admin) 2012-08-22 16:08:02
페이지 로딩이 끝나면 해당 댓글로 이동 합니다.