개발자 도구에 대해 알아보자.

개발자 도구

구글에서 만든 웹브라우저인 크롬에는 개발을 도와주는 다양한 도구가 기본적으로 제공된다. 이를 개발자 도구라고 한다. 개발자 도구를 이용하면 HTML, CSS, JavaScript의 생산성을 극대화 할 수 있다.

HTML 개발 관련

• Elements : HTML 코드를 분석하고, 실시간으로 수정할 수 있는 도구
• Resources : 현재 로딩된 웹페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람 할 수 있는 도구
• Network : 서버와의 통신 내역을 보여주는 도구로, 존재하지 않는 리소스를 찾는데 도움이 됩니다.
• Application : 웹 에플리케이션의 성능을 향상시킬 수 있는 방법들을 컨설팅해주는 도구

Elements 패널

1. 우리팀 주제는 Elements pannel 이다.

   좌측: html 우측: css가 있는걸 확인 할 수 있다.
   특정요소로 접근 할 수 있고 태그를 눌러 확인도 가능하다.

Instargram 피드의 너비는?

피드 하나를 잡았을 때

Styles 부분의 순서가 의미하는 것은?

개발자가 기록한 CSS와는 순서가 다르며, 가장 상위태그인 html, ID, CLASS, TAG 순서대로 배치되어 있다.

user agent sheet(유저 에이전트 시트)란?

• 디폴트스타일시트를 의미한다.
• 글꼴을 이테릭체, 배경은 연회색으로 구성되어 있다.
• 우선순위가 작성자시트보다 아래이기때문에 작성자가 쓴 시트로 덮어씌워진다.
• reset.css 로 전체 리셋 선언도 가능하다.

reset.css ?

reset.css는 모든 브라우저에서 통일된 화면을 볼 수 있도록
기본값을 처음부터 초기화시킨다는 의미이다.
body태그에 있는 margin 기본값이 달라서인데.. 처음부터 body의 margin, padding 값을 0으로 초기화시킨 후에
태그 작성을 한다면, 두 화면 모두 동일한 결과를 보여줄 수 있다.

즉 css 작성시 아래처럼 처음부터 리셋을 해준다.

body
{
margin:0px;
padding:0px;
}