📗CSS 디버깅 하기
작업 결과물이 만약 여러분이 원하는 것과 다르다면, 우선 개발자 도구를 활용하여 여러분의 코드가 의도대로 적용되었는지 살펴볼 수 있습니다.
살펴보고 싶은 요소에 마우스를 우클릭하고 검사 버튼을 클릭해주세요.
아래와 같이 해당 요소를 자세히 살펴볼 수 있는 개발자 도구가 화면에 나타났나요?
좌측 패널에서 여러분의 HTML이 웹사이트로 구현된 구조를 확인할 수 있고, 우측 패널에서 여러분의 CSS 코드가 실제로 어떻게 적용되었는지 확인할 수 있습니다.
또한, 즉각적으로 CSS 코드를 수정하여 화면에 어떻게 반영되는지 미리 확인해볼 수 있기도 합니다.
구글에서 "크롬 개발자도구 사용법"이라고 검색하시면 더 많은 자료가 있으니 다양한 자료를 참고하여 개발자도구 사용법을 익혀보세요. 😎
Last updated