[HTML&CSS] 아이폰에서 display:none이 안될때

정확히 말하면 사파리 모바일에서 작동이 잘 안 되는 것 같다.

-PC나 아이폰의 다른 브라우저에선 확인을 해보지 않았다.

좀 더 확인이 필요한 부분이긴 한데, 일단 체험한 것 을 적어놓는다.

 

아이폰의 사파리에서 style의 "display:none" 속성이 제대로 작동하지 않았다.

안드로이드에선 물론 작동이 잘되었고, 같이 확인하던 중 안되는 걸 알았다.

그래서 찾아보니,

"visibility:hidden" 속성으로 비슷한 동작 처리를 할 수가 있었다.

 

여기서, display:none과, visibility:hidden의 차이가 정확히 뭔지 짚고 넘어가자.

한 image태그를 예로 들면,

"display:none" 속성으로 쓰면 이미지가 안보이는것은 똑같은데, 아예 차지하고 있던 공간도 사라진다.

"visibility:hidden" 속성을 쓰면 이미지는 똑같이 안 보이지만, 차지하고 있던 공간은 그대로 남아있는다.

그래서 공간까지 없애고 싶으면, width,height 속성을 같이 0으로 주어서 처리해야 한다.