[ 크롬 ] 크롬 개발자 도구 간단하게 사용해보기

앞서 html에 대해 살짝 다뤄보았는데, 블로그 스킨 편집 뿐만이 아니라 브라우저에서도 내맘대로 바꿔볼 수 있다.

바로 크롬 브라우저에서 가능한데, 개발자 도구 라는 것을 이용하면 된다.

 

크롬 개발자 도구는 크롬 창을 키고 F12 키를 누르면 된다.

그럼 다음과 같이 블로그 스킨 편집에서 html 편집을 눌렀을 때와 비슷한 화면이 나올 것이다.

 

그 때처럼 바꾸고 싶은 영역을 찾아 원하는대로 바꾸면, 네이버 창이 그대로 바꾸어 나오게 된다.

이 때 원하는 부분을 쉽게 찾기 위해, 다음과 같이 마우스 모양의 버튼을 누르고(빨간색 상자), 원하는 위치에 가져다 대면(검청색 상자) 클래스가 뜨면서 html 코드도 해당하는 부분이 촤르륵 펼쳐지게 된다(노란색 상자).

 

이 툴을 이용하여 사전이라는 단어를 헤헷으로 바꿔보자.

오른쪽의 html 코드에서 '사전' 부분을 더블클릭해서 '헤헷'으로 바꾸면, 왼쪽 네이버창에서도 해당 위치의 글자가 '헤헷'으로 바뀌는 것을 확인할 수 있다.

 

이처럼, 크롬 개발자 도구를 이용하여 바꿔본다면 검색 순위에 내 이름이 1위가 되어 있을 수도 있고, 배너가 싹 다른 단어들로 바꿔볼수도 있을 것이다.

 

+) 핸드폰에서는 어떻게 보이는 지 보고 싶다면

마우스 그림의 버튼 옆에 핸드폰 모양의 버튼을 누르면, 모바일용 웹이 어떻게 보이는지 모양이 바뀌게 된다.

이를 이용해서 왼쪽 사진에서 모바일용 웹을 확인해볼 수도 있고, 노란색 상자안처럼 여러가지 기종을 바꾸면서 확인해볼 수 있다.

html과 css에 익숙하지 않다면 이렇게 개발자 도구로 편집해보면서 흥미를 붙이고, 배워나가면 좋을 것 같다.

 

Reference

네이버 홈페이지