프로젝트를 진행하다가, display:none 속성과 visibility:hidden 속성에 대해서
의문점이 생기기 시작했다.
내가 발견한 차이점은 아래와 같다.
display:none -> 데이터를 읽어오지 않음, block으로 변경시 읽어옴
visibility:hidden -> 데이터를 다 읽어옴, visible로 변경시 별도의 로딩 없이 노출 됨
그렇다면
" 어떤 경우에 어떤것을 활용하는것이 좋을까? "
아래의 경우는 display:none; 과 display:block 을 이용해서 버튼클릭시 원하는 div만 노출되게 한다.
기본적으로 #slider_showBox 의 자식 div 들을 모두 none; 처리 한 후에 원하는 것만 block 하는 원리로 작동한다.
주로 이런방식을 통해서 많이 작업을 해왔다.
예제 1)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <html> <head></head> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <body> <div id="slider_showBox"> <div id="div_1" class="btn" style="background-color:red;">1번</div> <div id="div_2" class="btn" style="background-color:yellow;">2번</div> <div id="div_3" class="btn" style="background-color:green;">3번</div> <div id="div_4" class="btn" style="background-color:gray;">4번</div> </div> <div id="slider_btn"> <ul> <li>버튼1</li> <li>버튼2</li> <li>버튼3</li> <li>버튼4</li> </ul> </div> <script> $(document).ready(function(){ $("#slider_btn li").click(function(){ var idx = $(this).index(); $(".btn").css("display","none") .eq(idx).css("display","block"); }); }); </script> </body> <style> #slider_showBox div{width:100%; float:left; border:1px solid red; position:relative; display:none; height:100px;} #slider_btn{float:left; width:100%;} #slider_btn li { float:left; width:100px; height:30px; border:1px solid red; margin:5px;} </style> </html> | cs |
"그렇다면 visibility:hidden 는 언제? "
일단 아래의 경우를 보자.
위의 예제와는 다르게 # slider_showBox안에 a tag를 사용하고 그 안에 div를 넣고 백그라운드 이미지를 넣어주었다.
예제 2)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <html> <head></head> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <body> <div id="slider_showBox"> <a id="div_1" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_1.jpg');">1번</div></a> <a id="div_2" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_2.jpg');">2번</div></a> <a id="div_3" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_3.jpg');">3번</div></a> <a id="div_4" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_4.jpg');">4번</div></a> </div> <div id="slider_btn"> <ul> <li>버튼1</li> <li>버튼2</li> <li>버튼3</li> <li>버튼4</li> </ul> </div> <script> $(document).ready(function(){ $("#slider_btn li").click(function(){ var idx = $(this).index(); console.log(idx); $(".link").css("display","none") .eq(idx).css("display","block"); }); }); </script> </body> <style> #slider_showBox a{width:100%; float:left; border:1px solid red; position:relative; display:none; height:100px;} #slider_btn{float:left; width:100%;} #slider_btn li { float:left; width:100px; height:30px; border:1px solid red; margin:5px;} .box{width:100%; height:100%;} </style> </html> | cs |
예제 2) 번을 실행시켜보면 버튼을 클릭할때 이미지가 웹서버로 부터 로드 되는 것을 알 수 있다.
-- 웹 브라우져 > f12 > 네트워트에서 확인 가능하다.
탭 클릭시 그때서야 이미지가 로드되기 때문에, 홈페이지가 느린것 같은 느낌을 사용자에게 줄 수 있다.
이번에는 visibility:hidden 을 사용한 예제이다.
웹 브라우져 > f12 > 네트워트에서 확인해보면 이미지를 한번에 모두 로드하는 것을 알 수 있다.
페이지를 처음 열었을 때 용량이 큰 이미지의 경우에는 조금 느리게 느껴질 수 있으나, 탭 전환시에는 이미 로드된 이미지를 사용하기 때문에 추가적으로 로딩되는 시간을 필요로 하지 않는다.
예제 3 )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <html> <head></head> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <body> <div id="slider_showBox"> <a id="div_1" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_1.jpg');">1번</div></a> <a id="div_2" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_2.jpg');">2번</div></a> <a id="div_3" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_3.jpg');">3번</div></a> <a id="div_4" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_4.jpg');">4번</div></a> </div> <div id="slider_btn"> <ul> <li>버튼1</li> <li>버튼2</li> <li>버튼3</li> <li>버튼4</li> </ul> </div> <script> $(document).ready(function(){ $("#slider_btn li").click(function(){ var idx = $(this).index(); $(".link").css("visibility","hidden") .eq(idx).css("visibility","visible"); }); }); </script> </body> <style> #slider_showBox { height:100px; float:left; width:100%;} #slider_showBox a{width:100%; float:left; border:1px solid red; position:relative; display:block; position:absolute; visibility:hidden; height:100px;} #slider_btn{float:left; width:100%;} #slider_btn li { float:left; width:100px; height:30px; border:1px solid red; margin:5px;} .box{width:100%; height:100%;} </style> </html> | cs |
"결론은?"
display:none 을 사용하면 노출 돠지 않는 경우에 이미지 자체를 로드 하지 않는다.
이미지 뿐만 아니라 다른 자원도 마찬가지일 것이라고 생각된다.
visibility:hidden 을 사용하면 노출 되지 않는 이미지도 모두 로드된다.
그러니 각 상황에 알맞게 사용하자!
visibility:hidden 을 이용해서 이미지 슬라이더를 만들어 보는 예제는 아래 링크를 통해 확인!
"끝"