HTML5 준비하기

1. 브라우저 다운.

• Firefox     : http://www.mozilla.com
• 구글크롬  : www.google.com/chrome
• 오페라     : http://www.opera.com
• 사파리     : http://www.apple.com/safari
• Chromium: 

2. 브라우저의 개발자 도구 활용하기.

2.1 파이어폭스의 개발자 도구.

별도의 플러그인으로 설치가 가능하다.

• 파이어버그 :
    자바스크립트 콘솔, HTML마크업,CSS와 상속여부, DOM구조와 박스모델 등의 정보를 한눈에 알아보기 쉽게 제공.
    마크업과 CSS 등의 정보는 직접 값을 바꾸어 가면서 실시간으로 페이지의 변화를 살펴볼 수 있다.
• 웹디벨로퍼

2.2 크롬의 개발자 도구

• 크롬은 개발자 도구를 따로 설치할 필요가 없다. 
• 리소스 관리나 코드의 효율성을 관리하는 기능이 돋보인다.
• 
  

웹페이지에서 마우스 오른쪽 버튼 - '요소검사(N)' 선택한다.

2.3 사파리의 개발자 도구

• 브라우저에 내장된 '웹 인스펙터' 이용한다. 사파리 옵션에서 고급 - '메뉴 막대에서 개발자용 메뉴 보기' 를 체크한다.
• 불여우의 파이어버그와 거의 동일한 디버깅 툴을 제공한다.
• 웹 스토리지를 확인할 수 있는 기능도 제공.
• 각 개첼들이 로드되는 순서와 로드 시간을 그래프로 보여줌.

2.4 오페라의 개발자 도구

• 브라우저에 내장된 드래곤 플라이를 사용한다.
• 오른쪽 팝업 메뉴에서 '요소검사' 항목 선택.

※ 본 내용은 HTML5&CSS3(송종식 지음:지앤선 출판) 책 내용을 참고하여 정리한 겁니다.