평소에 MS익스플로러가 아닌 구글 크롬을 웹브라우저로 사용하는 이유가 궁금하신가요?
어떤 웹브라우저를 쓰느냐는 그 사람의 취향 차이겠지만 저 같은 경우는 구글 크롬의 페이지 로딩속도가 빠르기 때문만은 절대 아니랍니다^^
구글 크롬에는 MS익스플로러에는 없는 '요소 검사'란 특별한 기능이 있기 때문에 블로그 스킨과 구조변경시에 아주 유용합니다..
물론 구글 크롬이나 MS익스플러라나 '페이지 소스보기'라는 메뉴가 있긴 합니다만..저 같은 초보의 경우라면 HTML에 대해서 쉽게 이해하기 힘들더라구요..
그래서 구글 크롬의 '요소 검사'기능을 처음 접했던 그 순간..우와..이런 기능이 있었다니~하고 놀라워했었답니다..왜 그런지 포스팅 내용을 보시면 충분히 이해하실꺼에요^^
먼저 구글 크롬의 '요소 검사'기능을 사용하기 위해선 마우스 오른쪽 버튼 메뉴가 활성화 되어야 합니다..
즉..불펌방지기능을 해둔 페이지에서는 사용이 불가능하죠~ 다음,네이버 같은 포털사이트 대문과 불펌방지를 해둔 블로그 페이지를 비교해보세요~~
불펌 방지기능이 적용된 페이지는 마우스 오른쪽 버튼 메뉴가 활성화되지 않는답니다^^ 참고하세요~
우선..이 블로그를 기준으로 구글 크롬 '요소 검사'에 대해서 설명드리고자 합니다^^
당연히 이 페이지도 불펌방지가 되어있어서 블로그 관리자가 아니라면 마우스 오른쪽 버튼 기능을 활용할수 없어요~일단 구글 크롬에서..마우스 오른쪽 버튼을 클릭하면 최하단부에 '요소 검사'라는게 보입니다.
'요소 검사'를 실행시켜주면 위 캡쳐화면처럼 윈도우창 하단부에 '요소 검사'창이 생성이 됩니다..
MS익스플로러와 구글 크롬의 페이지 소스보기 기능과 가장 큰 차이점은 바로..초보자라도 쉽게 HTML의 어떤 부분이 블로그의 실제 어떤 부분인지 눈으로 확인이 된다는 거죠^^
즉..HTML의 구조파악에 상당한 도움이 되고 무엇보다 재미있습니다 ㅋ
HTML에서 "헤더"부분에 마우스 커서를 가져가보면...저기 "헤더"부분이 반투명 색깔로 표시가 됩니다..
HTML에서 "article"부분에 마우스 커서를 가져가보면... "article"부분에 반투명색이 표시되네요~
HTML에서 "사이드바"부분에 마우스 커서를 가져가보면... "사이드바"부분도 마찬가지로 반투명색이 표시됩니다~ 이런식으로..html의 특정부위를 눈으로 확인이 가능하다는게 구글 크롬 '요소 검사'기능의 장점이죠^^
구글 크롬 '요소 검사' 활용하기
구글 크롬 '요소 검사'로 변경해보기
그럼 실제로 구글 크롬 '요소 검사'로 특정부분을 변경하는 방법을 알아보겠습니다.
사실 구글 크롬 '요소 검사'기능은 말그대로 검사와 분석만 하는 기능이지..실제로 요소 검사를 통해서는 변경과 저장이 되지않아요~~단순히 html을 변경했을때 어떻게 변하게 되는가를 눈으로 보여줄 뿐이죠^^
따라서..이러한 분석을 통해서 나중에 자신이 직접 블로그의 html에 들어가서 변경을 해줘야 합니다.
예를 들어서 이 블로그 하단에 있는 다음뷰 위젯과 믹스업 위젯이 있는 테이블의 일부를 변경해볼께요^^ html에서 하단부 '테이블'을 찾습니다..찾는거는 쉽죠..저렇게 테이블이 반투명색으로 표시가 되니까요 ㅋ
이 테이블의 구조는 어떻게 생겼을까요? 구글 크롬 '요소 검사'에는 또 다른 기능이 있는데 "Metrics"라는 기능이죠..요소 검사창 오른쪽에 보면 다양한 메뉴들이 보이는데 3번째에 있습니다.
Metrics란 말그대로 구조를 분석해주는 기능이죠..위에 보이는 것처럼 테이블의 여백,경계 등의 수치가 한눈에 들어옵니다..저렇게 그림으로 되어있으니 더 쉽게 느껴지죠^^
그래서 저 부분에서 직접 숫자를 바꿔가면서 입력해보면 어떻게 변화는지 알수가 있습니다.
다른 것은 손대지 않고 이 테이블에 여백을 상하좌우 5px로 변경해보았더니..
이렇게 실제 블로그 페이지에서 여백이 생긴것을 바로 눈으로 확인할수가 있죠~ 이건 정말로 극히 일부분에 불과한 기능을 예로 든거구요.. 실제로 구글 크롬 '요소 검사'에는 정말 수많은 기능이 있답니다.
블로그를 꾸미고자 하는 분들이라면 html을 쉽게 이해하는데 구글 크롬 '요소 검사'를 활용하면 정말 많은 도움이 될꺼에요~
