개발자 도구 요소

Elements 패널의 기능은?

• 웹 페이지의 구성(DOM)
  기본적으로 해당 페이지가 어떤 코드와 구성으로 이뤄져 있는 지 확인 가능하다. 그래서 전ㅊ체 숲을 보는 창이라고 보면 된다. 그래서 해당 창을 통해 개발자의 개발 현황 및 주석 등을 보고 웹사이트의 구현된 기술 및 동향 파악도 역시 가능하다.

HTML 코드를 분석하고 실시간으로 수정할 수 있는 도구 패널
DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트
변경된 사항들에 대해서는 실시간으로 웹 브라우저를 통해 확인

• DOM이란?
: 문서 객체 모델(The Document Object Model, 이하 DOM)은 HTML, XML 문서의 프로그래밍 interface 이다.

• 구성요소의 스타일 속성(CSS)
  해당 페이지 스타일 속성이 어떤 것들이 들어가 있는 지에 대해 확인 가능.

• CSS수정, UI 수정
  또한 여기서 머무르지 않고 css 값을 해당 창에서 넣으면, 즉각적으로 확인 가능하다. 이에 따라 개발자는 해당 페이지의 css 코드를 수정하고 이에 맞춰 ui역시 수정되게 금 할 수 있다.

총 5개의 섹션으로 구성.

• 반갑습니다,저는 이현섭입니다.
• Work Experience.
• Other Experiences.
• Skills.
• Contact.

1. Elements Tab > Styles 부분의 순서가 의미하는 것은?
HTML이 실행되었을때 가장 먼저 적용되는 순서대로 배치가 되어있다. 개발자가 기록한 CSS와는 순서가 다르며, 가장 상위태그인 html, ID, CLASS, TAG 순서대로 배치되어 있다.

• 선택자 우선순위 순서
: !important > HTML에서 style을 직접 지정한 속성 > id > class > tag > 상속된 속성

3. Instagram 피드의 가로 길이는?
   Section : 640보다 작아지면 max 640 / 640보다 피드가 커지면 min 640
반응형으로 계속 변하는데 640보다 전체화면 커지면 640에 고정.
   그 밑에 div가 피드..?
div는 max 614

4. user agent stylesheet 란?

• 브라우저의 기본 스타일 값을 의미. (브라우저마다 다름)
• 브라우저 상관없이 동일한 화면을 출력하도록 하고 싶다면 => 개발 시작 단계에서 기본 스타일 값을 모두 초기화시키고 작업할 것.
  https://hmmim.tistory.com/82

Reset css 파일 적용. 초기화 시키면 된다.