Delete/Hide Element는 웹 페이지의 아무 요소나 한 번 클릭으로 삭제하거나 임시로 숨길 수 있게 해줍니다. 스크린샷을 위한 페이지 정리, 불필요한 광고나 쿠키 배너 제거, 특정 섹션을 제외한 레이아웃 테스트 등에 완벽합니다. 모든 작업은 비파괴적으로 진행됩니다.
깔끔한 스크린샷을 찍거나, 특정 섹션을 제거했을 때 페이지 레이아웃이 어떻게 리플로우되는지 테스트하거나, 방해가 되는 팝업 오버레이를 숨겨 콘텐츠를 읽고 싶을 때 이 도구가 유용합니다. 두 가지 모드를 제공합니다: Delete(요소를 DOM에서 완전히 제거하여 주변 콘텐츠가 공간을 채우도록 함)와 Hide(visibility를 hidden으로 설정하여 공간은 유지하면서 요소를 보이지 않게 함). 두 작업 모두 Undo로 되돌릴 수 있습니다. 클릭 전에 빨간색 호버 오버레이가 표시되어 어떤 요소가 영향을 받을지 정확히 확인할 수 있습니다. 삭제/숨김 요소 수를 실시간으로 표시하며, 하나씩 또는 모두 Undo할 수 있습니다. 다른 DevSuite 도구와 마찬가지로 변경 사항은 비파괴적이며, 페이지를 새로고침하면 모든 요소가 원래 상태로 복원됩니다.
Delete 모드에서 아무 요소를 클릭하면 페이지에서 완전히 제거됩니다. 요소가 DOM에서 사라지고 주변 콘텐츠가 공간을 채웁니다. 특정 섹션 없이 페이지가 어떻게 보이는지 확인하기에 좋습니다.
Hide 모드에서 요소를 클릭하면 보이지 않게 되지만 레이아웃 공간은 그대로 유지됩니다. 요소가 투명해지지만 박스 크기는 유지되어 페이지 레이아웃이 변하지 않습니다. 시각적 무게를 테스트하면서 레이아웃 이동을 피하고 싶을 때 유용합니다.
클릭하기 전에 마우스를 움직이면 영향을 받을 요소 위에 빨간색 반투명 오버레이가 표시됩니다. 잘못된 요소를 실수로 삭제하는 것을 방지해줍니다.
모든 삭제와 숨김 작업이 Undo 기록에 저장됩니다. Undo 버튼을 클릭하면 마지막 작업을 되돌려 요소를 복원합니다. 여러 작업을 순서대로 Undo할 수 있습니다.
현재 세션에서 삭제한 요소 수와 숨긴 요소 수가 실시간으로 표시됩니다. 얼마나 많은 변경을 했는지와 남은 Undo 횟수를 한눈에 확인할 수 있습니다.
모든 변경은 브라우저 메모리에서만 존재합니다. 페이지의 실제 코드는 수정되지 않습니다. 언제든지 페이지를 새로고침하면 삭제되고 숨겨진 모든 요소가 원래 상태로 복원됩니다.
스크린샷을 찍기 전에 쿠키 동의 배너, 채팅 위젯, 프로모션 팝업, 고정 헤더, 뉴스레터 오버레이 등을 제거하세요. 시각적 방해 없이 페이지 콘텐츠의 깔끔하고 전문적인 캡처를 얻을 수 있습니다.
후기 섹션 없이 페이지가 어떻게 흐르는지 궁금한가요? 또는 사이드바를 제거하면 어떻게 되는지? 섹션을 삭제하고 레이아웃이 즉시 어떻게 리플로우되는지 확인하세요. 코드 변경 없이 가능합니다.
침해적인 광고가 많은 콘텐츠 페이지에서 광고 요소를 숨겨 기사와 문서를 방해 없이 읽을 수 있습니다. 콘텐츠가 사용 가능한 공간을 채우도록 리플로우됩니다.
복잡한 웹 페이지를 참조하는 프레젠테이션을 준비 중인가요? 관련 없는 요소를 제거하고 논의하고 싶은 섹션만 남겨두세요. 그런 다음 단순화된 뷰를 스크린샷으로 찍을 수 있습니다.
요소가 서로 겹치거나 가리고 있다면 상단 요소를 삭제하여 뒤에 무엇이 있는지 확인하세요. z-index나 display 속성을 DevTools에서 조정하기 전에 빠르게 확인하고 싶을 때 유용합니다.
DevSuite Pro 플로팅 독을 열고 Delete/Hide Element 아이콘을 클릭하세요. Delete 모드(요소 제거 및 레이아웃 리플로우)와 Hide 모드(공간 유지하면서 숨김) 중에서 선택하세요.
페이지 위에 마우스를 움직이세요. 커서 아래 요소에 빨간색 반투명 오버레이가 표시되어 클릭 시 어떤 요소가 영향을 받는지 정확히 보여줍니다.
강조된 요소를 클릭하세요. Delete 모드에서는 제거되고 주변 콘텐츠가 리플로우됩니다. Hide 모드에서는 보이지 않게 되지만 공간은 유지됩니다.
더 많은 요소를 제거하려면 계속 클릭하거나, Undo를 클릭해 마지막으로 제거/숨긴 요소를 복원하세요. 작업 카운터가 현재 변경 사항을 보여줍니다.
실험을 마쳤다면 페이지를 새로고침하세요. 모든 요소가 즉시 원래 상태로 복원됩니다.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
