[css] 화면에서 마크업을 노출시키지 않는 방법.

화면에서 안 보이게 하는 스타일 속성에는 여러가지가 있다.

퍼블리셔님이 width: 1px, height: 1px인 div를 overflow: hidden 처리를 하여 잡아준 스타일이 있다. 1px인 정사각형을 화면에 노출시켜주고, 넘치는 부분을 잘라줬는데, 이상하게 화면에서는 렌더링 되었다고 인지하지 못한다. 그래서 알아본 화면에서 안 보이게 하는 방법 포스팅인데, 이제 overflow를 곁들인 이야기이다.

---

 

overflow

overflow는 사실 화면 노출에 관한 스타일은 아니고, 콘텐츠 요소가 블록의 크기를 초과할 때 처리에 관한 속성이다. 다만 퍼블리셔님이 작성해준 것 처럼 1px 크기의 정사각형에 overflow hidden을 통해 넘치는 콘텐츠 요소를 잘라주면 마치 화면에서 사라진 듯한 효과를 볼 수 있다. (이건 사실 꼭 overflow를 안 해도 되지만 만약의 상황에 대비하여 해둔 것 같다.)
https://developer.mozilla.org/ko/docs/Web/CSS/overflow

overflow - CSS: Cascading Style Sheets | MDN

 

visibility

visibility는 하나의 요소 뿐 만 아니라 table의 행이나 열까지도 숨길 수 있다. 요소가 숨겨졌다는 의미는 그려지지 않았다 뿐이지 숨겨지지 않았을 떄와 동일한 영향을 가지고 있다고 보면 된다. 
https://developer.mozilla.org/ko/docs/Web/CSS/visibility

visibility - CSS: Cascading Style Sheets | MDN

 

opacity

투명도를 0으로 조절함으로써 보이지 않는 처리를 하는 것인데, 말 그대로 투명해서 안 보이는 것으로 자리 차지나 클릭 등 모든 액션이 가능하다. 보통 모달같은 팝업창 뒤에 한 번 덧씌울 때 사용한다. (아마..?)
https://developer.mozilla.org/ko/docs/Web/CSS/opacity

opacity - CSS: Cascading Style Sheets | MDN

 

display

요소의 디스플레이 설정을 조절하는 속성이다. none으로 설정 했을 시에는 아예 없는 마크업이라고 생각해도 무방하다.
https://developer.mozilla.org/ko/docs/Web/CSS/display

display - CSS: Cascading Style Sheets | MDN

 

각각의 특성

	overflow	visibility	opacity	display
존재여부	o	o	o	x
이벤트	o	o	o	x

 

---

아직도 왜 overflow: hidden은 미노출로 인지하고, visibility: hidden은 노출로 인지하는지 모르겠다. (퍼블리셔님도 모르겠다고 한다ㅜㅜ)