웹 페이지는 웹 브라우저가 표시하는 문서 일뿐입니다. 그러나 웹 페이지에 직접 입력하여 수정할 수 있다면 어떨까요? 브라우저 확장 프로그램이 필요 없으며 모든 최신 브라우저에 내장 된 기능입니다.
이 기능은 웹 브라우저의 JavaScript 콘솔을 통해 활성화 할 수있는 “document.designMode”기능을 활용합니다. 최근 트위터에서 Tomek Sułkowski가 강조 표시했지만 너무 멋져서 독자들과 공유해야합니다.
'document.designMode'를 처음 발견했을 때의 느낌 트윗 담아 가기
— Tomek Sułkowski (@sulco) 2019 년 9 월 27 일
이 기능을 사용하여 웹 페이지를 인쇄하기 전에 정리하고, 웹 페이지의 변경 사항이 어떻게 보이는지 테스트하거나, 사람들을 장난 칠 수도 있습니다. HTML을 망칠 필요없이 Word 문서를 편집하는 것과 같습니다.
이 기능을 활성화하려면 웹 페이지를 방문한 후 개발자 콘솔을여십시오. Chrome에서 콘솔을 열려면 메뉴> 추가 도구> 개발자 도구를 클릭하거나 Ctrl + Shift + i를 누르십시오.
여기서는 Chrome을 예로 사용하지만이 기능은 다른 최신 브라우저에서도 작동합니다. 다른 브라우저에서 콘솔을 여는 방법은 다음과 같습니다.
- Mozilla Firefox에서 메뉴> 웹 개발자> 웹 콘솔을 클릭하거나 Ctrl + Shift + K를 누르십시오.
- Apple Safari에서 Safari> 환경 설정> 고급을 클릭하고 “메뉴 막대에 개발 메뉴 표시”를 활성화하십시오. 그런 다음 개발> JavaScript 콘솔 표시를 클릭하십시오.
- Microsoft Edge에서 메뉴> 추가 도구> 개발자 도구를 클릭하거나 F12를 누른 다음 “콘솔”탭을 클릭하십시오.
개발자 도구 패널 상단의 “콘솔”탭을 클릭하십시오. 콘솔에 다음을 입력하고 Enter를 누르십시오.
document.designMode = 'on'
원하는 경우 이제 콘솔을 닫고 현재 웹 페이지를 편집 가능한 문서 인 것처럼 편집 할 수 있습니다. 커서를 입력하고 텍스트를 입력하려면 어딘가를 클릭하십시오. Backspace 또는 Delete 키를 사용하여 텍스트, 이미지 및 기타 요소를 제거하십시오.
브라우저에서 웹 페이지가 표시되는 방식 만 변경됩니다. 페이지를 새로 고치면 원본이 다시 나타납니다. 다른 웹 페이지 또는 탭으로 이동하면 콘솔을 열고이 줄을 다시 한 번 입력 할 때까지 디자인 모드가 아닙니다.
콘솔로 돌아가서 다음 명령을 실행하여 디자인 모드를 끌 수도 있습니다.
document.designMode = 'off'
웹 페이지는 더 이상 편집 할 수 없지만 다음에 페이지를 새로 고침 할 때까지 변경 사항이 유지됩니다.
