7. 디버깅 HTML CSS

• 들어가기 전에 프로그래밍의 디버깅이 꽤 중요하다고 하는데요, HTML / CSS를 개발하면서 생기는 문제를 어떻게 빨리 처리해야 할까요? 더 빠르고 정확한 문제를 해결하기 위한 HTML / CSS 디버깅 방법을 공부해봅시다.

---

학습 목표

1. HTML / CSS의 디버깅 방법을 이해합니다.

핵심 개념

• debugging
• chrome developer tools

학습하기

크롬 개발자도구의 Element panel을 잘 익혀두는 것이 중요합니다. 개발자 도구를 통해서 쉽게 할 수 있는 일들을 정리하면 다음과 같습니다.

• CSS Style을 inline 방식으로 빠르게 테스트할 수 있습니다.
• 현재 엘리먼트의 값을 임시로 바꿀 수 있습니다.
• 최종 결정된 CSS값을 확인할 수 있습니다.