html 소스보기 (크롬과 익스플로러)

웹서핑을 하다가 가끔씩 이 사람은 어떤 소스를 쓸까 궁금할 때가 있다. 글쓴이는 아직 초보자이고 배우는 입장에서 이런 호기심이 자주 생긴다. 저 사람은 어떻게 저걸 만들 수 있을까, 이건 어떻게 디자인한걸까 하면서 말이다. 한 번은 의도치 않게 뭔가를 잘못 눌러서 소스를 볼 수 있는 경우도 있었다. 정작 내가 원할 때는 할 수 없었는데 말이다. 그래서 이번에 작정하고 html 소스보기 포스팅을 작성하겠다. 우리나라에서 대표적으로 쓰이고 있는 익스플로러, 그리고 요즘 윈도우에서 밀고있는 엣지(Edge), 마지막으로 인기몰이중인 크롬을 중심으로 설명하겠다.

익스플로러(Internet Explorer)에서 소스 확인하기

해당 브라우저를 실행하면 주소 하단 부분에 메뉴가 보인다. 여기서 도구(T)를 이용한다.

그러면 메뉴가 촤악 나온다. 여기서 F12 개발자 도구(L)를 하면 소스를 볼 수 있다. F12는 익스플로러 브라우저에서 사용되는 html 소스보기 단축키다.

엣지(Microsoft Edge)에서 확인하기

익스플로러와 비슷한 계열인 엣지도 역시 간편한다. 창 닫기 하단에 위치한 점 세개 실행한 후 F12 개발자 도구를 실행해주면 된다.

크롬(Google Chrome)에서 보기

위 예시처럼 가면 크롬에서 html 소스보기 확인을 위한 개발자 도구(D)를 찾을 수 있다. 단축키는 지금까지와 동일하게 F12다. 또는, 단축키로써 여기선 컨트롤, 쉬프트, 알파벳 대문자 I를 동시에 눌러주면 된다.

지금까지 브라우저별 소스보기 방법을 공부했다. 필요하실 때마다 사용하고 참고하시길 바란다. 앞으로 가벼운 마음으로 조금씩 html과 친해지려고 노력해야겠다. 어려워 보이지만 기초적인 부분이 흥미롭다.