홈페이지 html 수정 - hompeiji html sujeong

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

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

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

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

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

document.designMode = 'on'

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

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

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

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

반응형

홈페이지를 만들 때 소스를 모르는 상태에서 내용을 수정하기란 어렵습니다.

1. 홈페이지 내 글자 형태를 확인합니다.

닷홈에서 테마을 설치를 했었죠?  아래의 이미지를 보면 텍스트를 드래그되는 걸 볼 수 있어요. 

이런 형식은 텍스트 형태이며 바로 비주얼 스튜디오에서 수정할 수 있습니다. 비주얼 스튜디오 코드를 접속합니다.

테마 설치 방법 보기

비주얼스튜디오코드(Visual Studio Code) 설치 + ftp 로그인 방법

2. 비주얼 스튜디오 코드 글자 수정 방법

• 홈페이지 수정할 글자를 드래그해서 복사해주세요.
• 비주얼 스튜디오 코드 에서 해당 파일 열기 ex) html > home> theme > company(내가 업로드한 테마 이름이 뜹니다.) > index.php 열기
•  Ctrl + F를 치면 검색창이 뜹니다.
• 복사했던 글자를 붙여 넣기 합니다.
• Enter를 치면 차례차례 복사한 글을 찾습니다. 
• 글자 수정
• Ctrl  + s를 치면 자동 저장됩니다.

3. 직접 수정해볼까요?

아래의 이미지에서 TRANSACTIONS 글자를 수정해 보겠습니다.

비주얼 스튜디오 코드로 와서 html > home> theme > company(내가 업로드한 테마 이름이 뜹니다.) > index.php 열어주세요.  ( ※ html > home(내가지정한폴더이름) 은 닷홈에서 홈페이지 만들었을 때 경로입니다. )

Ctrl + F를 치면 검색창이 뜹니다. 홈페이지에서 수정할 글자를 복사해 검색창에 붙여 넣기 해줍니다.

그리도 Enter를 치면 해당 글자를 찾아줍니다.

여기서 유의할 점!

검색해서 찾을 때 한 개만 나오기 않고 여러 개 나올 수가 있어요.

그 이유는 그 글자로 소스의 이름을 설정한 경우인데요.

그 소스로 글자 폰트 색상 위치 등을 변경하게 됩니다.

소스코드를 보지 못하는 분들에게 팁!! 

위의 이미지를 보시면 id = 그리고 " "  땡땡 이사이에 글자 transactions로 되어 있는 경우는 우리가 수정할

글자가 아닙니다. 

그럼 어떤 것을 수정해야 하냐?! 

이것처럼 > <  글자 양옆으로 서로 닫혀있는...> TRANSACTIONS </H2>

요 글자를 형태인 부분을 수정해주면 되고 소스의 색상으로도 구분 가능하게 되어있습니다.

글자는 다른 색(흰색)으로 표기가 되어 나옵니다.

글자를 company로 수정하였습니다. Ctrl  + s 저장합니다.

홈페이지 어떻게 바뀌었나 볼까요?

이렇게 텍스트를 하나하나 나에게 맞게 수정할 수 있습니다.

반응형

공유하기

게시글 관리

저작자표시

'홈페이지만들기' 카테고리의 다른 글