크롬 브라우저로 HTML 디버깅하기

개발자도구를 이용해서 디버깅하기

HTML 코딩 작업시 디테일한 간격조절이나 깨진화면 원인을 찾고싶을경우

크롬브라우저 개발자도구로 쉽게 디버깅할수 있습니다.

크롬 브라우저에서 개발자도구를 여는 방법은 F12 를 누르면 위와 같은 창이 열립니다.

열린상태에서 빨간 테두리영역에 Elements 탭메뉴 부분을 누르면

브라우저에 적용된 HTML 코드가 녹색테두리 부분에 나옵니다.

오른쪽 파란테두리영역은 브라우저에 적용된 css가 나올 부분입니다.

수정하고 싶은부분을 직접찾는방법이 있구요.

더 쉽게 하는방법은 고치고 싶은 부분이 로고부분이다라면 로고부분에 마우스를 갖다대고

오른쪽마우스를 클릭하시고 검사를 누르시게 되면

개발자도구창이 열림과 동시에 로고부분에 대한 

HTML코드와 CSS를 포커싱을 해줘서 한눈에 보실수 있습니다.

수정하고싶은 영역을 찾았다고 CSS를 수정하실수 있습니다.

실제 적용은 안되지만 테스트용으로 직접적용해서 미리보기 하실수 있습니다. 

원하시는 스타일을 적용테스트하신후 실제 적용하시면 작업효율이 좋습니다.