인터넷의 여러 페이지를 단순히 둘러보는 것만으로 웹사이트의 모든 기능을 경험했다고 생각하신다면 큰 오산입니다. 의외로 많은 분들이 놓치고 있는 사실이지만, 올바른 방법만 알면 웹페이지는 상호작용이 가능하고 자유롭게 수정할 수 있는 공간이 됩니다. 웹 개발자든 콘텐츠 작성자든, 어떤 웹사이트든 텍스트를 편집할 줄 아는 능력은 반드시 갖춰야 할 필수 스킬입니다. 목업(mock-up) 제작, 화면에 보이는 콘텐츠 개인화, 혹은 웹 레이아웃을 활용한 재미있는 실험까지 다양하게 응용할 수 있기 때문입니다. 그럼 지금부터 그 방법을 하나씩 살펴보겠습니다.
이 방법을 익혀두면 클라이언트의 요구에 맞춰 헤드라인을 손쉽게 수정하는 등 여러 작업을 웹페이지에서 바로 처리할 수 있습니다. 끝까지 읽으시면 정답을 확인하실 수 있습니다.
방법 1: 개발자 도구(Developer Tools) 활용하기
요즘 대부분의 브라우저는 누구나 개발자 도구에 접근해 원하는 변경을 직접 적용할 수 있도록 지원합니다. 구체적인 순서는 다음과 같습니다.
- Google Chrome을 실행합니다. 참고로 어떤 브라우저를 사용해도 무방합니다.
- 화면 우측 상단 리본 메뉴의 점 세 개(⋮) 아이콘을 클릭합니다.
- 도구 더보기(More tools)를 선택합니다.
- 개발자 도구(Developer tools)를 클릭합니다.
- 상단 탭에서 요소(Elements)를 선택합니다.
- 검사 패널 좌측 상단의 커서 아이콘을 클릭합니다.
- 웹사이트의 편집하고 싶은 텍스트 위에 마우스를 올린 뒤 선택합니다.
- 요소 창에서 강조된 코드 위에서 마우스 오른쪽 버튼을 클릭한 후 Edit as HTML 또는 텍스트 편집 옵션을 선택합니다. 코드를 더블클릭해 바로 수정하는 것도 가능합니다.
- Enter 키를 눌러 변경 사항을 적용합니다.
이렇게 하면 어떤 웹페이지에서든 텍스트가 즉시 변경됩니다.
모바일 브라우저에서도 웹사이트 텍스트 편집이 가능할까?
모바일 환경에서는 안드로이드의 Chrome처럼 개발자 도구를 지원하는 일부 브라우저에서만 텍스트 편집이 가능합니다. iOS 기기에서는 해당 기능을 사용할 수 없다는 점을 미리 참고해 주세요.
편집한 내용은 웹사이트에 영구적으로 저장될까?
아니요. 요소 검사(Inspect) 도구로 변경한 내용은 임시적이며 본인 화면에만 적용됩니다. 페이지를 새로고침하면 원래의 텍스트로 되돌아갑니다.
함께 읽으면 좋은 글: 위험한 웹사이트 식별 방법과 스스로를 보호하는 요령
이번 가이드에서 소개한 방법들을 따라 하셨다면, 이제 어떤 웹사이트든 텍스트를 자유롭게 편집하는 방법을 충분히 이해하셨을 것입니다. 궁금한 점이나 제안할 만한 내용이 있다면 언제든 댓글로 남겨주세요. 더 유용한 IT 팁과 문제 해결 방법이 필요하시면 앞으로도 계속 저희 콘텐츠를 찾아주세요.