크롬 HTML 수정 - keulom HTML sujeong

크롬은 개발자 도구를 활용해서 홈페이지를 간단하게 수정할 수 있는데요.

크롬뿐만 아니라 크롬 기반의 엣지에서도 동일하게 동작합니다.

이런 기능을 통해서 일반적으로는 홈페이지 디버그를 하거나,

또 재미나게 홈페이지 꾸며서 사용하는데 이용합니다.

크롬 개발자 도구로 홈페이지 수정하기

크롬 개발자 도구는 아래의 단축키로 접속이 가능합니다.

• F12
• Ctrl + Shift + i

이후  Console에서 명령어를 쳐줍니다.

document.designMode를 활성화해야 하는데요.

명령어를 치고 on이 나오면 해당 페이지는 수정이 가능합니다.

document.designMode='on'

이렇게 실시간 검색에서 dorulog도 넣어보구요.

로그인 페이지에다가 메시지를 넣을 수도 있습니다.

elements 칸에서 원하는 것으로 변경하시면 되는데요.

원하시는 데로 한글 파일처럼 클릭하신뒤 원하는 글자로 변경이 됩니다.

다만 이미지 같은 경우에는 변경이 불가능할 수 있습니다.

저는 커서를 통해서 몇몇개를 자연스럽게 변경해 보았는데요.

원하시는 용도로 변경해서 사용하시면 됩니다.

다만 이 방법의 경우 새로고침(F5)를 누르면 더이상 수정할 수 없는데요.

새로고침이 필요한 수정을 할때에는 아래의 방법을 이용해야 하고, 

직접 HTML을 수정해야 하기 때문에 수정을 위해서는 CSS/HTML을 조금은 알고 있으셔야 합니다.

새로고침이 필요한 홈페이지 수정하는 방법

새로고침이 필요한 페이지는 다운로드 받아서 수정을 해야합니다.

크롬에서 페이지를 다운 받기 위해서는

개발자 모드에서 Source -> Overrides에 들어간 후

이 후에 Select folder for overrides를 클릭하여

저장할 폴더를 지정합니다.

이러면  아래처럼 크롬 상단에 액세스 권한 요청이 나오는데요.

허용을 눌러줍니다.

이후에 다시 Page로 들어와서 현재 나온 페이지 index등 

수정하고자 하는 파일에서 Save for Overrides를 클릭합니다.

그리고 이제 우측에서 아까와 같이 Index 파일을 수정하시면 새로고침을 해도 변경된 페이지를 만들 수 있습니다.

Page에 있는 것이 실제 상용 라이브 서버에 있는 것이고, Overrides에 있는 파일이 

컴퓨터에 저장된 파일인데요. Overrides에 있는 index.html 파일을 수정하시면 새로고침하더라도 수정이 됩니다.

하지만 이 페이지는 overrides 파일이 저장된 제 컴퓨터에서만 변경되서 보인다는 점을 참고하시기 바랍니다.

홈페이지를 디버그 할때 실제 페이지에서 디버그해보면서 쉽게 페이지를 수정해볼 수 있습니다.

그럼 잘 사용하시기 바랍니다.

국내에서 제일 많이 자주 접속하는 사이트인 네이버에 접속을 했다고 할때 현재 보고 있는 화면은 서버로부터 받아온 글자와 이미지를 브라우저가 보여 주는건데요. 그렇다면 이 웹페이지를 쉽게 수정할수 있을까요? 만약에 친구한테 장난을 친다고 하고" ~야 니 이름이 실시간 검색어에 올라왔어~ " 라고 얘기하고 바로 화면 캡쳐해서 보여주면 어떨까요? 꾀 재미 있지 안을까요? 그렇다면 어떻게 웹페이지를 바로 수정할까요? 다른 기술 필요 없이 크롬 웹브라우저에서 문서 수정하듯이 간단하게 수정을 할수가 있습니다. 

그래서 이번 포스팅에서는 크롬 브라우저에서 웹페이지 편집하는 방법에 대해서 알아 보도록 하겠습니다. 꾀 간단한 방법이니 한번 해보세요. 이 방법은 브라우저의 콘솔을 이용하는 방법인데요. 콘솔을 지원하는 브라우저인 파이어폭스나, 사파리, 크로미언 엣지 등에서 똑같이 할수가 있습니다. 

일단, 예로 네이버에서 급상승 검색어가 보이도록 한후에 이 상태에서 실시간 검색어 순위를 바꿔 보도록 하겠습니다. 크롬 브라우저 기준으로 개발자 모드를 띄우기 위해서는 F12 키를 눌러 주시면 되는데요. 검색어 순위가 보이게 마우스를 올려 놓은 상태에서 F12 키를 눌러 줍니다. 

그러면 아래와 같이 개발자 모드창에 옆에 뜨게 되는데요. 이때 하단에 "Console" 이라고 나와 있는 부분이 있는데요. 이 부분에 자바 스크립트등을 입력하면 이것저것 할수가 있습니다. 본 포스팅에서는 비슷한 방법으로 웹페이지를 수정 할수 있도록 할거에요.

콘솔 에서 한줄만 입력을 해주시면 되는데요. 아래 문장 그대로 입력을 하시면 됩니다.

document.designMode = 'on'

입력을 하시면 아래처럼 "on" 이 표시가 되고 이후에 네이버 화면으로 가시면 텍스트를 지우거나, 이미지를 삭제 하거나 꼭 워드 문서를 수정하는것처럼 자연스럽게 웹 페이지를 수정을 할수가 있게 됩니다. 

그래서 저는 아래처럼 실시건 검색어 첫번째에 HKEBI 티스토리 블로그를 입력을 해보았습니다. 아주 간단하게 수정이 되죠? 이상태에서 이미지 삭제등도 가능하기 때문에 문서 편집 하듯이 수정을 하시면 됩니다. 

결과는 아래처럼 바뀐걸 볼수가 있습니다. 텍스트 있는곳에 마우스를 가져다 놓으시면 커서가 깜박이는걸 볼수가 있습니다. 수정을 한후에 on 대신에 off 를 입력을 하면 더이상 수정이 안됩니다. ^^

이상으로 크롬 브라우저에서 웹페이지 편집하는 방법에 대해서 알아 보았습니다. 어떤 용도로 사용할지는 필요에 따라 결정 하시면 되고, 생각보다 간단한 방법으로 웹페이지를 수정을 할수가 있는걸 확인 할수가 있었습니다. 웹사이트를 만들때 실제로 코드를 수정하기전에 미리 수정해서 볼수도 있겠죠? 그럼 이상 도움이 되셨길 바라면서 포스팅 마치도록 하겠습니다. 여기 까지 읽어 주셔서 감사합니다. ^^