크롬 개발자 도구 사용

 

크롬 브라우저에서 개발자 도구를 열면 다음과 같은 메뉴가 나오게 되는데 그중 화살표 이미지를 누르면  페이지의 요소를 선택해서 검사할 수 있다.

 

이런 식으로 각 요소들이 어떤 방식으로 구성됐는지 검사 할 수 있는 기능이다.

 

Elements는 html의 구조를 보여준다.

Styles는 어떤 css가 적용이 됐는지 볼 수 있고

적용된 css의 체크 표시를 통해서 css를 적용하거나 없애거나 할 수도 있다.

또 CSS를 수정해서 웹페이지의 레이아웃을 수정해볼 수도 있다.

---

Computed에서는 현재 레이아웃의 여백 등을 볼 수 있다.