당신이 웹 페이지의 개발에 종사 할 때, 한 가지 이유나 다른 이유로 아이템의 특정 영역을 "숨길"필요가있을 수 있습니다. 물론 HTML 마크 업에서 질문의 항목을 제거 할 수는 있지만 코드에 남아 있기를 원하지만 어떤 이유로 브라우저 화면에 표시하지 않으려면 어떻게해야합니까? (그리고 우리는 이유를 검토 할 것입니다. 바로 이것을하십시오). HTML에 요소를 유지하면서 표시를 위해 숨기려면 CSS로 전환하십시오.
HTML에있는 요소를 숨기는 가장 일반적인 두 가지 방법은 CSS 속성을 "display"또는 "visibility"로 사용하는 것입니다. 언뜻보기에이 두 속성은 거의 똑같은 것처럼 보일지 모르지만 각각의 특성은 사용자가 알아야 할 뚜렷한 차이가 있습니다. display : none과 visibility : hidden의 차이점을 살펴 보겠습니다.
시계
visibility : hidden의 CSS 속성 / 값 쌍을 사용하면 브라우저에서 요소를 숨 깁니다. 그러나 숨겨진 요소는 여전히 레이아웃에서 공간을 차지합니다. 그것은 기본적으로 요소를 보이지 않게 만들었지 만 여전히 남아 있고 그것이 놓아 두었던 공간을 차지합니다.
페이지에 DIV를 배치하고 CSS를 사용하여 100x100 픽셀을 차지하는 크기를 지정하면 visibility : hidden 속성을 사용하면 DIV가 화면에 표시되지 않지만 그 다음 텍스트는 그대로있는 것처럼 동작합니다 100x100 간격.
솔직히 가시성 속성은 우리가 자주 사용하는 것이 아니라 자체적으로 사용하지 않는 것입니다. 특정 요소에 대해 원하는 레이아웃을 얻기 위해 위치 지정과 같은 다른 CSS 속성을 사용하는 경우 가시성을 사용하여 초기에 해당 항목을 숨기고 호버에서 다시 "전환"할 수 있습니다. 이것이이 속성을 사용할 수있는 한 가지 방법 일 뿐이지 만 다시는 어떤 빈도로도 바꿀 수있는 것이 아닙니다.
디스플레이
일반 문서 플로우에서 요소를 남기는 visibility 속성과 달리 display : none은 요소를 문서에서 완전히 제거합니다. HTML은 여전히 소스 코드에 있지만 공간을 차지하지 않습니다. 이것은 실제로 문서 플로우에서 제거 되었기 때문입니다. 모든 의도와 목적을 위해 항목이 없어졌습니다. 이것은 당신의 의도가 무엇인지에 따라 좋은 것이거나 나쁜 것일 수 있습니다. 이 속성을 잘못 사용하면 페이지를 손상시킬 수도 있습니다.
페이지를 테스트 할 때 종종 "display : none"을 사용합니다. 우리가 페이지의 다른 영역을 테스트 할 수 있도록 잠시 동안 "없어지는"영역이 필요하다면 display : none을 사용할 수 있습니다. 그러나 기억해야 할 점은 해당 사이트를 실제로 실행하기 전에 해당 요소가 페이지로 돌아와야한다는 것입니다. 이는이 메소드에서 문서 플로우에서 제거 된 항목이 검색 엔진이나 화면 판독기에서 HTML 마크 업에 남아있을지라도 보이지 않기 때문입니다. 과거에는이 방법이 검색 엔진 순위에 영향을 미치기 위해 블랙 햇 (black-hat) 방법으로 사용 되었기 때문에 표시되지 않는 항목은 Google이 해당 접근 방식이 사용되는 이유를 조사하는 빨간색 플래그 일 수 있습니다.
유용하게 사용할 수 없으며 실제 웹 사이트에서 사용하는 경우 디스플레이 크기에 따라 사용할 수있는 요소가 있지만 다른 요소에는 사용할 수없는 요소가있을 수 있습니다. display : none을 사용하여 해당 요소를 숨긴 다음 나중에 미디어 쿼리로 다시 켤 수 있습니다. 이것은 display : none의 허용 가능한 사용입니다. 왜냐하면 당신이 사악한 이유로 아무것도 숨기려고하지 않기 때문에 그렇게 할 필요가 있습니다.
Jennifer Krynin의 원본 기사입니다. Jeremy Girard에 의해 3/3/17에 편집 됨