인터넷 웹페이지 사이트 HTML 소스 코드 쉽게 분석하기 방법 :: 크롬 개발자도구

2018. 2. 15. 18:11 IT, SNS/구글 크롬

오늘은 인터넷 웹페이지 사이트 HTML 소스 코드를 쉽게 분석하는 방법에 대해 알아보겠습니다. 블로그나 사이트를 운영하시는 분들이라면 본인의 스킨과 디자인, 여러 기능을 좀더 발전시켜나가고 나뿐만 아니라 방문자가 봤을 때도 좋은 느낌을 가질 수 있도록 하고 싶을 것입니다. 또는 다른 블로그를 방문했을 때 애드센스 광고 크기가 336x280인지 330x200인지 정확한 수치를 알고 싶을 때도 있을 것입니다. 그러기 위해서는 이렇게도 해보고 저렇게도 해보는 시행착오를 거쳐야 하는데요.


웹 개발과 소스 코드 C언어와 같은 것에 익숙하지 않으신 분들은 어느 부분을 어떻게 수정하면 좋을지 엄두가 안 나는 것이 사실입니다. 하지만 구글 크롬 브라우저의 개발자도구라는 도구 툴을 이용한다면 누구라도 쉽게 어느 부분을 고쳐야 하는지 알 수 있고, 또 시험삼아서 즉석으로 수정해볼 수도 있기 때문에 큰 도움이 될 것입니다.



먼저 구글 크롬 브라우저를 실행시킨 후 오른쪽 위에 보이는 점세개 버튼을 누릅니다. 그리고 도구 더보기를 클릭한 다음 개발자 도구를 눌러주시기 바랍니다. 이렇게 일일이 마우스로 클릭하는 것이 귀찮으시다면 Ctrl키와 Shift키 그리고 I(알파벳 아이)를 동시에 누르시거나, 이것도 불편하다 싶으면 F12키를 눌러주시면 됩니다.

그러면 Developer Tools라는 창이 하나 뜨는데요. 이게 바로 구글 크롬 개발자 도구창입니다. 여기에는 다양한 기능이 있지만, 우리가 블로그 웹페이지에 있는 항목들을 분석하기 위해서는 Elements라고 되어 있는 탭을 클릭해서 보시면 되는데요.

개발자도구차 위에 보면 1번으로 화살표 표시한 곳에 작은 네모창에 화살표 커서가 있는 버튼이 보이실 겁니다. 이 버튼을 클릭한 다음 웹페이지에서 내가 수정하고 싶거나 이미지, 혹은 광고 크기가 궁금한 부분을 클릭해줍니다.


그러면 크롬 개발자도구 Elements탭에 자동으로 해당 이미지가 있는 부분의 소스 코드로 이동이 되는데요. 여기에 적혀 있는 정보들을 통해서 광고 크기나 이미지 크기를 확인하실 수가 있습니다. width는 가로 폭을 말하고, height는 세로 높이를 말합니다. 세로 높이를 좀더 길게 해보기 위해 해당 부분을 마우스 오른쪽 버튼으로 우클릭을 하면 몇가지 기능들이 표시되는데요 여기에서 Edit as HTML을 누릅니다.


Edit as HTML(HTML로 편집하기)를 누르면 이렇게 메모장처럼 내가 선택한 부분을 편집하고 수정할 수 있도록 글자, 숫자를 입력하거나 삭제를 할 수가 있게 됩니다. 저는 높이를 나타내는 height 안에 있는 숫자를 200으로 고쳐보았습니다.

200으로 고치면 웹페이지에 있는 해당 이미지의 높이가 길쭉하게 변경된 모습을 볼 수 있는데요.

google_chrome

어디까지나 미리보기에 해당하기 때문에 이렇게 HTML 편집을 했다고 하더라도 수정을 하려면 실제 웹페이지의 HTML/CSS 코드 부분을 수정해주셔야 합니다. 티스토리 블로그의 경우는 블로그 관리화면에서 꾸미기, 스킨 편집, HTML/CSS 편집 순으로 들어가셔서 수정을 해주시면 되겠습니다. 오른쪽에 보면 Styles라는 부분이 있는데 이 부분이 바로 스타일 CSS 부분입니다. 이곳도 참고하신다면 HTML과 CSS코드에 대한 공부에도 도움이 되실 것입니다.


크롬 방문기록 삭제하기 방법

구글 크롬 시작페이지 설정 변경하기(바꾸기) 방법

구글 크롬 메뉴 언어 설정하기 및 변경 방법

모바일 크롬 다운로드 기록 삭제하는 3가지 방법

모바일 크롬 방문 기록 히스토리 삭제하기

♥ 암호화폐 후원하기 ♥


ⓑ 비트코인(BTC) ⓑ


◆ 이더리움(ETH) ◆


♣ 리플(XRP) ♣

리플 데스티네이션 태그