브라우저 왜 크롬?
구글에서 만들어서 개발자 친화적인 도구들이 많다.
문서화가 잘되어있다.(설명서 잘되있다)
elements
1. Elements 패널의 기능은?
-
element패널:
문서 내의 모든 요소를 정의하고 있으며, 랜더링된 페이지의 html 구성요소와 구성요소에 적용된 css를 볼 수 있다. -
element패널의 기능:
- html이 어떻게 구성되어 있는지 확인할 수 잇다.
- 이미지, 동영상과 같은 source의 url을 얻을 수 있다.
- select element 버튼을 이용하여 특정 요소의 정보의 스타일 등을 확인할 수 있다.
- css를 변경하여 적용해볼 수 있다.
- 해당 페이지는 몇 개의 section 으로 이루어져있나요?
- 5개의 section으로 이루어져 있다.
- Instagram 피드의 가로 길이는?
- 935px
- Styles 부분의 순서가 의미하는 것은?
- HTML이 실행되었을 때 가장 먼저 적용되는 순서대로 배치되어있다.
- 개발자가 기록한 CSS와는 순서가 다르며, 가장 상위태그인 html, ID, CLASS, TAG 순서대로 배치되어있다.
5.user agent stylesheet 란?
- brower 상에서 기본으로 지정되어 있는 스타일
css: author style(css상에 작성한 스타일) ->User Style(사용자가 지정)-> Brower
Console
:: https://velog.io/@nichol/%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%8F%84%EA%B5%AC
Network
:: slack upload
Application
창고, 저장소의 느낌
local storage
계속 남아있어야 하는 정보/
ex) 자동로그인을 구현할때 사용
session storage
끄면 날아가는 정보
ex) 비회원으로 장바구니에 물건 담고, 사이트 닫고 다시 접속했을때 장바구니 물건 없어진다면 session storage에 저장한 것.
cookie
저장용량이 비교적 작다
요청보낼때마다 무조건 따라서 감(계속 쌓임)
ex) 팝업창 올라오고 하단에 '하루동안보지않기' 같은 경우 하루짜리 cookie에 담은것.
