[Front-End] 11) 디버깅-HTML-CSS

들어가기 전에

프로그래밍의 디버깅이 꽤 중요하다고 하는데요,

HTML/CSS를 개발하면서 생기는 문제를 어떻게 빨리 처리해야 할까요?

더 빠르고 정확한 문제를 해결하기 위한 HTML/CSS 디버깅 방법을 공부해봅시다.

 

 

---

학습 목표

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

 

 

---

핵심 개념

• debugging
• chrome developer tools 

 

 

---

학습하기

크롬 개발자도구의 Element panel을 잘 익혀두는 것이 중요합니다.

개발자도구를 통해서 쉽게 할 수 있는 일들을 정리하면 다음과 같습니다.

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

 

* reference :

[참고링크] 페이지와 스타일 검사 및 편집

1) https://developers.google.com

Google Developers

2) https://www.edwith.org/boostcourse-web/lecture/16679/

[LECTURE] 7) 디버깅-HTML-CSS : edwith