[Chrome]크롬에서 텍스트 편집하는 방법

크롬에서 텍스트 편집하는 방법

웹 페이지는 웹 브라우저에서 표시하는 텍스트, 이미지, 동영상을 표시하는 문서일 뿐입니다. 

 

예를 들어, 다음 사진처럼 문자열로 구성된 내용은 텍스트고 이미지는 말 그대로 이미지입니다.

이러한 리소스(텍스트, 이미지 파일, 동영상 파일)는 Server에 저장됩니다. 유능한 해커 또는 해당 웹 페이지 개발자가 아닌 이상 마음대로 Server에 저장된 리소스를 변경할 수 없지만, 단순히 웹 브라우저에 보이는 텍스트는 편집할 수 있습니다.

 

예를 들어, 붉은색 테두리 안에 존재하는 텍스트를 "Hello"라고 조작할 수 있습니다.

[조작 전]

[조작 후]

 

텍스트를 편집하는 방법은 간단하며, 크롬뿐만 아니라 개발자 도구에서 콘솔을 지원하는 브라우저에서도 편집할 수 있습니다. 텍스트 편집은 주로 텍스트 길이에 따라 레이아웃이 어떻게 동작하는지 확인하는 용도로 사용됩니다.

---

텍스트 편집 활성화

순서 1. 우측 상단에 점 세개 아이콘을 클릭한 후 도구 더보기 > 개발자 도구를 선택합니다.

 

순서 2. 콘솔 탭으로 이동 후 다음 명령어를 입력합니다.

document.desginMode = 'on'

 

순서 3. 이제 웹 브라우저로 돌아와서 원하는 영역을 클릭하고 텍스트를 편집합니다.

원본을 보고 싶으면, 웹 페이지를 새로고침 합니다.

 

편집 모드를 종료하고 싶으면, 콘솔로 돌아가서 다음 명령어를 입력합니다.

document.desginMode = 'off'