인터넷 소스코드 보는 방법

인터넷 웹페이지를 돌아다니다가 소스코드를 봐야 될경우가 생겼을때 각각의 브라우저별로 웹페이지 소스 코드 보는 방법을 작성하고자 합니다. 대표적으로 유명한 익스플로러(엣지), 크롬(Chrome), 파이어폭스(Firefox) 순으로 웹페이지 소스 코드를 보는 방법을 작성하도록 하겠습니다.

각각의 브라우저 프로그램에서 소스코드 보는 방법은 큰차이가 없습니다. 대표적으로 F12키를 누르면 모든 브라우저에서 소스코드를 볼수가 있습니다. 그래도 브라우저 별로 간단히 소스코드 보는 방법에 대해서 정리할 필요가 있다고 생각하여 작성 합니다. 그럼 시작해보겠습니다.

익스플로러(엣지) 소스코드 보는 방법

먼저 마이크로 소프트사에서 개발한 인터넷익스플로러 브라우저에서 소스코드를 보는 방법을 작성해 보겠습니다. 인터넷 웹페이지가 열린 상태에서 간단히 F12키를 눌러 주시면 아래 이미지 처럼 소스 코드를 볼수 있습니다. HTML 코드가 나오고 오른쪽 부분에서 CSS를 조작할수도 있습니다.

다음은 엣지에서 소스코드를 보는 이미지인데 마찬가지로 F12키를 눌러 주시면 간단히 소스코드를 볼수 있습니다.

크롬 소스코드 보는 방법

이번엔 구글에서 만든 크롬 브라우저에서 소스코드를 보는 방법입니다. 마찬가지로 F12키를 눌르면 익스플로러와 마찬가지의 형태로 소스코드를 볼수가 있습니다.

또는 웹페이지 빈공간에 마우스 오른쪽 버튼을 누르시면 메뉴가 나오는데 여기서 페이지 소스 보기를 누르셔도 소스코드를 볼수 있습니다.

마우스 우클릭 버튼으로 소스코드 보기를 눌렀을때는 좀더 편하게 웹페이지 소스코드를 확인할수 있습니다.

파이어폭스 소스코드 보는 방법

파이어폭스 브라우저도 별반 차이가 없습니다. 마찬가지로 F12키를 눌러서 웹페이지 소스코드를 볼수 있고 HTML 조작이나 CSS 조작이 가능 합니다.

크롬 브라우저와 마찬가지로 웹페이지 빈공간에 페이지 소스를 눌러서 소스코드를 볼수 있습니다.

이렇게 파이어폭스 브라우저에서도 소스코드를 간단히 볼수가 있습니다.

CSS 코드 조작

위처럼 3대 브라우저에서 소스코드를 보는 방법은 매우 비슷합니다. 그럼 간단하게 CSS 코드를 조작해서 웹페이지 색깔을 살짝 변경해 보도록 할까요? 익스플로러, 크롬, 파이어폭스 어떤 브라우저에서든지 F12키를 눌러서 아래이미지 처럼 백그라운드 컬러를 빨간색 계열로 한번 색갈을 지정해 보겠습니다. 아래 이미지 처럼 배경 색깔이 변경된걸 보실수 있습니다.

이처럼 간단하게 CSS 조작을 통해 웹페이지 색갈을 변경할수 있습니다. 물론 새로고침을 하거나 페이지 이동시엔 다시 사라집니다. 이런식으로 CSS 코드도 쉽게 테스트 해볼수 있습니다.

이번엔 소스코드를 복사해서 컴퓨터에서 직접 조작을 해보도록 하겠습니다. 이렇게 전체 소스를 복사하여 메모장에 복사해 보도록 하겠습니다.

메모장을 대부분 사용하지 않고 에디트플러스 같은 편집기를 이용하는데 간단히 테스트 해보는거니 메모장에 소스코드를 복사하여 파일을 저장해 주도록 합시다. 이런식으로 문서 편집기 같은 곳에 소스 코드를 복사하여 소스코드를 편집할수도 있습니다.

기본적으로 웹페이지의 확장자는 .html로 지정해 주시면 됩니다.

직접 복사한 소스를 html파일로 한번 열어 보도록 하겠습니다.

웹브라우저에서 파일 열기를 통해 직접 저장한 파일을 불러오 보도록 하겠습니다. 웹주소가 아닌 제 컴퓨터에서 열어본 모습입니다. 웹페이지 주소가 아닌 제컴퓨터에서 직접 실행도 가능 합니다.

물론 기존에 인코딩 문제로 기존에 한글이 깨집니다. 이문제는 소스코드에서 <meta charset="utf-8"> 구문을 삭제해 주시면 아래 이미지처럼 보실수 있습니다.

이렇게 각각의 브라우저별로 소스코드를 보는 방법과 간단한 CSS 조작 및 컴퓨터에 소스코드를 저장하여 직접 열어 보았습니다. JavaScript도 직접 테스트가 가능 합니다. JavaScript테스트 하는 방법은 이전에 작성한 글이 있으니 참고하시면 도움이 되실 겁니다. http://zzarungna.tistory.com/399

저작자표시 비영리 변경금지

인터넷 소스코드 보는 방법