디자인검색
Home > 고객센터 > 자료실

자료실

자료실 div 영역 숨기기 할때..visibility 와 display 의 차이
2020-07-17 16:47:28
하나솔루션 조회수 641
1.245.146.49

div 영역 숨기기 시에..

style="display:none"  과 visibilit:hidden 의 차이를 알아 볼 것.. 화면에서 그려지는것이 약간 틀린것을 발견함..

웹 검색 결과 이런 내용이 떠서 펌..

 

CSS 속성 중 visibility:hidden 과 display:none 의 속성은 태그를 숨길 때 사용한다.

태그를 숨기는 속성은 같지만 태그가 위치하는 공간은 틀려진다

display:none 은 여백을 남기지 않고 숨겨지지만, visibility:hidden의 경우에는 여백을 남긴 채 숨겨지게 된다.

 

<p><strong>Normal</strong></p>
<div style="border:5px #FF0000 solid;">DIV01</div>
<div style="border:5px #33FF66 solid;">DIV02</div>
<div style="border:5px #3366FF solid;">DIV03</div>

<p><strong>Display none</strong></p>
<div style="border:5px #FF0000 solid;">DIV01</div>
<div style="border:5px #33FF66 solid;display:none;">DIV02</div>
<div style="border:5px #3366FF solid;">DIV03</div>

<p><strong>Visibility hidden</strong></p>
<div style="border:5px #FF0000 solid;">DIV01</div>
<div style="border:5px #33FF66 solid;visibility:hidden;">DIV02</div>
<div style="border:5px #3366FF solid;">DIV03</div>

 

 

HANASOLUTION

SERVER LOCATION

서울시 서초구 서초동 1710-1 SK 브로드밴드 IDC 1층

이미지명

WORKING HOURS

NAME SERVER

 1    ns1.webit.kr
  211.215.17.210
 2    ns1.webit.kr
  211.215.17.212
상단으로 바로가기