이미지가 페이지에서 표시되지 않도록 하는 방법은 여러 가지가 있습니다. display: none; 외에도 다음과 같은 방법들을 사용할 수 있습니다:
블로그글에서 이미지 숨기기,이미지 나타내지 않는 팁!
1. visibility: hidden;
- 이 방법은 이미지가 페이지에서 여전히 공간을 차지하지만, 보이지 않게 만듭니다.
- 예시:
- 차이점:
display: none;은 요소가 아예 화면에서 사라지며, 공간도 차지하지 않지만,visibility: hidden;은 요소가 화면에서 보이지 않지만 여전히 공간을 차지합니다.
2. opacity: 0;
opacity는 요소의 투명도를 설정합니다.0을 설정하면 이미지가 투명하게 되어 보이지 않지만, 여전히 페이지 내에서 공간을 차지합니다.- 예시:
- 차이점:
opacity: 0;은 요소가 투명해지지만 여전히 마우스 이벤트를 받을 수 있다는 점에서visibility: hidden;과 유사합니다.
3. position: absolute; left: -9999px;
- 이미지를 화면에서 보이지 않게 하면서도 페이지 내에서 공간을 차지하지 않도록 할 수 있습니다.
left: -9999px;을 사용하면 이미지를 화면 밖으로 이동시킬 수 있습니다. - 예시:
- 차이점: 이 방법은 이미지를 화면 밖으로 보낸다기보다는, 페이지 내에서 보이지 않게 하여 사용자가 볼 수 없도록 합니다.
4. hidden 속성 사용하기 (HTML5)
- HTML5에서는
hidden속성을 사용해 요소를 숨길 수 있습니다. - 예시:
- 차이점:
hidden속성은display: none;과 같은 효과를 나타내며, 요소를 화면에서 보이지 않게 하며 공간도 차지하지 않습니다.
요약:
visibility: hidden;과opacity: 0;은 이미지를 숨기지만 여전히 공간을 차지하게 하며,display: none;은 이미지가 완전히 사라지게 합니다.position: absolute; left: -9999px;와hidden속성은 이미지가 화면 밖으로 이동하거나 완전히 숨겨지게 합니다.